Rationale: why we use sans serif fonts for body

[sukhrajghuman]

We should explain why we use sans-serif fonts for our body text.

[gordongrace]

2010 article on font hinting from Peter Bilak: https://www.typotheque.com/articles/hinting

The problem is that typical modern fonts are not designed primarily for the 72–96 dpi resolution of computer screens, but for the much higher 1,200+ dpi resolution of print media. The letterforms are designed and stored as outlines, mathematically perfect lines and curves which look great at high resolutions, but can be distorted or even illegible when converted into groups of pixels, the on-or-off dots that make up a computer’s display. And although there has been much discussion about high-definition computer monitors for decades, the fact of the matter is that my 5 year old mobile phone still takes photos with finer detail than my brand new computer can show on its screen.

This is the reason that webpage designers have long been more or less limited to a dozen or so fonts (Verdana, Georgia, Arial, etc.) that have been fine-tuned by hand so that typical text sizes (9–14pt) display well at low resolutions. These fonts are so common that most computer users think of them as free, but the reality is that Verdana, for example, is probably the most expensive, labor-intensive font ever produced. It includes characters used to write an extremely wide range of languages, and each of these characters had to be adjusted to be readable at every point size between 9 and 60 (at 60pt the resolution is sufficient to display the letterforms accurately). In other words, each of more than 890 characters was ‘redesigned’ dozens of times, once at every point size.

Perhaps a good reason why we haven't attempted to create our own font for the design system at this point.

Hinting can improve the rendering of fonts. But those fonts will be rendered differently by different rasterisers on different platforms and often in different applications as well, (compare for example text in the Safari and Explorer browsers on the same Windows computer). If the designer’s intention is consistent cross-platform rendering, the fonts also need to use consistent design across similar letters.

[gordongrace]

From 2013, a Smashing Magazine analysis of Typographic Design Patterns and Current Practices [from global news sites] reveals:

in summary we can state that nearly two thirds of the websites analyzed use serifs for body copy, and Georgia and Arial are still the most common primary typefaces. However, our most surprising find is that a majority of websites use non-standard fonts as their primary typeface — 39% of body copy and 66% of headlines. This development is truly interesting, because it shows that typography has become an important element in establishing brand identity and character. These numbers indicate growing typographic diversity on the Web — which we should probably expect anyway.