Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. 

Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet consectetur adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. 

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? 

Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? 

At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. 

Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. 

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

This original Lorem Ipsum Latin text is 249 words long (1,740 characters). Note that the famous paragraph from this text is actually this series of words cut out and re-arranged from the above text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Most designers will just repeat the text throughout their designs as needed.

There are a lot of Lorem Ipsum text generators online. But they all use this text as their source.

There are also lots of variations of the Lorem Ipsum text out there that have been modified to contain humorous words. Here's a version I'm particularly fond of, Kitty Ipsum:

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

I've even seen versions of Lorem Ipsum where the authors sneak in hyperlinks. (I guess tricking tons of web designers into accidentally linking to your website is a viable SEO strategy.)

Anyway, if you just want to have access to the raw Lorem Ipsum text itself in an easy copy-paste format, this is it. I recommend bookmarking this page. 😉

Where does Lorem Ipsum text come from?

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC. This makes it more than 2000 years old.

Typesetters started using Lorem Ipsum in the 1500s. Fast forward to today, designers and developers still use this same placeholder text in their web designs.

Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, wanted to find the original source for Lorem Ipsum text. He looked up one of the more obscure Latin words from the passage: "consectetur". This helped him discover the original source.

It turns out Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet" comes from a line in section 1.10.32.

Note that the original text included some typos. (I suppose they didn't have spellcheck back in 45 BC.) Since this is a tradition, and very few people can even read Latin today, I've chosen to use the original version above that includes those typos, rather than one of the corrected versions.

Is lorem ipsum copyrighted?

No. It is public domain (copyright-free) so no one owns the rights to it. You can use Lorem Ipsum text freely.

Should I use a Lorem Ipsum Generator?

I personally don't bother with these. You can just use the original Lorem Ipsum text.

Some design tools may already have Lorem Ipsum text built-in, and you can just use those.

Have fun designing your layout. And if you want to learn some more coding, check out freeCodeCamp's core curriculum.

As of the mid 2020s, UTF-8 is one of the most popular encoding systems.

To start using UTF-8, you will want to first familiarize yourself with the the basic ASCII character set.

What is the ASCII Character Set?

ASCII uses 7-bit code points to represent 128 different characters. These code points are divided into 95 printable characters, which include the 26 letters of the English alphabet (A to Z, both upper- and lower-case), the 10 digits (0 through 9), and a variety of punctuation and other symbols.

There are also 33 non-printable characters, which include control characters like carriage return and line feed, as well as various other characters that are used for things like formatting text.

UTF-8 VS ASCII – What's the Difference?

UTF-8 extends the ASCII character set to use 8-bit code points, which allows for up to 256 different characters.

This means that UTF-8 can represent all of the printable ASCII characters, as well as the non-printable characters.

UTF-8 also includes a variety of additional international characters, such as Chinese characters and Arabic characters.

How to Use UTF-8 in Your Webpages – HTML UTF-8 Example

And now the easy part. You don't actually need to know how it works (though I'll tell you in a moment.) You can configure UTF-8 Character Encoding in your HTML code with a single line of HTML located in the <head> section of your code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
</html>

With that out of the way, let me explain how UTF-8 works, and why it's such a brilliant encoding scheme.

How UTF-8 Encoding Works, and How Much Storage Each Character Uses

When representing characters in UTF-8, each code point is represented by a sequence of one or more bytes. The number of bytes used depends on the code point being represented by the character. Here's a breakdown of the usage range:

• code points in the ASCII range (0-127) are represented by a single byte
• code points in the range (128-2047) are represented by two bytes
• code points in the range (2048-65535) are represented by three bytes
• and code points in the range (65536-1114111) are represented by four bytes. (This may seem like a lot of possible characters, but keep in mind that in Chinese alone, there are 100,000s of characters.)

The first byte of a UTF-8 sequence is called the "leader byte". The leader byte provides information about how many bytes are in the sequence, and what the code point value of the character is.

The leader byte for a single-byte sequence is always in the range (0-127). The leader byte for a two-byte sequence is in the range (194-223). The leader byte for a three-byte sequence is in the range (224-239). And the leader byte for a four-byte sequence is in the range (240-247).

The remaining bytes in the sequence are called "trailing bytes." The trailing bytes for a two-byte sequence are in the range (128-191). The trailing bytes for a three-byte sequence are in the range (128-191). And the trailing bytes for a four-byte sequence are in the range (128-191).

You can calculate the code point value of a character by looking at the leader byte and the trailing bytes. For a single-byte sequence, the code point value is equal to the value of the leader byte.

For a two-byte sequence, the code point value is equal to ((leader byte - 194) * 64) + (trailing byte - 128).

For a three-byte sequence, the code point value is equal to ((leader byte - 224) 4096) + ((trailing byte1 - 128) 64) + (trailing byte2 - 128).

For a four-byte sequence, the code point value is equal to ((leader byte - 240) 262144) + ((trailing byte1 - 128) 4096) + ((trailing byte2 - 128) * 64) + (trailing byte3 - 128).

UTF-8 is a Sound Choice for Encoding

Again, UTF-8 is a super efficient encoding system. It can represent a wide range of characters while still being compatible with ASCII. This makes it a sound choice for use in internationalized software.

I hope you've found this helpful. If you want to learn more about programming and technology, try freeCodeCamp's core coding curriculum. It's free.

We just published a course on the freeCodeCamp.org YouTube channel that will teach you all you need to know about creating good typography as a UX Designer.

Hope Armstrong developed this course.

You will learn how to choose a typeface, what to look for when laying out type, how to create typographic hierarchy, how to layout type, and how to create responsive typography.

First you will get an introduction to typography. This stage will give you the foundation to build upon as you learn more about typography.

Next you will learn how to select, install, and use fonts on your computer and in your designs. You will learn about font weights, styles and sizes as well as the importance of horizontal and vertical spacing to create typographic rhythm and flow.

After learning about fonts, you will learn how to create typographic hierarchy with style, weight, size, positions, capitalization and color, and how to combine different typeface to create variety and interest.

Finally, you will learn about responsive typography, grid systems, variable fonts, and the fine details of type.

Watch the full course below or on the freeCodeCamp.org YouTube channel (2-hour watch).

Here are a couple of things to keep in mind when you add Font Awesome to your next project.

Add the link to the head

Imagine you have the following HTML:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="testing.css">
    <link rel="stylesheet" type="text/css" href="css/all.css">
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
</head>
<body>
    <i class="fab fa-github-square"><a href="https://github.com/willyblackkeez" id="profile-link"></a></i>
    <i class="fab fa-facebook"></i>
</body>
</html>

Like other CDNs, you need to add a <link> element to the <head>. For Font Awesome 5.7.2, it'll look something like this:

<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">

Online vs local

If you run the following code in a web based editor like CodePen or CodeSandbox, the following code renders icons properly:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">
    <link rel="stylesheet" type="text/css" href="testing.css">
    <link rel="stylesheet" type="text/css" href="css/all.css">
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
</head>
<body>
    <i class="fab fa-github-square"><a href="https://github.com/willyblackkeez" id="profile-link"></a></i>
    <i class="fab fa-facebook"></i>
</body>
</html>

But if you try to open the page locally in a browser, you'll still see the black rectangles instead of the icons:

Take another look at the href in the <link> element above. Do you see it?

The problem is that, when you load the page from your local file system, the browser is trying to find the Font Awesome CSS file at the root of the file system.

To get things working online and locally, make sure to add the URL scheme (HTTP, or better, HTTPS) to the href:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">

What's going on here?

When you leave off the URL scheme (href="//use.fontawesome..."), then the browser uses the same URL scheme the page was loaded with.

So if you run the page locally by running the HTML file in a browser, the href assumes the Font Awesome CSS is also a file that is also saved locally (file:).

Just make sure the href attributes for your <link> elements all point to the full URL, including the URL scheme, and you should be good to go.

Type families are ranges of typeface designs. Each family is a variation of a basic style of alphabet. There are hundreds or maybe even thousands of typeface families.

Reference-style:

History

The concept families of type hadn’t formed when typefaces were first invented, and all fonts were roman designs. During the early years of the 16th century, cursive type was introduced. Cursive was also called italic, named after Italy, where the idea was popularized. Romans were one style of type and italics were another, like serif and sans serif, and there were still no typeface families.

Punctuation

Punctuation gives type emotion, and gives indications on when to stop, slow down, and much more.

There are seven types of font families

• Old Style
• Transitional
• Modern
• Slab Serif
• Sans Serif
• Decorative
• Script-Cursive

Combining Typefaces

Font Pairing Basics

Which fonts look good together and which ones don’t? If you’ve ever struggled with this question, you’re not alone. Learn how to pair different fonts and styles by getting familiar with these clever combos!

Try these steps one by one

• Pair a regular and bold font to create a subtle contrast
• Balance a script font with a bold font
• Pair a tall and short font to create visual interest
• Pair fonts with different weights to create a strong contrast
• Pair a regular and italic font to create emphasis

There are no hard and fast rules for choosing typefaces, but you can often avoid having to choose new typefaces by styling an existing typeface to create a visual hierarchy. When in doubt, keep it simple.

Designers follow different philosophies to determine when and how to combine typefaces.

Anchor or Role Typeface

If your project involves large amounts of text, choose an anchor typeface for the body text. This anchor typeface will guide the rest of your design choices as you make continuous tests and refinements for different combinations of typefaces against your anchor.

Contrasting Typefaces

For text-light projects, having clear hierarchical roles for a font is not as great a concern as visual impact. Pair contrasting typefaces such as serif plus sans-serif. Designers often share their favorite typeface pairs, so search and experiment until you create a pleasing result.

Typeface Families

Many type foundries create typefaces with extensive extra features like multiple weights and cases, decorative glyphs, serif and sans-serif versions, etc. You can use a single type family like this to ensure consistent design while creatively using those extra features to provide extra emphasis or decoration that might otherwise require another typeface. Typeface families are often a great compromise of visual consistency and typographic flexibility.

Type Classifications

Almost all typefaces fall into one group or another. This system of classifying typefaces developed in the nineteenth century. Each typeface has it’s own visual structure, influences, intent and historical significance.

The basic classification of typefaces is as follows:

• Serifs: These typefaces have small extensions, which embellish the basic structure of a typeface. Serif typefaces have existed since the beginning of type. They are visible in Old style and Humanist type serifs like Garamond. Baskerville, another serif typeface belongs to the transitional era. Bodoni and Rockwell are part of Modern and Slab serif(Egyptian) styled typefaces.
• Sans-serif : Sans means without. These typefaces are devoid of those small extensions, hence without serif. Examples include Gill sans which has Humanist connotations, Helvetica with it’s transitional characteristics and so on.
• Script: Letter forms developed in close relation to human handwriting are script typefaces. They are flexible in nature with varying stroke widths. Example : Bistro Script, Shelly, Minstral etc.
• Blackletter : A bold script style of calligraphy used heavily during the renaissance. Example: Fraktur
• Decorative: Typefaces which do not fit in other categories are decorative in nature. Built for specific use cases which largely consist of headlines, posters etc.

In addition, three main groups to classify type corresponding to different time periods in art and literature are as follows:

• Humanist letter forms belong to the renaissance period of around 15th & 16th century. They closely mimic calligraphy and human hand movement. Old serifs followed humanist letter forms. Examples of humanist type are : Sabon, Centaur, Adobd Jenson, Gill Sans etc.
• Transitional letter forms are part of the baroque era. They represent a transition from old style humanist typefaces to modern typefaces. Examples are : Baskerville, Times Roman, Helvetica etc.
• Modern letter forms, are part of the enlightenment period of around 18th-19th century. They depict a radical shift from traditional typography to a more abstract design. Examples are : Bodoni, Futura etc.

Source: Thinking with Type by Ellen Lupton

The same letters can be styled in different ways to convey different emotions. And there are all kinds of tradeoffs around style versus readability.

In this article, we’ll look at some of the smaller - but still important - details related to typography like point size, upper vs lower case letters, em vs en dashes, kerning, and more.

Point Size

The point size is a way to introduce standardization to typography. The point size is the smallest unit of measurement.

In metal type, point size refers to the height of the metal body on which a typeface’s character is cast. In digital typefaces, the metal body is replaced by an invisible box known as the em square. Each character fits inside that em square or em box. The em size of a font is equal to its point size.

html{
  font-size:16px;
}

body{
  font-size:1em;  // 1em is equal to 16px
}

The point size is also used to measure leading (line-height), line length and other elements, apart from font size.

In digital typefaces, one point is equal to 1/72 of an inch. Twelve points make one pica. Six picas make one inch. A common way of representing picas and points is as follows:

• 1 pica = 1p
• 1 point = 1 pts or p1
• 6 picas and 3 points = 6p3
• 7-point Open Sans with 9 points of leading = 7/9 Open Sans

The optimal point size for print is usually between 10-12 points while that for web, the optimal point size is between 15-25 points.

In CSS, you should set font-size in ems or rems than pixels as the former are scalable in nature. Recently, there has been much talk about fluid typography using the newly introduced units vw and vh.

Learn more about it here : Fluid Typography

Remember, different fonts set at the same point size will not appear to be of the same size due to their individual characteristics, namely—x-height, stroke modulation or contrast and character-width.

Upper and Lower Case

Uppercase (UC) is alternatively referred to as caps and capital. It is a typeface of larger characters. Lowercase (LC) is a typeface of small characters. As long as the shift key is not being pressed and the Caps lock is not active, everything typed is in lowercase. The Uppercase and Lowercase is often synonymous with Majuscule and Minuscule.

Many languages have two different written representations of their letters, upper case and lower case, also known as majuscule and minuscule forms.

Upper case and lower case letters are often mixed in the same piece of text. The use of cases is decided by grammar, but a variety of case styles also exists. Certain case styles are common in computer programming, referred to as naming conventions, like CamelCase and snake_case.

Uppercase:

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Lowercase:

a b c d e f g h i j k l m n o p q r s t u v w x y z

Capitalization is important for the following reasons:

• Passwords: passwords are case sensitive, so capitalization add an extra level of security.
• Measurements: When dealing with computer measurement, and other measurements, capitalization is important for identifying the exact type of measurement. For example, “Mb” (short for Megabit) and “MB” (short for Megabyte) are two different types of measurements with different values.
• Commands
• File names, directories and paths.

Ems and Ens

Ems and Ens are a form of the punctuation mark called ‘dash’. Although similar in appearance to a hyphen, they serve different purposes.

Em Dash

Use an Em dash to denote a break in the sentence. Substitute it for a comma or to denote a pause in a sentence. They are also used to attribute a quote to a speaker. An Em dash is one em wide—the width of a point size of a typeface. Don’t put any spaces before and after an em dash.
For example: The noise from the neighbor’s house—it’s killing me.

• Command for an Em dash on a mac : Shift-Option-Hyphen
• Command for an Em dash on Microsoft Word : Alt + Ctrl + (minus)
• Em dash in HTML : — or —

En Dash

Use an En dash as a replacement for the word ‘to’ or to denote a range of numbers. An En dash is half the width of an Em dash. Don’t put any spaces before and after an en dash.
For example: The first world war lasted from 1914–1918.

• Command for an En dash on a mac : Option-Hyphen
• Command for an En dash on Microsoft Word : Ctrl + (minus)
• En dash in HTML : – or –

Kerning and Tracking

Kerning refers to the spacing between two individual characters within a word.

Tracking refers to the spacing between words.

Some typefaces are not designed to be kerned or tracked too loosely and vice versa. If one kerns or tracks too tightly or too loosely, they risk sacrificing readability and legibility.

When deciding how tight or loose to kern or track your text, it is advisable to first consider the scale at which the text will be interacted with. If it is to be printed, how far away from the printed text will the viewer be? Will they be driving by? Will it be on read on a backlit screen?

One should also consider the positive and negative ground when tracking and kerning. Tracking too tightly or too loosely can result in awkward figure/ground relations that will distract the user.

Legibility and Readability

Legibility

Legibility means being able to differentiate different characters in a text. Legible text implies it can be easily interpreted. Look at the unique characteristics of a typeface when considering legibility. Some of the considerations are as follows:

• You should use each typeface according to it’s context and intended usage. Look into it’s history and it’s best use case scenarios. For example : Garamond is best used for large bodies of text on print whereas Georgia for screen.
• Keep in mind whether the typeface is for display text or body text.
• The x-height of a typeface is the size of the lowercase ‘x’ in a typeface. A typeface with medium to high x-height results in a text legible at even small sizes.
• Conventionally, serif typefaces are more legible for body text than their sans-serif counterparts.

Readability

Readability means arranging group of words or a blocks of text in such a way to make the text more accessible. The idea is to reduce the amount of effort required to read a body of text.

Stephen Coles remarks that readability, not only begs the question of “Can you read it?” but whether ” do you want to read it?”.

Jason Santa Maria points out in his book On Web Typography that reading is not a linear activity. We read in a back and forth motion called saccades, which is our eyes hopping from one point to another. Also, text with familiar words makes it easier for us to read. Some basic points to remember when considering readability are as follows:

• Contrast refers to the change in thickness of the stroke in different parts of the letter. Higher the contrast, higher the change in stroke. Use medium to low contrast typefaces for long bodies of text.
• Line Height refers to the distance between two lines of text. You do not want to make the block of text neither too tight nor too loose. You can control line height in CSS by the property ‘line-height’. For most texts, you can set it between 1.2 to 1.5 (without any units).
• Line length (measure) refers to the average number of characters in a line of text. A large line length hampers readability by making it difficult for our eyes to scan the text. Usually about 45-75 characters per line is optimal for a body of text. If you plan on increase the line length beyond that, then also take care to increase the line height so that there is enough space between two lines of text. In CSS, you can set the width of the container, and by using the em unit, you can get close to a set number of characters, depending on the width-to-height ratio of the font. Example: width: 35em;
• Tracking refers to adjusting the space between characters in a text. Adding tracking means adding white space between characters and vice versa. At small font sizes i.e. less than 10pts, adding tracking helps in improving readability. Similarly, for large headings, use negative tracking to bring the letters closer. You can control tracking in CSS via ‘letter-spacing’ property. For example : letter-spacing: 0.05em;
• Font size refers to the size of the font used in a text. For mobile display, use sizes of at least 12px. You can control font-size in CSS via ‘font-size’ property. Example: font-size: 48px;

As you can see, you need to take into account a lot of factors to ensure optimal legibility and readability. Remember, there are no hard and fast rules for any of the above described factors. They are mere guidelines which might help you to train your typographic eye better.

Color and Tonal Value

In color theory, a tonal value is produced by adding white, grey, or black to a selected color. This does not change the hue but does alter the colorfullness, also known as saturation. When discussing tonal value, there are three main terms that must be discussed: Tint, Tone, and Shade.

Tint is the addition of white to a color. Tint can be used to highlight an area as well as begin to create the illusion of depth on an object.

Tone is the addition of grey to a color. The tonal color creates a more muted and less saturated color.

Shade is the addition of black to a color. Shade can be used to darken and area to create the illusion of depth on an object.

By altering a colors tonal value, you can create the illusion of depth in images as well as alter the saturation level to better apply color for a desired emotion or mood.

More on Typography:

• Typography: anatomy of letterforms
• 8-point grid: typography on the web
• Why typography can make or break your design

_Source: https://en.wikipedia.org/wiki/Typeface_anatomy_

According to "Typeface anatomy", the typographic parts of a glyph are as follows:

1) x-height; 2) ascender line; 3) apex; 4) baseline; 5) ascender; 6) crossbar; 7) stem; 8) serif; 9) leg; 10) bowl; 11) counter; 12) collar; 13) loop; 14) ear; 15) tie; 16) horizontal bar; 17) arm; 18) vertical bar; 19) cap height; 20) descender line

Generally speaking, a typeface consists of 3 main parts:

1. Strokes
2. Terminals
3. Space

Strokes

Stroke refers to the main body of the letterform. They may be straight, as in letters like l, z, k, v or curved like in c or o. The different parts of the stroke are given below:

• The imaginary line on which most characters sit is known as the baseline** (4).
• Baseline (4): The imaginary line that most characters are situated on
• Capline (19): Another imaginary line that dictates the height of all uppercase characters. This is sometimes called the capheight
• Meanline: The imaginary line that marks the top of lowercase letters
• X-height (1): The height of the lowercase x character, and represents the distance between the baseline and the meanline.
• Stem (7): The main stroke in a letterform, which is often vertical or diagonal
• Crossbar (6): These are the strokes that connect two separate lines in capital letters such as A and H, or the horizontal stroke in the lowercase t
• Ascender (5): When the stroke of a lowercase letter goes above the meanline such as with l
• Ascender line** (2):** The imaginary line depicting the distance between the baseline and the top of the ascender
• Descender: When the stroke of a lowercase letter falls below the baseline like with g
• Descender line** (20):** The imaginary line depicting the distance between the baseline and the bottom of the descender
• Shoulder: Sometimes called an arch, this is a curved, arching stroke like the one at the top of R, and also found in h, n, and m
• Bowl (10): A curved, closed stroke like the ones in d, b, R, D, and B
• Leg (9): The downward diagonal stroke as in K and R
• Bar: The short, horizontal stroke in letters that do not cross a vertical line like the center of e, and the middle stroke of both E and F
• Arm (17): The long horizontal stroke at the top or bottom of a character like in E and F
• Tittle: The dot above characters like the one in i or j. This is sometimes called a dot or jot
• Loop (13): The open or closed bottom section of a double-story g in some typefaces

Terminals

Terminals are the end of the strokes and can be either serif** or sans-serif**.

A seriffed terminal has protrusions on the edges which can be described as a wedge, bulbous, teardrop, or slab. On the other hand, sans-serif terminals do not have any of those features at the end of strokes.

These days, sans-serif is used on digital displays since they have better legibility, especially on lower resolution displays where serif terminals are hard to depict.

Space

Space refers to the white space that is found between the letters and also inside letters like o and p with closed loops.

Below are some basic definitions to help you understand how type is described and measured.

Describing and measuring type

Typeface vs. font

Often these terms can be used interchangeably. But in the case of typography, there is a difference, however slight.

Typeface is a set of glyphs or characters – which include letters, numbers, and punctuation – that share a distinct sense of style. Common examples are Arial, Times New Roman, and Roboto.

Font is a small, specific subset of a typeface, and describes how the typeface is presented. For example, bold Roboto 8pt is one example of a font, while italicized Roboto 12pt is another distinct font.

Source: https://www.canva.com/learn/typography-terms/

Type families

Different options for a given typeface, most of which include bold, italic, and roman at a bare minimum. Other examples of type families include condensed bold, condensed black, ultralight, light, regular, ultralight italic, light italic, regular italic, and so on.

Point Sizes

The point is used to measure the size of a font. One point is equal to 1/72 of an inch. When a character is referred to as 12pt, the full height of the text block (such as a block of movable type), and not just the character itself, is being described. Because of this, two typefaces at the same point size may appear as different sizes, based on the position of the character in the block and how much of the block the character fills.

Pica

How lines of text are measured generally. One pica equals 12 points, and six picas equal one inch on a page or screen.

Tracking / Letter-spacing and kerning

These elements control the distance between characters and can be used to adjust legibility.

Tracking, or letter-spacing, is the space between characters across an entire block of block of text such as a magazine article.

Kerning is the space between individual characters. If you've ever typed a word in an editor and thought it looked off – the letters being either too close together or too far apart – it was probably a kerning issue.

Leading

This refers to the vertical distance between lines of text, and is measured from one baseline to the next.

Web typography is confusing. Do you know the best practices?

When I started looking around at popular websites to figure out the best practices for web typography, I must admit I was baffled. Below are some examples of typography scales I pulled from a few popular websites and design systems. Can you find the unifying pattern?

Samples simplified to fit onto a standard scale

Clearly there are different approaches to type systems. The reality is that as a web community we don’t all agree. However, like most design problems, it really starts by addressing the user’s needs.

The three archetypes of typography systems

Here are three general typography system archetypes. Most companies will utilize all three of these at some point but it’s important to recognize the underlying user needs being addressed by each orientation.

Marketing site

• Purpose: Built to tell a specific story and inspire visitors to spend their time and/or money on the site.
• Requirements: Each typeface will need its own set of styles and the variety of sizes will be based on art direction more than element fitting.
• Responsive use case: The system will need to flex through multiple sizes from mobile up to desktop.

Web experiences geared to pitch you something end up in this category. The ambitious ones break all the rules of typography to create compelling and captivating experiences.

While a lot of thought goes into these sites, the focus is on making a splash rather than an extensible system that can be built upon in the future. These sites generally have a short shelf life and are discarded entirely for a top-to-bottom redesign.

An advanced example of this is the interpolation function used by Leigh Taylor and Nick Jones on Invision’s landing page.

The <h1> has a font-size: calc(32px + ((24 * (100vw — 800px))/799));. The typography on the page is meticulously calculated to work at every screen size.

“Using math to do dynamic art direction” — Leigh Taylor

Blog/Info site

• Purpose: To convey a large amount of text-based information.
• Requirements: The main reading area may utilize a ratio based line-height system, just like this Medium article does.
• Responsive use case: Will likely be responsive but maintaining focus on readability.

This Medium article is an example of a web experience built for long-form reading.

The focus is not about interpreting little visualizations or filling out forms. The size ratios they’ve chosen are specifically built for readability constrained to get the desired line-length. I can comfortably read each line because the typography has been carefully crafted to fit my needs as a reader.

Product

• Purpose: Built to solve a user problem like filing taxes, managing a git repo, or visualizing performance metrics.
• Requirements: Text must fit nicely into the element hierarchy. Text is mostly utilized for labels, instructions, and displayed data.
• Responsive use case: Minimally responsive. Highly developed products will be utilizing adaptive design meaning different experiences for mobile and desktop. The focus is on the hierarchy of elements that support the user experience.

Google’s Material Design is a popular design language that is applicable to many product use cases.

Material’s spacing method is based on an 8pt component grid system and a 4pt baseline grid for typography. They try to scale line-heights with increments of 4. Scaling by increments of 8 with your baseline grid can be difficult because the available line-heights are too far apart for some text sizes.

Allowing some of the font-sizes to be accompanied with a more appropriate line-height is a great path forward. You can always bump the spacing above or below a given line by 4px to make it align with the greater atomic grid.

When applied, the baseline grid system has the ability to align the element spatial system (8pt grid) with the typography system to create a compelling vertical rhythm in the design.

Implementation of web typography — in reality

It is possible to have an opinionated and structured UI adhering to an 8pt grid that also has a long-form reading area.

Allow the fixed baseline grid system to handle the text inside of your structured components and use a modular scale to create an optimal reading experience for the blog or docs you’ve added onto your site.

Most digital product companies do this already between their marketing landing page, the digital product, and their documentation. Making the decision to structure these typographic realms separately can free you from an unsustainable complexity.

Mixing content types together

The pitfall — Ems, rems, and pixels oh my!

To express a clear and consistent system, typography measurements need to be easily interpreted by the product team building it.

Relative units like rems and ems are sometimes misunderstood and, in my experience, this leads to an unsustainable typography system. For example, the ratio between 14px font-size and a 20px line-height shouldn’t be captured in relative units because that ratio should change as the font-size increases.

Defining a line-height of 1.4285714286em is ridiculous, because most folks can’t do that kind of math in their head. If the font-size increases to 16px the browser will render a line-height of 22.857142px and that kind of pixel splitting is a headache waiting to happen. This creates confusion and is a misuse of relative units. See a complete list of absolute vs relative units here.

Why are so many design systems based on relative sizing today? The answer is “accessibility”.

However, browsers don’t scale the base font-size when you zoom in with command +. There are accessibility tools that will scale base font-sizes for users who need it. I recommend properly testing it to make sure it’s the experience you want users to have. Check-the-box accessibility can hurt more than it helps.

Utilizing rems and ems in your site/app is amazingly powerful. There are many very interesting use cases and they should be an important part of your toolkit.

My suggestion is to use them sparingly until you have a solid use for them. Baking them into the core of your typography system can open you up to confusion and unexpected user experiences.

8pt Grid Typography

The most powerful part of the 8pt grid concept is its ability to drive consistency throughout your designs. You will need to assess the needs of your users and the best way to scale your typography to meet those needs.

I highly encourage design and engineering to collaborate on finalizing these standards for a company/product.

Here are samples from a few familiar names: Google Material, Pivotal, Atlassian, Intuit.

Samples simplified to fit onto a standard scale

References and Related Reading

• Priyanka Godbole: A framework for creating a predictable & harmonious spacing system for faster design-dev handoff
• Richard Rutter: The Elements of Typographic Style Applied to the Web
• Ian Yates: How to Establish a Modular Typographic Scale
• Nathan Curtis: Space in Design Systems
• Vincent De Oliveira: Deep dive CSS: font metrics, line-height and vertical-align
• Kezz Bracey: Why You Should Be Using Rem-Based Layouts

Previous 8-Point Grid Articles:

1. Intro to The 8-Point Grid System
2. 8-Point Grid: Borders and Layouts
3. 8-Point Grid: Vertical Rhythm

Questions:

This is something I am still exploring. Do you have a good example to share? Do you have a different approach to an 8pt typography system?

If you’ve got thoughts, please leave a comment or reach out on Twitter.

Here’s everything you need to know about font superfamilies to make your next design project shine.

What is a font superfamily?

Are we talking about the Jacksons? The Kardashians? The Brady Bunch? Steve Martin’s fictional family in Cheaper by the Dozen? Or could we be talking about something more closely related to fonts?

Answer: WE TALKIN’ ‘BOUT FONTS, Y’ALL ⚡

A font superfamily is set of typefaces (example: merriweather and merriweather sans) that have been specifically designed to look good together. Like a musician who plays separate notes simultaneously to create one melodious chord, type designers create font families that stand out individually, but also gloriously combine to offer versatility in style and weight that makes the content on the page more visually appealing and easier to read.

Think of it this way: a superfamily has one mannequin (underlying skeleton form) that can be dressed in many different sets of clothing (serif, width, weight, size, italic). The result: pre-packaged, visually cohesive fonts that are begging to be used together for your next design project. In other words, superfamilies are big, juicy apples waiting to be picked.

Where did they come from?

The earliest evidence of superfamilies come from Roman documents all the way back in 79 AD. These Roman documents contained variations in the size of text to create a visual hierarchy. The Romans were making their title text bigger than their body text before it was cool.

_Photo by [Unsplash](https://unsplash.com/photos/kaEhf0eZme8?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener" target="_blank" title="">Nils on <a href="https://unsplash.com/search/photos/roman-document?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener" target="blank" title=")

Fast forward to the 1800’s, and there are typefaces being designed to be compatible across different written languages such as Latin, Greek, and Cyrillic. These were the some of the earliest prototypes of the superfamilies we know and love today.

By the 1900’s, there was an explosion of the variety of sans-serif typefaces, thus expanding the possibilities for variations across all superfamilies. During the years leading up to WWII (yes I just dropped a WWII reference in an article about typography ?), world-renowned Dutch type designer Jan van Krimpen designed the first comprehensive set of typefaces with inherent compatibility, a project called Romulus.

In his own words, he set out “to create a complete type family, consisting of, to begin with, roman, sloped roman, semi-bold and semi-bold condensed, at least four weights of sans serif, a script type and a set of Greek characters.”

This was the most ambitious type design project to date, and while he didn’t complete it following the war, it was the beginning of what is now commonplace in type design: the superfamily.

YAWN. Okay, let’s get to the good stuff.

Here are 10 Google Font superfamilies you should know about

We’ve discussed what they are, where they come from, and why you should use them. Now let’s see some real-life superfamilies in action. Here are some great pairs from Google Fonts superfamilies to use for your next design project!

1) Quattrocento and Quattrocento Sans

Designed by Impallari Type

2) Roboto Condensed and Roboto

Designed by Christian Robertson

3) Roboto Mono and Roboto

Designed by Christian Robertson

4) PT Sans and PT Serif

Designed by ParaType

5) Oxygen Mono and Oxygen

Designed by Vernon Adams

6) Source Sans Pro and Source Serif Pro

Designed by Paul D. Hunt (Sans) and Frank Grießhammer (Serif)

7) Josefin Slab and Josefin Sans

Designed by Santiago Orozco

8) Encode Sans Semi Condensed and Encode Sans

Designed by Impallari Type

9) Alegreya and Alegreya Sans

Designed by Huerta Tipográfica (Alegreya) & Juan Pablo del Peral (Aleygra Sans)

10) Montserrat and Montserrat Alternates

Designed by Julieta Ulanovsky

Parting Words

Finding a beautiful font pair for your next project doesn’t need to be stressful, painstaking, time-consuming, or difficult. Superfamilies are DESIGNED to look beautiful together and create visual harmony for your webpage. Learn to know and love them and you’ll be a great designer in no time!

Make sure you check out Font Pair where we help you pair Google Fonts together and have some awesome font superfamily suggestions for your next project!

Extra Reading

Here are some more resources about superfamilies if you’re interested:

• Adobe Typekit Blog — Type Study: Pairing typefaces
• FontLabVideos — Font Superfamilies Lecture with Sumner Stone
• Fonts.com — Super Families
• Google — Superfamilies
• Wikipedia — Font Superfamily
• Romulus Designs by Jan van Krimpen

Thanks to Hayden and Emma for all the help with this article.

Feel free to comment below or reach out to me on Twitter!

One Day Builds

I’m a huge fan of Adam Savage’s One Day Builds. At the beginning of the day he starts with a pile of materials, and ends up holding something that he once coveted (this one is my favourite).

So with this in mind (and a day off from work), I set myself a challenge…

Create an entirely new font, from scratch, and submit it to Google Fonts in under 24 hours.

I had a couple of letters already sketched out in an old notebook. I wanted to create a tall, sans-serif, display font that could be used in posters, or large scale artwork. In my early days at Men’s Health, I would have to use fonts like ‘Tungsten’ or ‘Heron’, which were terrible for chunks of body copy, but amazing when used in headlines, or for promotional material (which was my main job there). This was the style I set out to create.

(Very) rough sketches. Ugh.

1pm, Wednesday

I went straight to Adobe Illustrator with the two or three letter styles I had sketched out. I set up five grid lines on my artboard, one each for the descender line, baseline, x-height, cap height and ascender line. I then decided on a width for the capital letters, and from there, the thickness of the stem (e.g. the width of the letter I).

I did a lot of research on letter proportions and ratios, and actually measured some existing fonts, working out how the lowercase letters should relate to the caps. From here, I made some rules:

• X-height = 2 × height of ascender/descender.
• Stem width = 1/4 capital letter width
• Lowercase width = 3/4 capital letter width

The rules, illustrated.

From here I created the letters O and B first. I made a decision that any letters that would usually have curves, would have a rounded corner instead. Most letters would be a tall block shape, but with letters like O, B and D, the edges with curves would have rounded corners.

The outside corner would have a 12mm radius, and the inside had 6mm. With these rules agreed, plus a height for my crossbar (across the letter H) I started churning out my capital letters.

My font was very simple, but with one defining ‘flourish’, if you will. Any aperture, which is the opening in a letter, like the cut in the letter C, or the end of any arc, like the curved end of the letter J, would be cut at an angle. The hardest letters here were G and K.

With the CAPS completed, I moved on to the lowercase letters. This was undoubtedly harder, but with my rules agreed upon, it was just a case of churning through them. I used a lot more of my ‘flourishes’ here, especially at the end of the ascenders and descenders. The letters f, g, a and e were the trickiest, as they were completely new styles.

9pm, Wednesday

I was now moving on to some of the extra glyphs, like the question mark and exclamation mark. My pace picked up, and before bed I had managed to work up around 35 of them.

Thursday morning

In the morning, I completed the numbers 0 to 9 pretty quickly, and then began to actually create the font file.

This was completely new territory. Ian Barnard, a calligrapher pal on twitter (with my surname), recommended a program called Glyphs, which you can download for a free 30-day trial.

I downloaded Glyphs Mini and watched a couple of tutorial videos, then realised I’d set up my illustrator file completely wrong. So I had to paste each character in manually and scale it up to match the guides in the app.

10am, Thursday

With my characters in place, I went about spacing and kerning the letters. This part was incredibly time consuming. There are a series of keyboard shortcuts in this app which you absolutely must master before setting out on this. And before starting the kerning process, you have to get your letter spacing as close as possible to how you want the file to look.

Apparently as a rule of thumb, measure the width of the counter of the letter O (the hole in the middle) and divide that by three. That is the spacing distance you should start with on the left and right side of your letters.

11am Thursday

With the spacing set up (accounting for wider letters like M and W) I started kerning. This was a massively painstaking process. I visited this website, and pasted in their example kerning text.

Using the keyboard shortcuts (use this tutorial) I plodded through and adjusted kerning groups for every single distance that didn’t look right to me. The obvious ones are between V and A, but there are so many letter pairings within that example copy that I wouldn’t have thought of.

Once complete, I converted the kerning text to all caps and did the whole thing again, to pair the capital letters.

12:59pm Thursday

I exported my font and converted it to a .ttf file ready to submit to Google. With quite a few glyphs still missing (like square brackets and copyright symbols), I was certain that it wouldn’t be accepted. I also didn’t have time to include the multitudes of accents required for full language support.

It’s not the greatest of fonts, but it wasn’t bad for my very first go. And considering I had to teach myself how to use the Glyphs software from scratch, and it was completed in a single day, I was pretty proud!

The name?

Odibee Sans

…pronounced “oh-dee-bee”. My very own ‘One Day Build’ (ODB).

Afterword

I submitted Odibee Sans to the Google Fonts team back in May 2017, and as it stands the font is still in their pipeline to be added. The team quite rightly suggested that I should spend some additional time on the font to refine the design (although they admitted that this was against the spirit of the project).

With this in mind I spent an additional day on the font. I have since added all the extra glyphs (I think) required for extended latin support. I also made some major changes to around 30 of the glyphs, including new styles for the letters (caps) S, B, R, and lower case s, c, y, a, e, r, f, t, p, q and j, as well as a couple of number tweaks.

On top of this, there are now more than 1500 kerning pairs, which has made a massive improvement to the typeface.

And I made a website! odibeesans.com

The site was also made in a day using Adobe Muse. More on this here.

Thanks for reading! I’d love to read about any projects you may have tackled in one day. It’s quite an effective technique, if you can spare the time (God bless the freelance lifestyle)!

#

For digital design, it’s important to know and understand how to use and how to combine different fonts. There’s a font for every mood!

This post is going to give you a quick introduction to the biggest families in Typography: Serif and Sans Serif. And how, as a designer, you can choose the right fonts and combine them.

Let’s start!

Serif Type Family

Example of a Serif font.

The typeface Serif is differentiated from Sans Serif by the tiny little feet-like thingy called Serifs.

The areas in red are called the serif.

A lot of Serif typefaces that you’ll see will look a lot more traditional or conservative.

Origins: The reason they have these tiny feet is actually because of stone carving. Back in the days when people needed to carve out Latin letters in stone, the designer would usually paint the letters they wanted with a paintbrush. But the stonemasons would have to carve it out from that painting. And that stone carving created these serifs on the letters.

People tend to use Serif typefaces for something quite serious. This is because of their traditional and conservative look and feel.

Serif is further divided into four typeface families.

1. Old Style

This is the oldest Serif family. It includes fonts such as Adobe Jenson, Centaur, Goudy Old style, and many more. Their typeface is modeled on what text used to look like in the 1400s. Very old-looking.

_[Image credits](https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-the-basics-of-type.html" rel="noopener" target="blank" title=")

2. Transitional

This is a bit more modern-looking. This typeface family includes Times New Roman, Baskerville, Georgia, etc.

_[Image credits](https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-the-basics-of-type.html" rel="noopener" target="blank" title=")

3. Modern

Even more modern-looking and classy-looking. This includes Didot, which is the typeface used for the title of Vogue magazine.

_[Image credits](https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-the-basics-of-type.html" rel="noopener" target="blank" title=")

4. Slab-Serif

They’re a type family with thick serifs. Examples of slab-Serif typefaces include American Typewriter, Archer, etc.

_[Image credits](https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-the-basics-of-type.html" rel="noopener" target="blank" title=")

Now, how do you differentiate between these four major classes in the Serif Family?

It’s actually quite easy. Look at the first three families: Old style, Transitional, and Modern. Put them side-by-side. If you have a look at the thinnest versus the thickest part of the letters, you’ll see that as you progress from the older to the more modern types. You’ll see an increased difference in what we call the modulation of the typefaces. Concentrate on the O’s for example. Comparing the Old Style to the modern types, the thickness and thinness difference will be lesser compared to Modern.

And a lot of this modulation comes from when people used to write with flat-nibbed pens.

What about Slab-Serif?

If you have a look at a Slab-Serif font, you’ll see there’s pretty much zero difference between the thickest and the thinnest parts of the font.

And it was designed intentionally like this. It’s one of the modern members of the Serif family. Yet, it doesn’t follow the rule of “more into the future you go, the greater the difference between the thickest and thinnest part of the font.” Slab-Serif was created for newspaper printing for clearer reading when the quality of the paper used to be poor.

Sans-Serif Type Family

Example of a Sans-Serif font

Sans-Serif differs from the Serif. It does not have serifs (the tiny little feet) or any decorative elements along the central beams and the top bars. Sans-Serif is slightly more modern than the serifs.

They’re also subdivided into four families.

1. Grotesque

The oldest one. This includes News Gothic, Franklin Gothic, and more.

_[Image credits](https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-the-basics-of-type.html" rel="noopener" target="blank" title=")

2. Neo-Grotesque:

Slightly more modern. Helvetica and Ariel are examples.

_[Image credits](https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-the-basics-of-type.html" rel="noopener" target="blank" title=")

3. Humanist:

Even more in the future. Gill Sans is an example.

_[Image credits](https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-the-basics-of-type.html" rel="noopener" target="blank" title=")

4. Geometric:

They’re based on geometric shapes. Futura is an example.

_[Image credits](https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-the-basics-of-type.html" rel="noopener" target="blank" title=")

How do you differentiate between the four?

Now, similar to the serifs, you can move from the older Grotesque family to the Neo-Grotesque to the Humanist. You can see the difference in the thickest and the thinnest parts of the font get more and more exaggerated. When you look at the Grotesque, it’s almost equidistant at all points. And when you look at the Humanist typefaces, you start to see the variation of the modulation.

In a Geometric typeface, the O’s are always perfectly round. The O’s look exactly like as if you draw with a protractor. And this typeface is a bit like Slab-Serif type. Even though it’s one of the modern typefaces in the family, it bucks the trend and pretty much has no modulation and is equidistant at all points.

How Typography Determines Readability

Having a knowledge of the font families and their subfamilies helps with styling. But more importantly, it’s about readability. Design is both about function and form. What makes a typeface more readable?

Humanist Sans-Serif is considered to be more readable than Grotesque. And the reasons are:

• Humanist typeface has more open shapes.
• The inter-character spacing in the Humanist typeface is more than in Grotesque, making it slightly easier to read.
• In the Grotesque typeface, the characters are ambiguous from each other. A lowercase ‘g’ and 9 in Grotesque look pretty similar, they’re all very square, adding more confusion and making it less readable. Whereas in the Humanist typeface, you can clearly differentiate between the characters.

These are some factors that make fonts more readable. Now you can choose the typeface depending on the purpose.

How to combine fonts

When you’re combining different typefaces, usually you’ll have a different typeface for the heading and a different one for the body. And this is to create a slight contrast and interest in your designs.

Some of the common rules that designers use when they combine different fonts :

1. The Serifs and Sans-Serif work really well together. It tends to create a good design. Sans-Serif have slightly increased readability compared to Serifs. Which is why Sans-Serif is a great typeface for the body of text.
   Don’t combine a Serif with a Serif and a Sans-Serif with a Sans-Serif because it can look a little bland and undifferentiated.
2. Too many fonts in one design is not a good thing. It ends up looking too strange. Stick to 2 fonts (one from Serif family and the other from Sans-Serif).
3. Appreciate the mood of the typeface just like colors. And don’t combine different moods together. Try to combine more modern fonts with modern fonts and older fonts with more traditional ones.
   If you get the mood of your typefaces, you start to create some incredibly beautiful designs.
   Things that you should keep similar: Mood and Time era of the font
   Things that you should contrast: Serif-ness (for instance, one font should be Serif and the other Sans-Serif) and Weights.
   Weight means how heavy or bold your text is. Most design software have a whole range of weights. For example, light, medium, bold, extra bold, and so on. Play around with different weights contrasting them to create interesting designs.

NEVER EVER use — Comic Sans, Papyrus, Viner, Kristen, Curlz. No matter what you’re designing, they’ll make your designs look terrible.

Tools for Typography

1. WhatFont
   A chrome extension that tells you the name of a font on any website.
2. Font Squirrel
   I usually download fonts from here. They’re free for commercial use.

That was a brief overview of the vast field of typography. Hope you learned interesting things that you can use in your designs! :)

Recently, I discovered a simple method to pair typefaces effectively and I’d love to share them with you. (Hint: it’s a 3×3 grid).

There’s one prerequisite to use this 3×3 grid (which I will reveal shortly) — knowing how to categorize typefaces. So, let’s start there.

Categorizing typefaces

On a broad level, typefaces can be broken down into the six categories. They are:

1. Sans-serif
2. Serif
3. Slab-serifs (or Egyptians)
4. Monospace
5. Script (or Cursive)
6. Display (or Decorative)

You can split typefaces into the first three categories by looking at the style of the serif.

If the typeface contains no serifs, they fall into the sans-serif category. (sans means without). Examples of sans-serif typefaces include Helvetica and Gill sans.

If the typeface contains serifs that look blocky, they fall under the slab-serif category. (slab means a large thick block). Slab-serifs are also called Egyptians even though there’s no relationship between the serifs and Egyptian writing. Examples of slab-serifs include Archer and Museo Slab.

Any other typeface that contains serifs fall under the serifs category. Examples include Garamond and Georgia.

Monospace typefaces are no strangers to us developers. They’re typefaces whose characters occupy the same amount of horizontal space. They’re often used in tabular data and code. Examples include Menlo and Monaco.

Script (or cursive) typefaces are often calligraphic in nature. They’re often used for short headlines, invitations and expressive text. Examples include Dancing Script and Lobster.

Finally, display typefaces are typefaces that are only used for large headlines. Many display typefaces are serif and sans-serif versions that are specially tweaked to look good at large sizes. Display typefaces also include ornamentals and decoratives, which can come in all sorts of form and styles. Examples include Freight Display and Abril Fatface.

Now you know how to classify typefaces into six major categories, which is great! Unfortunately, these major categories are too broad.

To pair typefaces effectively, we often have to drill in deeper into the subcategories. We’re only going to look at sans-serifs, serifs and slab-serifs as we drill deeper since most typeface choices are made there.

Things begin to get confusing when you begin to subcategorize. There’s a lot of subcategories, including but not limited to humanist, neo-humanist, old style, grotesque, neo-grotesque, transitional, geometric and modern.

Remembering the names of these subcategories, differentiating between them and correctly placing typefaces in them are three major challenges people face, myself included. After much research, I noticed you can group these subcategories into a simple 3×3 grid.

To fill up the 3×3; grid, we can look at three properties of the typeface. They are:

1. The letterforms
2. The stroke
3. The tilt

For the first two properties, it’s often enough to look at letters e and o. The third one is a layman term I came up with ?.

Let’s look at each of them.

The letterforms

Pay careful attention to the shape of the letters, especially of the letters e and o. Do they look like circles or squares? If they do, we can immediately classify the typeface as a geometric typeface.

Geometric typefaces contain letterforms that are based off shapes. They look constructed as opposed to handwritten. Because of they seem constructed, they also give off a modern, cool and impersonal vibe.

The geometric subcategory is only applicable to sans-serif and slab-serif typefaces. So, we can fill up the 3×3 grid as follows:

Next, we look at the stroke.

The contrast in strokes

The stroke of a typeface is lines that make it up. Pay attention to these lines. Do they vary in size between different parts of the letters?

When we look at the stroke of a typeface, we’re only interested in using it to categorize serifs. This is because it’s rare for sans-serif and slab-serifs to exhibit any difference in the stroke.

If there’s little stroke contrast (little difference between thinnest and thickest part), we can categorize the typeface as an old-style serif.

Old-style serifs are serifs that the oldest readable typefaces (according to our current standards. Blackletter comes before it, which is hardly readable now). They mimic handwriting and are thus calligraphic in nature, which causes their letters to tilt more (more on tilt later). Since they mimic handwriting, they’re often seen as real, empathetic and traditional. They are also known as humanist serifs.

On the other hand, if there’s huge stroke contrast, we can categorize the typeface as a Modern serif.

Modern serifs are deliberately constructed to stand out. Their letterforms often stand upright with zero tilt, which makes them cool and impersonal, like Geometric typefaces. They are also known as rational serifs and didones.

Finally, what lies between modern serifs and old-style serifs are transitional serifs. Their stroke contrast is distinguishably larger than old-style serifs, but not as much as modern ones.

After going through the stroke, our 3×3 grid becomes:

Lets move on to the tilt.

The tilt

If you draw a line through the thinnest points of the stroke, you’ll see the stress of the letters.

If you paid attention so far, you’ll notice that stress can only be used to distinguish serif subcategories because you need to draw a line through the thinnest parts of the letterforms.

Although it may seem pointless to look at stress since we already have sorted serifs into their respective categories, I found it helpful to distinguish between sans-serif humanist and grotesque typefaces.

Let me explain.

Letterforms with a diagonal stress (like old-style serifs) look like they’re tilted at an angle. Since they’re tilted, they mimic letters that are created by hand. (We don’t hold the pen perfectly upright, do we?).

Although the letters o and e can’t tell us if there’s any stress, we can look at other letters, especially those with shoulders, like h, m and n. If any of these shoulders looks as if they’re tilted (or if there’s any stress), we can categorize the typeface as a humanist typeface.

An example of a humanist sans-serif typeface that exhibits this behavior is Lucida Sans.

On the other hand, if the letters look like they’re upright, we can categorize them as grotesque typefaces. As you may imagine, grotesque typefaces fall between humanist and geometric typefaces.

Just to add to your typography vocabulary, grotesque typefaces are also called grotesk or gothic, depending on the language. So, if you see these names on a typeface, you’ll know immediately which category these fall under.

Want an example? How about Aktiv Grotesk? :)

After looking at the tilt, we can finally complete the 3×3 grid:

And with that, we’re done with categorizing typefaces into their respective categories and subcategories.

Before we move onto the next section, I want to highlight that typeface classification is highly subjective. Everyone classifies typefaces differently, so you just have to decide for yourself. Some typefaces can fall into multiple subcategories too. One example is Proxima Nova, which can fall into all three sans-serif subcategories at the same time.

Using the 3×3 grid

If you search around for typeface pairing rules, you’ll often come across the following two rules, among others:

1. Pair sans-serif typefaces with serif (or slab-serif) typefaces
2. Pair typefaces from the same era

If you follow the first rule, you automatically create contrast with your two typefaces, which is a good thing. I explain why contrast is so important in my typography course, Mastering Responsive Typography.

The reason why experts recommend you to pair typefaces from the same era (or even from the same designer) is because these typefaces contain similar letterforms. Similar letterforms create a sense of familiarity through repetition, which is why different typefaces can blend well with each other. (Read this article an explanation of why repetition creates familiarity.)

Coincidentally (maybe not!), our 3×3 grid helps you identify typefaces created in the same era without remembering the subcategories. It’s used this way:

(This is mind blowing, isn’t it? ?)

Wrapping up

Today, you learned how to categorize typefaces into six major subcategories, and their respective subcategories. You also learned a technique to pair them (using the 3×3 grid).

Now go play around with the technique and let me know your thoughts in the comments!

This article as a sample of my responsive typography course, Mastering Responsive Typography. You can check it out, and also learn more about typography on my blog.

There was a major twist ending and a major snafu at the very end of the 2017 Academy Awards for the category of Best Picture. The wrong winner was declared. If you look back on the footage and analyze it, you could read on Warren Beatty’s face that something was not right just before the Best Picture winner was announced.

Let’s quickly review the second-by-second timeline of what happened:

1. Warren Beatty and Faye Dunaway come out to present Best Picture, but were wrongly given the envelope for Best Actress, instead.
2. Warren reads the card, then stops for a moment to read it again to be sure (which the audience thinks is supposed to be comical). He even checks to see if there’s anything else in the envelope.
3. He then proceeded to show Faye Dunaway the card with a facial expression that likely reads, “is this right?”
4. Before he could say anything to her, Faye automatically reads the card (which looks like she didn’t fully read it), and announced the wrong winner.
5. The biggest flub in Oscars’ 88-year run is now recorded history.

I would imagine there are multiple redundancies so that something like this does not happen — especially at the Oscars! But there’s one thing the Academy possibly didn’t consider, or forgot, for this year’s winner cards: typography.

“Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed” — Wikipedia

Here’s the original screenshot of the Best Picture winner’s card, which breaks a lot of the rules I just quoted:

Original televised screenshot. Image: ABC

First, it’s legible, you can tell all the letters apart. Second, it’s somewhat readable, but the visual weight of “Moonlight” and the producers are equal and blend together. Lastly, even though it is just a winner’s card, it’s not visually appealing. I think it’s fair to say it’s objectively bland.

Based on that card design, I’ve reconstructed the card Warren and Faye would’ve seen, the one they received:

That’s horrible typography. I will emphasize horrible again. Horrible. Or to be nicer — not good. Look at it again. Of course, anyone could’ve made the same honest error!

The words “Best Actress” is on there — at the very bottom — in small print!

You are on television with millions of people around the world watching. You are a little nervous, and you have to read a card. You will most likely read it from top to bottom (visual hierarchy) without questioning whether the card is right. That look on Warren’s face was, “This says ‘Emma Stone’ on it.” Faye must’ve skipped that part and was caught up in the excitement and just blurted out, “La La Land.”

I don’t blame Faye or Warren for this. This was the fault of two entities: whoever was in charge of the design of the winning card (Was it really a design? C’mon), and the unfortunate person who handed them the wrong envelope.

A clearly designed card and envelope (don’t even get me started on that gold on red envelope) would've prevented this.

Here are the main three things wrong with the winner cards in general:

1. We all know this is the Oscars, but the logo doesn’t need to be at the top of the card.
2. The category, “Actress,” is on the bottom, in small print.
3. The winner’s name, the main thing that should be read, is the same size as the second line and given equal weight.

Now, let’s imagine an alternate timeline where the presenters were given this modified version of the wrong card, using the same elements of the original card:

_Modified version of the wrong card. Image: [benjamin bannister](http://www.benjaminbannister.com/" rel="noopener" target="blank" title=")

It may not seem like much to a regular person, but changing the sizing, positioning, and weight of the text makes a big difference. A big enough difference that this embarrassing mistake could’ve been prevented.

Let’s analyze the differences between the original card and my modified card with a side-by-side comparison of subtle, yet important changes.

_Same text, same elements, but different styling. Image: [benjamin bannister](http://www.benjaminbannister.com/" rel="noopener" target="blank" title=")

Here’s what should’ve been changed based on the three critiques I just made:

1. The logo doesn’t need to be at the top. Everyone knows it’s the Oscars. We move the Oscar logo to the bottom where it’s least important in this context.
2. The award category, “Best Actress,” is moved to the top so that it’s the first thing anyone sees and reads. There is no confusion what the category is because it’s clearly stated first.
3. Emma Stone’s name is bigger than the title, “La La Land,” because she is the winner of this category. The winner should be the most emphasized thing on the card with all other information, like the film’s title, in a smaller or a less thick font (I understand that the text can only be so big so as to have a consistent look for all the cards, while accommodating longer names).

That’s it. That’s all the designer needed to do. Those three things. I guess hiring a card designer wasn’t in the budget this year.

With a modified card, even if the presenters had gotten the wrong one, none of this would’ve happened because the presenters would’ve looked at it and one of two things would’ve happened: their eyes would’ve read “Best Actress,” or, “Emma Stone.” Reading either of those would indicate that this wasn’t the card for Best Picture, and they would’ve asked Jimmy Kimmel or a producer to the stage to get it corrected.

The card needed to be written and designed in a way that makes it clear to the reader only the essential information.

As a creator, the importance of typography is an absolute skill to know, and people — not just designers, should consider learning it. Typography can be immensely helpful when writing a resume that’s well-structured, creating a report that looks exciting, designing a website with an intuitive hierarchy — and definitely for designing award show winner cards.

And lastly, to the Academy of Motion Picture Arts and Sciences, I would like to submit my design template for the 90th Academy Awards winner’s card (my commission fee is more than reasonable, and this is only one of many ideas). The card is clean and easy to read for any presenter, with only relevant information. Even the words, “The Oscars,” don’t need to be on there (fewer words to read). The statue graphic works fine.

And a big congratulations to Moonlight for winning Best Picture!

_Oscar Winner Card, front mockup. Image: [benjamin bannister](http://www.benjaminbannister.com/" rel="noopener" target="blank" title=")

_Oscar Winner Card, back mockup. Image: [benjamin bannister](http://www.benjaminbannister.com/" rel="noopener" target="blank" title=")

Show your support by clapping this article, tweeting it, sharing it, and follow me to discover new things.

_[benjaminbannister.com](http://www.benjaminbannister.com/" rel="noopener" target="blank" title=")

Also by benjamin bannister:

• The Future of the iPhone X: From the Realistic to the Absurd
• What Would An Apple MacPad Pro Look Like?
• How I Learned to Cook. In One Month.

p {
  font-size: 16px;
}

@media (min-width: 800px) {
  p {
    font-size: 18px;
  }
}

/* Repeat for h1 - h6 and other type groups */

I’ve learned a lot more about typography since then and picked up best practices like using relative units, vertical rhythms and meaningful typography scales.

These new practices were wonderful. They made my websites look more pleasing to the eye. Implementing them, however, was a horrible experience.

I had to write complex code and I found myself struggling to create responsive websites under tremendous time pressure.

Now, after months of hacking, I’ve finally created a solution that I’m happy to share with you. It’s called Typi.

Typi is great because it allows me to use the practices I’ve learned, and at the same time solves most of the problems I’ve encountered in 3 simple steps. Let me explain these three steps by walking you through the practices I use when working with responsive typography.

Practice 1: Increase font-size and line-height of your body copy as screen sizes increase.

Reading on the mobile vs the desktop are two completely different experiences. You undoubtedly hold your device closer to you when you read on the mobile since the screen is smaller.

Your desktop screen will be further away from you compared to the mobile. Hence, the same font-size on the desktop looks slightly smaller due to the further distance.

To increase readability and compensate for the loss in size due to distance, we increase the font size.

I first got to know of this practice through the responsive typography basics post on ia.net. I highly suggest checking the post out if you’re unfamiliar with what I’m talking about.

An implementation of this practice in Sass can be this:

html {
  font-size: 16px;

  @media (min-width: 800px) {
    font-size: 18px;
  }

  @media (min-width: 1200px) {
    font-size: 20px;
  }
}

Note: as we increase font sizes, we might also need to increase the line height to allow more breathing room between lines of text. With Sass, this can look like:

html {
  font-size: 16px;
  line-height: 1.3;

  @media (min-width: 800px) {
    font-size: 18px;
  }

  @media (min-width: 1200px) {
    font-size: 20px;
    line-height: 1.4;
  }
}

Practice 2: Use a modular scale for your typography

It’s difficult to pick the font-size of your typographic elements (

to

), especially if you’re trying to pull them out of thin air. A modular scale, also called typography scale, is a tool you can use to help you pick good typography sizes that flow well with the rest of your page.

It is a sequence of numbers related to each other through a ratio (a number). It can be created by multiplying (or dividing) the font-size of your body copy with the ratio. The resultant number is then multiplied (or divided) again with the ratio.

An implementation of modular scale at work with the above scale can be this:

html { font-size: 16px }
h1 { font-size: 50px }
h2 { font-size: 37px }
h3 { font-size: 28px }
// ...

Of course, it’s not going to be so simple. If you remember the first practice we discussed earlier in this article, you’ll notice that the body font-size should change as your screen width changes.

This becomes a problem when you have to change the typography sizes of all your elements at every breakpoint to ensure the scale stays consistent.

html {
  font-size: 16px;
  line-height: 1.3;
  @media (min-width: 800px) {
    font-size: 18px;
  }

  @media (min-width: 1200px) {
    font-size: 20px;
    line-height: 1.4;
  }
}

h1 {
  font-size: 50px;
  @media (min-width: 800px) {
    font-size: 56px;
  }
  @media (min-width: 1200px) {
    font-size: 63px;
  }
}

h2 {
  font-size: 37px;
  @media (min-width: 800px) {
    font-size: 42px;
  }
  @media (min-width: 1200px) {
    font-size: 47px;
  }
}

h2 {
  font-size: 28px;
  @media (min-width: 800px) {
    font-size: 32px;
  }
  @media (min-width: 1200px) {
    font-size: 35px;
  }
}
// ...

Ugh.

The solution? Check out the next practice.

Note: If you need help with choosing your starting font-size and ratio for your modular scale, I suggest reading this article on meaningful typography by Tim Brown.

Practice 3: Use relative typography units

Relative units in CSS are percentages (%), viewport units (vh, vw, vmin, vmax) , the em unit (em) and the rem unit (rem). The ones commonly used to size typography are em and rem.

You can use both em and rem in the same manner to solve the problem we encountered in practice 2. To convert pixels into em, we take the target font-size and divide it against the base-font size.

Here’s how it would look:

html {
  font-size: 16px;
  @media (min-width: 800px) {
    font-size: 18px;
  }
  @media (min-width: 1200px) {
    font-size: 20px;
  }
}

h1 { font-size: 3.125em; } // 50 ÷ 16 = 3.125
h2 { font-size: 2.3125em;} // 37 ÷ 16 = 2.3125
h3 { font-size: 1.75em; } // 28 ÷ 16 = 1.75
// ...

// Note: These are approximate values.
// The actual values derived from modularscale.com are 3.129em, 2.3353em and 1.769em respectively.

Much better now!

There are a few more problems. Notice how

becomes approximately 63px as the screen width increases to 1200px.

63px is pretty large. Reading the

text starts to get uncomfortable already. A better decision might be to tone it down to 47px instead (size of

).

When this happens, you might want to decrease the size of the

element since it’s a good practice to emphasize the

element. Sometimes, you might also need to change the line-height as well.

The code then becomes…

html {
  font-size: 16px;
  @media (min-width: 800px) {
    font-size: 18px;
  }
  @media (min-width: 1200px) {
    font-size: 20px;
  }
}

h1 {
  font-size: 3.129em;
  line-height: 1.2;
  @media (min-width: 1200px) {
    font-size: 2.3353em;   
    line-height: 1.3;
  }
}

h2 {
  font-size: 2.3353em;
  @media (min-width: 1200px) {
    font-size: 1.769em;   
  }
}

h3 {
  font-size: 1.769em;
  @media (min-width: 1200px) {
    font-size: 1.33em;
  }
}

// ...

Ugh. Back to square one :(

This is where Typi comes in. Let’s take a break from the practices and see how Typi can help you.

Using Typi

Typi is a Sass library that allows you to set the font-size and line-height properties of all your typographic elements in separate Sass maps. These maps can then be used to output the code we see in the above situation. Here’s how it works.

First, you need to setup a $typi map. It looks like this:

$typi: (
  null: 16px,
  small: 18px,
  large: 20px
);

null, small and large are breakpoints.

Typi automatically looks for a $breakpoints map to create your media queries (which means it can integrate perfectly with mappy-breakpoints, a library I created to help with media queries).

$breakpoints: (
  small: 800px,
  large: 1200px
);

Once the $typi map is set up, we call the typi-base() mixin within the html selector.

html {
  @include typi-base();
}

This typi-base() mixin creates the same styles we wrote for the tag in Practice 2. The only difference is that the font-sizes are stated in percentages.

html {
  font-size: 100%; /* This means 16px */
}

@media all and (min-width: 800px) {
  html {
    font-size: 112.5%; /* This means 18px */
  }
}

@media all and (min-width: 1200px) {
  html {
    font-size: 125%; /* This means 20px */
  }
}

We also mentioned that there might be a need to change line-height values as the font-size changes. You can change line-height values easily in Typi by providing a second line-height value to each breakpoint that requires it:

$typi: (
  null: (16px, 1.3), // Sets line-height to 1.3
  small: 18px,
  large: (20px, 1.4) // Sets line-height to 1.4
);

The resultant CSS from our updated $typi map is:

html {
  font-size: 100%; /* This means 16px */
  line-height: 1.3;
}

@media all and (min-width: 800px) {
  html {
    font-size: 112.5%; /* This means 18px */
  }
}

@media all and (min-width: 1200px) {
  html {
    font-size: 125%; /* This means 20px */
    line-height: 1.4;
  }
}

After creating the $typi map, we can create other font-maps using the same format. Here’s an example:

$h1-map: (
  null: (3.129em, 1.2),
  large: (2.3353em, 1.3)
  );

$h2-map: (
  null: 2.3353em,
  large: 1.769em
  );

$h3-map: (
  null: 1.769em,
  large: 1.333em
  );
// ...

Then, we call each of these font-maps using the typi mixin:

h1 { @include typi($h1-map) }
h2 { @include typi($h2-map) }
h3 { @include typi($h3-map) }
// ...

The resultant CSS would be:

h1 {
  font-size: 3.129em;
  line-height: 1.2;
}

@media (min-width: 1200px) {
  h1 {
    font-size: 2.3353em;
    line-height: 1.3;
  }
}

h2 {
  font-size: 2.3353em;
}

@media (min-width: 1200px) {
  h2 {
    font-size: 1.769em;
  }
}

h3 {
  font-size: 1.769em;
}

@media (min-width: 1200px) {
  h3 {
    font-size: 1.333em;
  }
}

Pretty neat huh? You’ll have to download Typi to play with it. (It’s not available on Sassmeister or Codepen yet)

PROTIP: You can use the modular scale Sass mixin if you don’t want to write exact em values (like 1.769em) across different font maps.

To do so, you have to download the library and import it into your Sass file. Then, change the font maps such that it uses the ms() function.

$h1-map: (
  null: (ms(4) 1.2),
  large: (ms(3), 1.3)
  );

$h2-map: (
  null: ms(3),
  large: ms(2)
  );

$h3-map: (
  null: ms(2),
  large: ms(1)
  );
// ...

So, in a nutshell, Typi makes responsive typography easier by helping you write font-size and line-height properties at different breakpoints`.

Now that I’m done introducing you to Typi, let’s move on and talk about the final two practices (and some problems that I have yet to find a solution for).

Practice 4: Apply vertical rhythms

Vertical Rhythms is a concept from print design, where we keep vertical spaces between elements on a page consistent (and relative) to each other. The idea is similar to using a typography scale — to allow elements on your page to flow well.

In practice, we often use the line-height property of the body copy as the base for a consistent vertical rhythm. Let’s say the body copy of your website has line-height of 25px. You’ll do two things:

1. Set the vertical white space between elements to a multiple of 25px
2. Set the line-height of all text elements to a multiple of 25px

This is how it might look like in CSS (Note: This hasn’t taken the three practices I mentioned above into account yet)

html {
  font-size: 18px;
  line-height: 25px;
}

// Resets margins
body, h1, p {
  margin: 0;
}

h1 {
  font-size: 63px;
  line-height: 75px;
  margin: 25px 0;
}

p + p {
  margin-top: 25px;
}

Looks pretty good! Let’s take it a step further by changing the code above into relative units. While doing so, you’ll encounter the great em vs rem debate.

Em vs Rem

Let’s try converting the code first into ems, then rems. By the way, the best practices states that line-height values should be unitless.

html {
  font-size: 1.125em;
  line-height: 1.4; // This is 25.2px to be accurate
}

// Resets margins
body, h1, p {
  margin: 0;
}

h1 {
  // font size is 63.147px to be more precise
  font-size: 3.5082em; // 63.147 ÷ 18 = 3.5082em
  line-height: 1.1972; // 75.6 ÷ 63.147 =  1.1972
  margin: 0.3991em 0; // 25.2 ÷ 63.147 = 0.3991
}

p + p {
  margin-top: 1.4em;
}

Pay special attention to how we converted the margin property on the

element into ems.

Notice how we used 63.147px as the base for the division? This must be done because sizes calculated with ems are relative to it’s current font-size. It often causes confusion and involves a lot of complex math.

Now, here’s the kicker. Even though we tried to be as accurate as we can be, browsers don’t seem to cooperate with us. You’ll notice that our vertical rhythms start getting screwy.

Two problems contributed to this screwy behavior.

First, we’re not 100% precise and accurate with our math. We could get more precise (like 10 decimal places), but that would make our code ugly as hell.

Second, different browsers handle subpixel rounding issues differently. This means we’ll never be able to get pixel-perfect rhythms no matter how hard we try.

Well, I don’t want to harp on subpixel rounding because there’s nothing much we can do. Let’s take a look at how the rem unit handles this complex math instead, shall we?

html {
  font-size: 1.125rem;
  line-height: 1.4; // This is 25.2px to be accurate
}

// Resets margins
body, h1, p {
  margin: 0;
}

h1 {
  font-size: 3.5082rem; // 63.147 ÷ 18 = 3.5082
  line-height: 1.1972; // 75.6 ÷ 63.147 = 1.1972
  margin: 1.4rem 0; // 25.2 ÷ 18 = 1.4
}

p + p {
  margin-top: 1.4rem;
}

Notice how we used 1.4rem on the margin property instead of 0.3991em? The rem unit makes calculations with vertical rhythms much simpler.

This doesn’t mean you should switch blindly to the rem unit though. Rems and em units are both useful, and they should be used for different purposes. I’ll write about this topic another day. For now, let’s come back to vertical rhythms.

Now that we’ve converted our vertical rhythms into relative units, let’s take a look at how it fares when we combine it with practice one (font-sizes and line-heights should change when screen sizes change).

We’re going to keep this example as simple as possible by using only one media-query. We’re also going to use the rem unit.

html {
  font-size: 1.125em;
  line-height: 1.4;

  @media (min-width: 1200px) {
    font-size: 1.25em; // this is 20px
    // Slight change in line heights at 1200px
    line-height: 1.45 // this is 29px
  }
}

// Resets margins
body, h1, p {
  margin: 0;
}

h1 {
  font-size: 3.5082em;
  line-height: 1.1972;
  margin: 1.45rem 0;

  @media (min-width: 1200px) {
    // font-size is now 70.164px
    line-height: 1.24; // 29px * 3 ÷ 70.164 = 1.24
    margin: 1.45rem 0;
  }
}

p + p {
  margin-top: 1.4em;
  @media (min-width: 1200px) {
    margin-top: 1.45em
  }
}

Ugh. We might have to add 20,000 media queries to change margin and line-height of all our elements with just this one change in the line-height property on . We haven’t even talked about padding or border properties yet!

(╯°□°）╯︵ ┻━┻

So, here’s what I realized. It’s impossible to apply perfect responsive vertical rhythms across different browsers. At least not with the current technology.

What we can do instead is:

1. We can make do with line-height properties of major typographic elements by eyeballing and using Typi.
2. Try not to change the line-height property of your body copy if you can. Things will become easier when CSS variables are finally supported in all major browsers.

Practice 5: Keep text measures between 45–75 characters

Oh, this one is easy. Just remember this: one character is approximately 0.5em. A text measure between 45–75 characters means the width of your text element must be between 22.5em and 37.5em.

From experience, I’m mostly concerned about text overflowing 75 characters. If your text goes below 45 characters, maybe it’s time to have a change of font sizes.

article {
  max-width: 30em;
  /* Anywhere between 22.5em to 37.5em. Use your discretion */
}

Wrapping Up

Responsive typography is hard. There are still no perfect answers we can rely on, but let’s try to make do for now.

By the way, here’s the link to Typi again if you want to play with it.

This article first appeared on my blog at www.zell-weekeat.com. Check it out if you want more articles like this