13 Golden Rules of Typography on the Web

Typography is what comes between the author and the reader. This is as true on the web as it is in any other medium. If a text has anything at all significant to say, it needs a typographer’s care, which will in turn be repaid by the reader’s attention. If you design websites or use CSS then you are a typographer whether you know it or not.This talk will give you will give a set of guidelines that deftly combine implement­ation details with typographic theory and set you on the road to designing beautiful and effective responsive typography.

If you want 168 more guidelines, check out Richard’s book! wbtyp.net

Slides: webtypography.net/talks/summit17

Richard’s day job is UX designer, but his passion is typography.

In 2006 Oliver Reichenstein wrote that 90% of web design is typography. Why don’t we have better reading experiences? Why does the web have such a same-ness to its typography?

Microsoft’s research showed that while great typography didn’t enhance comprehension, but it did increase engagement.

Good typography induces a good mood!

  1. Learn to relinquish control – the history of print was one of designers having control, but this is not true on the web. The reader can override anything you do. (reference to John Allsopp’s Dao, quoting “The sage accepts the ebb and flow of things”)
  2. Don’t trust computers – don’t trust browser defaults. Use your own judgement. Question what’s there by default, don’t assume it’s solving the problem you have to solve.
  3. Use the default font size for paragraph text – the paragraph is the shortest unit of thought. Your reader should be able to absorb them without interruption. Readability comes from the trio of line spacing, measure and text size. The user will often change this default to something that works for them (photo of someone using a kindle at maximum font size).
  4. Adjust type size according to reading distance – desktops are read from further away than books; and we hold phones even closer. The further the user is from the screen, the larger the text needs to be. Look into ‘arc minutes’ for the way this perceived size is measured (http://sizecalc.com). However we have no definite way to measure how far the reader’s eyes are from the screen… so some derived rules: body text – 16px for mobile, 18px for tablets, 22px for large screens.
  5. Adjust the font size if the typeface requires it – typefaces vary signifcantly in x height which changes the perceived text size. Helvetica at 16px will look about the same as Futura at 20px. (good slides about calculating this)
  6. Set tables to be read – tables are neglected, particularly on the web. Tables should be readable and support understanding of the data they contain. Avoid centre aligning text in tables. Left-align text; right-align numbers so the prescision is always the same. Match headings to their data. Sadly HTML4’s character alignment never got supported; CSS4 has a character alignment method which is also languishing. Use whitespace! Don’t bung everything into a full-width, tightly-spaced, zebra-striped, over-coloured nightmare… (full list of tips in slides)
  7. Set text at display sizes, even on small screens – ‘display’ sizes are very large. At least three times the size of body text. At that size, readers see the text and react to it before they actually read it. It lets you set the mood. Can you really do this on mobile? Yes! Back to sizecalc… you can find the same perceived size and create the same effect.
  8. Resize display text as you would an image – scale relative to the screen size (eg. using viewport units, you don’t even need media queries). Use vmin to avoid issues with different aspect ratios.
  9. Influence the way people feel through type – create an ambience for your reading. Even if people are not consciously aware of good typography, they are effected by it. Sarah Hyndman spoke at TEDxBedford about typography affecting taste perception of people eating a jelly bean. People looking at round text reported a sweeter taste, while those looking at jagged text reported a sourer taste. Type can affect the senses.
  10. Don’t be reverential, dogmatic or ordinary – don’t opt for inoffensive blandness. Typography is the ‘clothes that words wear’ (Beatrice Warde). Do be appropriate – how should your content feel?
  11. Reduce your payload – think about your bandwidth budget. Web fonts are big; but probably smaller than an image or JS framework… but they definitely add up. Ensure you’re using WOFF2, subset very carefully.
  12. Optimise page render timing – Beware the flash of empty pages while fonts load. Use font-display:fallback to display text in fallback fonts while the web font is downloading. You can pre-load a critical font with a link element in the head; although again use with care.
  13. Learn to use variable fonts – this is a new technology that will hugely reduce the size of fonts. They allow huge variation (via a small amount of axes) but any combination of settings can be used as a “named instance” (that is, works as though it was a whole different font).

Credits

Notes by Ben Buchanan, who has been attending Web Directions events for many years and taking in depth notes for just as long.