Web typography best practices

TL;DR

• Use relative length units whenever possible
• Let the browser decide (respect user preference)
• If you need fixed values, use at least 16px for body text, modular scale for headings, and unitless values for line-height (1.5 to 2 is a good starting point)
• Limit the width to be no more than 80 characters or glyphs
• Small fonts need more spacing

The best font size

There are many cases when the best font size is the default font size. The web is not print and very often it’s best to let the browser decide. How you can do that? One way is to set html { font-size: 100%; } and use relative length units such as rem, em, percent, etc. in other declarations.

If for some reason you want to set the fixed size, I’d recommend using at least 16px for body text and a modular scale for headings.

It’s always a good idea to look for research and see what science has to say. One of such research shows, that large font size leads to an increase of early emotion effects, which matters most if your site is content-heavy.

What is a good line-height value?

• Avoid fixed values, use relative or unitless values instead.
• Small fonts need more spacing
• The good starting point for line-height is 1.5 to 2

Many people with cognitive disabilities have trouble tracking lines of text when a block of text is single spaced. Providing spacing between 1.5 to 2 allows them to start a new line more easily once they have finished the previous one.

w3.org

Remember about contrast

Ensure hight, readable, accessible contrast of your text, for example using contrast checker tool.

Further reading and more best practices

Web typography is a wide topic and I just scratched the surface. Here are some recommended readings on that topic:

• W3 font-size tips
• Typography Handbook
• Accessible Font Sizing, Explained
• A Reference Guide For Typography In Mobile Web Design

Share

Thanks for reading. If you liked it, consider sharing it with friends via:

https://www.damianwajer.com/blog/web-typography-best-practices/

Let's be in touch!

Don't miss other useful posts. Level up your skills with useful UX, web development, and productivity tips via e-mail.

Don't you want to subscribe via e-mail?

See other ways to keep in touch.