Font size guidelines for responsive websites

Profile picture of Michael J. Fordham

{date}

{#hash1}

{#hash2}

Illustrations by {name}

From desktop to mobile and beyond, here’s how to ensure that your typography is just as responsive as the rest of your website.

4 min read

A graphic illustration with various typographic characters placed on a grid and their corresponding font sizes

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

Get our latest stories delivered straight to your inbox →

Typography can make or break your web design. Alongside identifying the best fonts for your website, it’s also vital to pick the right font sizes. The size of your font can create contrast and help users focus on your key message.


However, one size does not fit all. The websites you design are viewed on all sorts of different browsers and viewport sizes: laptops, tablets, TVs, smartphones — maybe even smartwatches. You therefore need to consider your font size carefully, and here’s what to keep in mind.



Font size in web design


Fonts can be sized in a number of different ways on the web:


  • Pixel (px)

  • Point (pt)

  • em: The font size is relative to the parent container’s font size.

  • Root em (rem): The font size inherits from the root of the styling.

  • Percentage (%)

  • Viewport width or height (vw or vh)

  • Centimeter (cm)

  • Millimetre (mm)

  • Inch (in)



Madefor Display font shown in different sizes, from 84 pixels to 10 pixels


In most cases, you should avoid absolute measurements like cm, mm, in and pt for web designs as they will look different on every device.


Pixel is somewhat of an absolute size, as it is based on the pixel size of the user’s screen. However, using px for font sizing is quite a common practice and most web browsers are equipped to make your design look similar across different resolutions even when using px. It’s also a very easy unit to use when considering the collaboration between design teams who would typically design by pixel.


Another option is to utilize em and rem. em inherits its size from its parent, while rem inherits from the root styling (hence, why it’s named root em).


The default font size in all browsers tends to be approximately 16 pixels. A common practice is to set the root font-size to 62.5%, which translates the default 16px to approximately 10px. We do this to make the mental conversion of the font size easier when using em or rem (e.g. 1 rem = approx. 10 pixels, while 1.8 rem = approx. 18 pixels). This is a handy approach for two reasons:


  1. The mental conversion between pixels and rem is easy to calculate in your head.

  2. A user can change their preferred default font size and the website would adjust automatically to suit their needs.


Now, the next thing to consider is that font-sizes need to be different across different devices. On a desktop monitor there is more room and so fonts can (and should) be larger, while on mobile the screen is smaller so the font size should be decreased so all the text can fit on the page.


In CSS, we do this with media queries.


For example, we can set a default font size for a h1 element to 3.5 rem. This might look great on desktop, but on mobile it would be way too big. Therefore we could have a media query like:


h1 {
    font-size: 3.5rem;
}

@media only screen and (max-width: 400px) {
    h1 {
        font-size: 2rem;
    }
}

This would adjust the font sizes appropriately for a mobile viewport (assuming 400px is the width of the mobile).


Even after all this tweaking you may be looking at your screen and thinking: this font looks smaller, or larger, than it should be.


This is due to how digital typefaces are designed. Different fonts’ ascenders and descenders generally vary from typeface to typeface, which may make them seem like their proportions are different.



Optimal font sizes for desktop


There are no exact rules for font sizing, but there are some generally good practices to think about when designing for desktop:


  • Body text - Font sizes should be around 16px to 18px for legibility (or 1.6rem to 1.8rem using our sizing rules mentioned above). If you can afford to go a bit larger, then even 21px can be pleasant to read.

  • Headings - The headings should be around 1.96 times larger than your body text to create a sufficient contrast. This would mean that if you use 18px for body font size, then you would use around 35px for headings.

  • Subheadings - These should be slightly smaller than heading size, with some adjustments like less weight to create a contrast between the two. For example, if we used 35px for the heading, we should use around 30px for the subheading.

  • Input fields - These should closely match the body text’s rules.