Web typography is at once simple and complex. At its core, it’s about how you arrange text so they’re pleasing and easy to read—yet there’s an endless number of ways to achieve an optimal reading experience.

This is a practical guide to navigating the rabbit hole of web typography so that you can create optimal textual experiences on the web. It’s the kind of guide I wish I had when I started.

This is a long one. But this is the only article you need to get started—although you’re welcome to do a further reading because typography is just amazing.

The Holy Trinity of Web Typography

Let’s start with the basics. Web typography is made up of these three things:

1. Font size: what sizes will you use?
2. Line height: how much space between lines of text?
3. Line length: how wide will your blocks of text be?

Your end goal is a good reading experience, and the holy trinity of web typography directly determines how pleasing your texts will be. Let me explain.

Font Size

You want the text to be large enough for their level of importance. This means body text should be large enough to be readable but not too large that they take up too much space. Headings should be larger, but not too large that they appear comical. Captions and smaller text can be smaller but should remain readable.

When you design for the web, you’re designing for multiple device sizes. This complicates your choice of font sizes because what looks good on a laptop might be too large for a smartphone. We’ll address that later.

Line Height

You want lines of text to be spaced apart just nice. Line height refers to the spacing between lines of text. When you read, your eyes move left to right (in most languages), and then dart back leftwards and downwards to the next line of text.

Design your text to help this eye movement. If the spacing between lines of text is too large, your eyes need to make a large leap to the next line. This is tiring and increases the odds of you jumping to the wrong line. Conversely, if the spacing between lines is too small, the text would mush together and your eyes might jump back to the same line of text.

Line Length

You want the text to be wide enough but not too wide. Line length is a measure of how wide a block of text is. If your line length is too wide, your eyes need to travel a long distance to read each line; if it’s too narrow, your eyes need to make frequent hops to the next line. In both cases, reading becomes tiring.

Let’s go through how you can create your own holy trinity of web typography with optimal font sizes, line heights, and line lengths for your web design project.

Use a Type Scale to Define a Set of Font Sizes

What’s a Type Scale?

A type scale is a way to mathematically set the font sizes in your design, from body text up to heading 1 and down to captions. It’s the best way to choose a set of font sizes for your design.

As its name suggests, a type scale works based on a scale factor (say, 1.25). The idea is that you start with a base font size and multiply it with the scale factor to get the font sizes of texts of higher hierarchy. Similarly, you divide the base font size with the scale factor to get texts of lower hierarchy.

Why Should You Use a Type Scale?

The practical reason: it takes arbitrariness out of your design. You don’t have to guess whether your caption text should really be 12px or 13px—you let mathematics take you there instead.

Beyond practicality, a type scale will produce texts that look harmonious because their sizes increase and decrease along a fixed scale. You’ll also avoid clashes between headings, where their sizes are too similar to tell them apart.

And finally, we designers are romantic creatures. The type scale is a concept rooted in geometry, history, and nature. Scales exist in almost all cultures—in architecture, music, and art—and the type scale is a continuation of humankind’s fascination with pattern and beauty. So for the love of culture, use a type scale.

How Does a Type Scale Work?

Essentially, you need to define two values:

1. A base font size.
2. A scale factor. You’ll multiply and divide your base font size with this scale factor to produce a range of font sizes.

How to Choose a Base Font Size

You’ll need to choose a base font size for the most important text in your design. In most cases, that’s the body text, since you’ll use it most frequently.

Choose a font size appropriate for your project. This is up to your judgment (as well as your client’s or product owner’s), but here are some factors to consider:

• Think about the type of content your designs contain. Is it text-heavy? Media-heavy?
• If your project is content-heavy (think Medium and Smashing Magazine), make sure your body text is large enough for comfortable reading.
• If your project is dashboard-oriented, or you need to display information densely, consider using a smaller body font size (that is still readable).
• The average body text has increased over the years. 16px is no longer large enough. Try 18px or larger.
• Think about your typeface! Some typefaces appear larger than others at the same font size.

How to Choose a Scale Factor

The most commonly used type scales are inspired by musical scales and geometry. For instance:

So, which one do you pick? I recommend two ways for you to figure out.

First, take the practical approach. Think about your extremes—if your project uses 6 heading levels, then a large type scale will result in a humongous heading 1. For instance, with a Golden Ratio type scale, a body text of 18px will result in heading 1 that’s a whopping 119px.

Next, take the romantic approach. Listen to your type scales. Google for music pieces that use the Major Second, Major Third, Perfect Fifth, and so on. Which of these sound like they represent your brand and purpose?

type-scale.com is a useful site for you to play around with your type scale. You can also use a prototyping app to test the font sizes in situ. Personally, I’ve found that type scales larger than Perfect Fourth (1.333) create headings that are too large. My favorite so far is the Major Third (1.25)—it provides enough distinction between headings, results in decently sized heading 1, and sounds nice musically.

Type Scales and Responsive Web Design [Advanced]

Ok, let’s go further down into our rabbit hole of type scales. Often, you’ll find that a single type scale won’t cut it for your project. That’s because a type of scale that looks good on a large screen would look too big on a smartphone. So, what do we do?

The solution: a double-stranded type scale.

This basically means you’ll have two sets of type scales. This gives you more flexibility in your project to create a text that looks great on all screen sizes. There are many ways you can use two sets of type scales, but for simplicity I recommend you to use one type of scale for medium and large screens and the other for small screens.

How do you create a double-stranded type scale? Don’t worry, it’s simpler than it sounds. Remember how we created a type scale by choosing a base font size and a scale factor? To create a second type scale, you have to change either one of those two numbers:

• You could choose a smaller base font size for small screens. E.g., 16px body text for small screens and 18px body text for larger screens.
• Or, you could choose a smaller scale factor for small screens. E.g., Minor Third (1.2) for small screens and Major Third (1.25) for larger screens.

I prefer the first method because mathematics is simpler. When it comes to defining the font sizes in CSS, you only have to define two rem values for your body texts, rather than having to define two sets of heading size values.

(Side note: Can you change both the base font size and scale factor to create your second type scale? Well, yes, but that’s not ideal. The result wouldn’t retain much of the harmonic nature you’d want in your type scales.)

And that’s it! That’s all you need to know to practically create a set of optimal font sizes for your web typography project. Next up: line-height.

Set the Right Line Heights for Your Type Scale

What’s a Line Height?

Line height defines the space above and below lines of text. You can define line-height in relative units (e.g., 1.5em, 1.5, 150%) or absolute units (e.g., 24px). A line-height of 1.5 on 16px text will result in a total height of 24px for each line of text (because 1.5*16px = 24px).

For the love of efficiency, don’t define line-height in absolute units. That’s because whenever you change your font size, you’ll then have to redefine your line-height in the updated absolute unit. Always define line-height in relative units.

How to Choose the Right Line Heights

It depends. I know, this sounds awful in a practical guide, but the beauty of typography is that so much depends on your typeface and the context of your design.

Line height is subjective. Aim for something that looks right, rather than a platonic ideal of the “correct” line-height. Having said that, there are a couple of things to consider when choosing your line heights.

Choose your line-heights based on the typefaces you use. Fonts with taller x-height require taller line-height. That’s because the taller your font, the more separation you need between lines of text for optimal reading. You don’t want your text to mush together.

Choose your line-heights based on your line lengths. The wider a block of text, the taller the line height should be. That’s because the wider your text, the more your eyes need to travel per line, so more space between lines will help your eyes jump to the next line easier. Conversely, the shorter your line length, the more jumps your eyes need to make—less space between lines will make the frequent hops easier.

Choose your line-heights depending on whether the text is a heading. Headings should have less line-height than body text. That’s because you want your heading to be read as one block. Your body text, on the other hand, should be optimized for slow and steady consumption. Body text line heights can go beyond 1.7, but headings should have line heights around 1.2.

Line Height and Vertical Rhythm [Advanced]

Ready to step deeper into the rabbit hole of line-heights? When you choose your line-heights, you have an opportunity to achieve a coveted state in typography known as vertical rhythm.

In short, vertical rhythm is the idea that your designs will look more harmonic if the spaces between elements—texts, images, boxes, etc.—are consistent. We often achieve this by using a common denominator for spacings. For example, Material Design uses a 4dp grid so that elements consistently use multiples of 4 for sizes and spacings.

So how does this work in practice?

First, try to find a line-height that gives you a nice number when you multiply it to your base font size. By a nice number, I mean a multiple of 4 or 8. For instance, if I have body text in 18px Source Sans Pro, a line-height of 1.33 gives me ~24px in total height with fairly nice spacing between lines of text. Or, if I use 18px Merriweather, a line-height of 1.78 gives me ~32px total height. Libre Franklin at 16px and line-height of 1.5 gives me 24px.

Once you’ve got a nice number, you can use the common denominator throughout your project. For instance:

• Size images in multiples of 8px (e.g., 40px for profile pictures).
• Line heights for headings can be tweaked so they produce total heights that also are multiples of 8px (this is extremely difficult to achieve and I don’t recommend it).
• Spacings above and below headings, spacings between paragraphs of body text, spacings between text and images, etc., can all be multiples of 8px.

For practical purposes, vertical rhythm is ideal. Unless you’re a typography purist (and cheers if you are!), you shouldn’t spend too much time trying to achieve perfect vertical rhythm in your project. If you want to learn more about vertical rhythm, Zell has an amazing in-depth explainer.

Next, let’s explore line lengths.

Set the Right Line Lengths for Your Texts

What’s a Line Length?

Line length is the width of a block of text. It’s usually defined by the average number of characters in a line of text.

There are several suggested optimal ranges of line lengths, but you should be fine with anywhere between 45–75 characters per line. With this range of characters, your text will not be too wide (and thus tedious to read) or too narrow (and thus require frequent hops while reading).

How to Achieve an Optimal Line Length

The most practical way to create an optimal line length is to use your grid. To do so, set a max-width property to your texts to limit their length. This method is useful for medium and large screens.

Test to see how many columns of your grid will result in text that falls within the 45–75 character range. For example, perhaps a max-width equivalent to 8 columns in your 12-column desktop grid would achieve an optimal line length. Since the range of characters is pretty wide, there’s room for your personal judgment and the context of your design.

Line Length and Responsive Web Design

What happens on smaller screens such as smartphone displays? Forget small screens—what about medium screens in tablets, or when you resize the browser on a desktop device? Wouldn’t the narrower screens force your text to be narrower and thus break the perfect line length you’ve tried to achieve?

Relax. The solution? You may ignore line length on smaller displays.

Hear me out. Typography purists might pull their hair out over this, but it’s important to understand that you’re trying to create a great reading experience, and line length is just one part of the equation. When it comes to narrow screens, other design choices such as the font size and line-height become more crucial in determining the reading experience of your text.

Besides, if you’ve used a double-stranded type scale as I’ve suggested above, you’d likely end up with a comfortably smaller base font size on small screens. This would probably make your line length fall within the optimal 45–75 character range.

That’s it! You’ve now mastered the holy trinity of web typography. 🎉 Personally, I’ve found that the easiest way to design for web typography is to start with font sizes, move to line-heights, then end with line lengths. (That’s why I’ve introduced them in this sequence.)

But wait, there’s more.

The holy trinity of font size, line height, and line length covers the fundamentals. There are a thousand other ways to enhance your web typography—and I thought I’d devote some time to discuss spacing because it’s such an easy way to improve your typography design.

Give Your Text Space it Needs

Letter Spacing

This one’s simple but powerful: reduce letter spacing for large text, increase letter spacing for small text. Both Google’s Material Design and Apple’s Human Interface Guidelines use this method to create great typographical experiences.

The larger a font, the larger the gaps between letters. Thus, when you reduce letter spacing you’ll make headings look better. Typically, you’d use a negative letter-spacing value (e.g., -1.5px) to achieve this. The higher your heading level, the more you should tighten it.

The opposite is true for small text, for instance, captions. Since the text is small, you’d want to help users read by spacing the letters apart. This way, then they’re rendered on a screen, they don’t clump together to form an illegible mess.

Paragraph Spacing

How far apart should paragraphs of body text be? The rule of thumb is that the paragraphs of text should appear distinct from one another to signify a break in a paragraph, but not too far apart that they appear disjointed.

As you can imagine, this is largely subjective and depends on the typeface you use. Taller fonts require larger paragraph spacing.

Heading Spacing

The space above a heading should be larger than the space below it. That’s because you want the heading to be visually attached to its section, and not the preceding section of text. Furthermore, the larger the heading, the more space should appear around it.

Guidelines are Just Guidelines

I hope this practical guide has not only been useful but has also sparked your love for typography. I think of it as my love letter to typography enthusiasts, web developers, and designers.

I thought I’d end with one last tip: sometimes you’ve just got to check the rules.

Use the guidelines to guide your efforts, but feel free to break from them whenever it makes sense. Remember, the ultimate goal is to create a great reading experience. Don’t miss the forest for the trees!

For instance, some designers would have you believe in the magical properties of the Golden Ratio. Personally, however, I’ve never been a huge fan of the ratio’s role in the design. And in typography, the Golden Ratio is too large to work in a type scale.

So I say: trust your eyes. Guidelines point you in the right direction, but you decide your own destination.