Everything You Need to Know About Designing for Web Typography

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:

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.

Sample type scale with a scale factor of 1.25.

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:

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:

At the same font size, some typefaces are larger than others.

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?

The scale factor you choose drastically changes a type scale.

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 can create two sets of type scale by changing the base font size (left) or the scale factor (right).

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.

Taller fonts require taller line heights.

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.

Wider texts need taller line heights.

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.

Headings need shorter line heights than body text.

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.

4dp grid in Material Design. Source: Google

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.

These three paragraphs have lines of text with total heights that are multiples of 8.

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

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).

Line length measures the width of your block of text.

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.

A double-stranded type scale helps optimize line lengths on small screens.

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.

Letter spacing makes a subtle but powerful difference in your web typography.

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.

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.

Give headings more space above than below so they’re visually anchored to their section.

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.

The Startup

Get smarter at building your thing. Join The Startup’s +788K followers.

Thanks to Teo Yu Sheng

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Teo Yu Siang (he/him)

Written by

Sr product designer based in Singapore. I like to write. www.teoyusiang.com

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +788K followers.

Teo Yu Siang (he/him)

Written by

Sr product designer based in Singapore. I like to write. www.teoyusiang.com

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +788K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store