Typography in ten minutes

This is a bold claim, but I stand be­hind it: if you learn and fol­low these five ty­pog­ra­phy rules, you will be a bet­ter ty­pog­ra­pher than nearly every writer—and even most graphic designers.

All it takes is ten min­utes: five min­utes to read these rules once. Then five min­utes to read them again.

Small but nec­es­sary in­ter­rup­tion: This on­line book isn’t sup­ported by ban­ner ads. It’s sup­ported by read­ers like you. If you find these tips valu­able, see how to pay for this book. There’s plenty of other ma­te­r­ial too—see the ta­ble of con­tents.

Ready? Go.

  1. The ty­po­graphic qual­ity of your doc­u­ment is de­ter­mined largely by how the body text looks. Why? Be­cause there’s more body text than any­thing else. So start every project by mak­ing the body text look good. Then worry about the rest.

    In turn, the ap­pear­ance of the body text is de­ter­mined pri­mar­ily by these four ty­po­graphic choices:

  2. Point size is how big the font is. In print, the most com­fort­able range for body text is 10–12 point. On the web, 15–25 pix­els. Not every font ap­pears equally large at a given point size, so be pre­pared to ad­just as needed.

  3. Line spac­ing is the ver­ti­cal dis­tance be­tween lines. It should be 120–145% of the point size. In word proces­sors, use the “Ex­act” line-spac­ing op­tion to achieve this. The de­fault sin­gle-line op­tion is too tight; the 1½-line op­tion is too loose. In CSS, use the line-height prop­erty (prefer­ably with a unit­less value, so 130% would be­come 1.3).

  4. line length is the hor­i­zon­tal width of the text block. Line length should be an av­er­age of 45–90 char­ac­ters per line (use your word-count func­tion) or 2–3 low­er­case al­pha­bets, like so:

    abcde­fghijklmnopqrstu­vwxyz­abcde­fghijklmnopqrstu­vwxyz­abcd

    In a printed doc­u­ment, this usu­ally means page mar­gins larger than one inch (a type­writer habit). On a web page, it usu­ally means pre­vent­ing the text from flow­ing to the edges of the browser window.

  5. And fi­nally, font choice. The fastest, eas­i­est, and most vis­i­ble im­prove­ment you can make to your ty­pog­ra­phy is to ig­nore the fonts al­ready loaded on your com­puter (known as sys­tem fonts) and the free fonts that in­un­date the in­ter­net. In­stead, buy a pro­fes­sional font (like those found in font rec­om­men­da­tions). A pro­fes­sional font gives you the ben­e­fit of a pro­fes­sional de­signer’s skills with­out hav­ing to hire one.

    If that’s im­pos­si­ble, you can still make good ty­pog­ra­phy with sys­tem fonts. But choose wisely. And never choose Times New Ro­man or Ar­ial, as those fonts are fa­vored only by the ap­a­thetic and sloppy. Not by ty­pog­ra­phers. Not by you.

That’s it. As you put these five rules to work, you’ll no­tice your doc­u­ments start­ing to look more like pro­fes­sion­ally pub­lished material.

If you’re ready for a lit­tle more, try the sum­mary of key rules.

If you’re ready for a lot more, start at the fore­word and keep reading.

undock move Heliotrope Equity Valkyrie Century Supra Concourse Triplicate buy font close