đź“–Practical Typography

authors
Butterick, Matthew
year
2010
url
https://practicaltypography.com/

typography in 10 minutes:

  1. start with body text

  2. point size. 10-12pt for print; 15-25px for web.

  3. line spacing. 120-145% (line-height: 1.3)

  4. line length 45-90 chars or 2-3 lowercase alphabets.

  5. fonts

extra

  • never underline (except perhaps for web links)

  • use 5-12% extra letterspacing with all caps and small caps

§ Typography is inevitable when you put text in writing.

Is ty­pog­ra­phy an art? That’s like ask­ing if pho­tog­ra­phy is an art. Cer­tainly there are pho­tog­ra­phers and ty­pog­ra­phers whose ideas and tech­niques raise their work to the level of art. But at their core, both pho­tog­ra­phy and ty­pog­ra­phy per­form a util­i­tar­ian func­tion. The aes­thetic com­po­nent is sep­a­rate. Be­ing an ef­fec­tive ty­pog­ra­pher is more about good skills than good taste.

Reader’s attention is a valuable resource.

Typography is like non-verbal communication. It is not the most important thing, but it certainly counts.

  • parentheses, brackets, and braces should not adopt formatting of the surrounded material.

    • sometimes it’s ok to do so if the font will make roman/italic collide

  • thin space ( ) can be used when standard space is too large (e.g., after periods: W. A. Dwiggins)

  • do not underline

  • Use bold or italic, not both.

  • Do not use italic with sans serif fonts. Good serif fonts are usually hand-drawn to have a different shape in italic, sans serif fonts are usually just slanted and that’s usually not enough for them to stand out.

  • Headings

    • Do not use too many levels. 2-3 is a good maximum.

    • Add spacing before and after. That’s both subtle and effective.

    • Use bold, not italic (bold is easier to read and stands out better)

    • Do not underline

    • Do not center

    • Don’t use all caps. If your headings are full sentences, they are too long for all caps.

    • It’s ok to make point size bigger, but just a little.

    • Suppress hyphenation so headers do not break awkwardly

    • If you use bold in your headings, try reducing the point size a little (0.5–1 points).

  • Letterspacing is adjusting space between all characters. Unlike kerning, which affects specific pairs of letters.

  • add letterspacing for all caps

Backlinks