Web Typography

Building a beautiful reading experience is a lot harder than it looks. The problem is that many of the common typography rules that used to be true, aren't anymore. The following is a simple overview of modern website typography along with simple rules to follow.

Serif vs. Sans-Serif

For the longest time, whenever you would look at online typography tips, the first was to use sans-serif fonts for all your text. However, if you go to any website where there's a lot to read; The New York Times, Medium, Substack, they all use serif fonts for the content. Either the "standard" advice is wrong or none of those companies know anything about typography.

The difference between Serif and Sans-Serif

Essentially, the "standard" advice was given when screens were much worse than they are now. Serifs on old screens were harder to see, not rendered properly, and less attractive than their printed counterparts. For reference, a standard newspaper was printed at 300 DPI (dots per inch) while the average screen in the 2000s was around 100 PPI (pixels per inch). Pixels and dots aren't perfect corollaries but the difference is large either way. However screens are significantly better now.

The 2012 Retina MacBook Pro was one of the first HD laptops, featuring a 220 PPI screen. The iPhone 4 released in 2010 was 326 PPI (it's easier to improve PPI on smaller screens). In 2020 it's hard to find devices that aren't TVs with less than 250 PPI. There is very little difference between print media and screens now.

For that reason, most websites opt for serif fonts on long content as the serifs help differentiate letters better. On the other hand, short content like titles are usually sans-serif fonts. Sans-serif title, serif text is the standard web article style now and most websites should stick with it. The main reason to consider alternatives is for branding.

Serif fonts are seen as traditional, serious and respected. Sans-serif fonts are seen as modern and friendly. Most law firms would do good with serifs, most software companies would do good with sans-serif. Once you've decided which to use, you can follow a simple set of rules.

  1. Sans-Serif title & Serif content
  2. 1.5 or 1.6 Line Height
  3. 45-85 characters per line
  4. 16pt-24pt font (NYT uses 16, Medium uses 21, I use 20)
  5. Good contrast for text (best is black text, white background)
  6. Simple web design

Web Design

I want to expand on the last point. The greatest typography in the world won’t hide ugly, confusing, or distracting elements in your page. People have very short attention spans, and cultivating them is the most important part of any web page. When the user is reading, leave them alone. Don’t have distracting sidebars or a huge top navbar. Look to Medium for example. The navigation bar goes away while the user is reading. Most reading-focused websites have extremely sparse elements once the user starts reading. The text should be the focus.

This rule changes if you don't care if the user reads the text and you'd rather them do something else on your website, but if that was the case you shouldn't worry about typography anyway.

Conclusion

Design is important and difficult to do well; don’t brush it aside. Great, functional design will keep people engaged, and that is the entire point of blogging or writing. Content is important, but you need people to click on the content first. Not many people will read a 10pt Times New Roman wall of text (unless you're Paul Graham), no matter how amazing the information inside is. If you want people to get your message, make it easy to get!