Rules for readability.

At first glance, it seems like a dry discipline, filled with rather boring rules about line-widths and parargraph spacings.

the letter “A”

But the effect that a simple font change can have is oft-underrated, and the first step in my process usually involves finding one that fits the vibe of the project. The idea that good typography should be “invisible” is a flawed one.

In moments of doubt, I simply return to the question: “does this look like I want it to?”.

General rules

There’s nothing stopping from laying text carelessly across a screen, but . Rules are meant to be broken, but only when there’s good reason to.

  1. Point size for body text should be 10–12 points in printed documents, 15-25 pixels on the web.
  2. Line spacing should be 120–150% of the point size. I default to 1.5em for paragraphs.
  3. The average line length should be 45–90 characters (including spaces). In CSS, this is approximately 38rem.
  4. Put only one space between sentences.
  5. Never choose Times New Roman or Arial, as those fonts are favored only by the apathetic and sloppy.
  6. Don’t use Lorem Ipsum to typeset a page, it makes it impossible to gauge whether a paragraph of text is easy to read or not.

Useful Font Collections

There are thousands of fonts out there,

Sans with true small-caps

Surprisingly rare, given the number of otherwise high-quality sans typefaces out there.

Montserrat Work Sans Raleway Avenir Next Merriweather Sans Source Sans Pro

Decent handwriting fonts


Serifs with true small-caps

Even rarer, for some reason.


Serifs with 4+ weights

Petrona Rowan Lora EB Garamond

Type on the Web

Specify your character encoding

You ought to read Joel’s post about Unicode and character sets. But if you choose not to, you still ought to add <meta charset="utf-8"/> tags to all your webpages.

Because Firefox and Safari both have their encoding set to “Default”, not UTF-8. For some users, their default encoding is Western, that is, ISO-8859-1, which renders the characters differently. The most common consequence of this is apostrophes rendering as random symbols, such as “é «”, “’”, “—, and more.

Kerning and spacing


Fluid type


Further Reading

Typeface SelectionA page of links, recommended reading, and strategies for picking a font.
Practical TypographyComprehensive guide to designing good text layouts, on both screens and paper.
Web TypographyA friendly tutorial about web fonts.
Six tips for better web typographySome rules that are easy to apply and have the greatest impact on legibility.
A Variable Fonts PrimerThe goal of this site is to show you how variable fonts tick.
Typography TipsA brief newsletter bringing you web typography tips (both design and technical) and occasional news about developments in web type (like browser support and news from the W3C)