Typography

What’s the right font size in web design?

If you want your text to be read, set it at a sufficient size! But what is a good font size, and how can you apply it in your web design? This article and video has answerers for you with some practical examples focused on body text in responsive web design. Ready – then let’s size up, how to size your fonts!

TL;DR: Start with your body text and set it at a default size of 1em, which is calculated as 16 px in most browsers. Use relative units and from there, scale up the font size and ideally also the layout proportionally and make it larger on bigger view ports, since we can assume that the viewer is further away.

The holy trinity of typography

A font is only as good as it’s being set. You can choose the best typefaces ever for your web or app design, and still f*** it up big time (pun intended) when setting it so small or in other ways inappropriate. The holy trinity of typography when it comes to setting your text is:

  1. font size,
  2. line height (or leading), and
  3. line length (or measure)

These three parameters are strongly related to each other, and effect if your text can be easily read the most. So when adjusting the type size, the other parameters might be adjusted as well. I always start out with picking a proper typeface, followed by setting the appropriate font size, and then take care of line length and line height.

For this article, let’s do the same and focus on size. I will not go into modular scale (which is beneficial) or more advanced fluid typography. For the purpose of clarity, I want to keep it as simple as possible to be a solid introduction.

Different kinds of text have different sizes

As with picking a proper typeface, ask yourself, what’s the main application of your text? Is it a long reading format, like a blog? Then body text is the star of your show. Is it a portfolio or a more marketing show-off site? Then display text comes into play. Is it an app or a UI with very short precise information, then functional text is your main actor. Here are values I use in my projects. Use them as helpful guidelines.

The different types of text shown in an app. 1. Display text is pointing to the headline. 2. Body text is pointing to long reading text below it. 3. Functional text is pointing to the caption below a pullquote.
Display text, like headings or pull quotes, is set larger. Body text should ideally be around the browser defaults. Functional text can be slightly smaller.

Body text

Default: 16px or 1em
On mobile: Use the defaults, at times 10% smaller
On Desktop: go up until 24px or 1.5em

I see a lot of sites that set the body text too small. In the video, I show a horrible example of a hotel’s website where the body text is set at only 11 px on desktop, which is ridiculous. Even for mobile, it would be too small.

Display text (Heading 1)

Default: 40px or 2.5em for an <h1>
On mobile: 32px or 2em or smaller, since it uses up too much space.
On Desktop: go up until 64px or 4em

I use this as the maximum for my font sizes. For the other headings, you would pick some values in between that will still create a visual hierarchy. In most cases, you only need to style your <h1> to <h4>. The <h4> could have the same size as your body text, but set in a bolder weight or a different typeface, so it still stands out as a heading.

Functional text (captions, nav)

Default: 12px to 14px or 0.75em to 0.875em
On mobile: Don’t go below the defaults, it’s already very small
On Desktop: go up until 16px or 1em

This text can be smaller than the body text. This is because otherwise you would have a hard time fitting it into your design. It should still be readable, though. One tip here is to use a slightly stronger weight (like medium) and increase the tracking as well (at 1% or 0.01em).

Relative units rock

em and rem are both relative units used in CSS, and for this article, let’s treat them as interchangeable (but if you want, find out here when to em or rem). The reason why I love relative units is, because they make things easier for us typographers. Of course, your text will eventually be displayed at a specific pixel size and your root size should be sufficient for it (look at the minimum sizes above). But for designing and coding, I find it very helpful to think in relations between the different elements, rather than exact sizes.

Looking at the following code example, the rem are easier to understand and process for me as a designer.

p {
 font-size: 1rem;
}

h1 {
 font-size: 2.5rem; /* 3 times the body text */
}

h2 {
 font-size: 2rem; /* 2 times the body text */
}

h3 {
 font-size: 1.5rem; /* 1 ½ times the body text */
}

figcaption {
 font-size: 0.75rem; /* ¾ of the body text */
}

Increase the font-size on larger displays

We talked about a good default size as starting point, and about relative units. Let’s bring it all together to the one thing I find most crucial for sizing your text right in responsive web design. It is sizing your text appropriate to the reader’s distance from the device. Let’s assume that the larger the viewport is, the further it is away from the reader. A width of 370 px might be a smartphone, held closer to your body. On the other hand, a 1920 px wide viewport might be an external monitor or an iMac positioned on a desktop further away from the reader. Besides my rough guidelines, a great tool for that is the Font Size Calculator by leserlich.info.

A desktop computer with text set at 24 px, a laptop with text set at 20 px, a tablet with text set at 16 px and a smartphone with text set at 16 px font size.
The larger the screen, the larger the font size should be. On a smaller screen, go with the defaults, maybe slightly smaller.

This means you can increase the font size at certain steps. Here the relative units from above bring you a big advantage. You can scale up everything proportionally, by changing the root size of the html element at certain breakpoints. In the video I explain this in detail, so I won’t do it here. Also, play around with it on CodePen and change the width of the view port there.

See the Pen font size by Oliver (@glyphe) on CodePen.

It depends on the typeface

These were all rough guidelines to point you in the right direction. Bear in mind, that it will always depend on your exact application, and the typeface you choose. Because of the design of a typeface and super complicated technical stuff called vertical metrics, you can almost lose yourself in that subject, and I could go on forever about more details and exceptions. Eventually it does not matter that much.

Irritating, but true: both typefaces are set at the same size. On the left, Gill Sans, has a lower x-height which makes it appear smaller than Arpona Sans on the right with a larger x-height.

Judge what you see, and not what is calculated. Use this article as another step of your typographic journey to train your eye, taste, and assessment. If you have trouble with that, you can always book a private coaching call for assistance!


I hope this article was helpful, so you can make a more educated decision, when it comes to font sizes. Do you miss something, or have questions? I’m happy to answer them in the comments below!

Typographic power to your inbox!

  • FontFriday: I personally recommend one typeface per week and for what application it’s best. Every second week, it’s a free font.
  • Pimp my Type: Every second Tuesday a short article or a video from the YouTube channel that help you improve the design of your website, app or digital product.
  • No Comic Sans, Open Sans 😉 or any other BS, like annoying ads. Your email will only be used to send out the newsletters, unsubscribe anytime.

23 Comments

  1. Thanks for this excellent info. One item not covered: printing. A font size that works great on mobile and desktop ends up being way too big when printed, in my opinion. At least it’s much bigger than what we usually set the font size to when making documents intended for printing using Microsoft Word and the like. Do you agree? Do you just use a media query to get the font size right in print too? (Eg `@media print{ html{ font-size:80%;}}`?)

    1. Thanks for your thoughts, Michael! Totally agree. 16 pt are ridiculously large printed. Something like around 10 to 12 pt are more appropriate. So I absolutely agree with your approach with a specific print media query. If you set relative units, I would write something like:


      @media print{
      html { font-size: 11pt; }
      }

      If the units are all set in relative sizes, it should keep all the proportions, just set to points now.

  2. mich würde interessieren, welches deine 10 schönsten Schriften aus der Rubrik sans-serif und ebenso die 10 schönsten serifen-Schriften sind.
    Wie wäre es mal mit einem Artikel, indem du deine schönsten Schriften vorstellst?
    Das interessiert bestimmt viele andere auch.
    Gruß, Simone

    1. Liebe Simone, Danke für den Vorschlag! Ich ich werde mir das für das Jahresende aufheben und darin meine persönlichen Top Schriften in einem Video oder Artikel präsentieren. Gute Idee!

  3. Great article, thanks. I am unclear about retina displays. Does the fact a device have more pixels per screen inch require additional consideration in your view?

    1. Great question, Peter! It does not. When you have a higher pixel density on a screen, it does not calculate it 1:1, it scales it up proportionally. So it’s not the actual size of one pixel, then.

  4. Thinking specifically about screen usage, perhaps I am wrong, but I tend to think we would be better off abandoning reference to text in px sizes these days with multiple screen sizes and resolutions.

    I also dislike the idea of equating 1 rem as specifically being 16px and never give the pixel value a second thought. This is actually liberating, since we do not really need or care about the px value. All that matters is whether it works or not.

    Another observation I would make is that not all fonts are equal and there are times where having an H1 header at 2.5 rem might look quite large with one font type or fairly conservative on another font.

    Due to the number of screen display sizes these days I have recently started applying font sizes flexibly within certain ranges at times, rather than at specific sizes, so you can end up with something like a header changing dynamically between 2 – 3 rem dependent on the available screen width. This has proven useful for example in managing the flow of text on narrow screen mobiles.

  5. Thank you so much for that comment, Ashley! I totally agree with you, that it’s more about the ratio of font sizes between different elements like a heading and a body text or a caption. So using rems and ranges is definitely the better approach. It sure feels more liberating and embraces the nature of the subject.

    I still reference the pixel values, because a lot of people use design software (myself included) where you can’t switch to other web based units. And of course, one pixel is not one physical pixel. As you mentioned, the landscape of devices is super fragmented, I observed that as well. What struck me the most, for example is, that an iPad and an iPad Mini have the same logical resolution of 1024 × 768 px, but the physical diagonal screen size differs by almost 5 cm (or 2 in). So you can’t be sure that even in rems it’s appropriate.

    Thanks again for your input, I’ll keep highlighting that these numbers are more guidelines and you should see them as ranges rather than exact numbers.

  6. Totally agree, but with one proviso; let the reader decide. I always set my body font size to one REM, the visitors’ browser setting then determines the size.
    Let’s face it, we don’t all have perfect vision.

    1. Love that comment, Hywel! Totally agree, rems are the way to go, but wanted to suggest a pixel value for design software and other situations (app development) as well.

Leave a Reply to Michael Nelson Cancel reply

Your email address will not be published. Required fields are marked *