A free presentation of Butterick’s Practical Typography
A few hundred years of type and typography have established rules that only a fool would ignore. For all those who need to communicate clearly and even add a modicum of aesthetic value to their messages, this publication provides everything you always wanted to ask but didn’t know how to. — Erik Spiekermann from the foreword
“Good typography is measured by how well it reinforces the meaning of the text, not by some abstract scale of merit.” — Matthew Butterick
“One cannot not communicate” — Paul Watzlawick
If you fail to consider the effect of your message on the recipient,
you may inadvertently communicate
that you do not care
how your message may be received.
This is a bold claim, But I stand behind it: if you learn and follow these five typography rules, you will be a better typographer than 95% of professional writers and 70% of professional designers. (The rest of this book will raise you to the 99th percentile in both categories.)
All it takes is ten minutes—five minutes to read these rules once,
then five minutes to read them again. — Matthew Butterick
The typographic quality of your document is determined largely by how the body text looks. Why? Because there’s more body text than anything else. So start every project by making the body text look good,
then worry about the rest.
In turn, the appearance of the body text is determined primarily
by these four typographic choices:
Point Size is the size of the letters. In print, the most comfortable range for body text is 10–12 point. On the web, the range is 15–25 pixels.
Not every font appears equally large at a given point size,
so be prepared to adjust as necessary.
Line Spacing is the vertical distance between lines. It should be 120–145% of the point size. In word processors, use the “Exact” line-spacing option to achieve this. The default single-line option is too tight; the 1½-line option is too loose. In CSS, use
Line Length is the horizontal width of the text block. Line length should be an average of 45–90 characters per line (use your word-count function) or 2–3 lowercase alphabets, like so:
In a printed document, this usually means Page Margins larger than the traditional one inch. On a web page, it usually means not allowing the text to flow to the edges of the browser window.
The fastest, easiest, and most visible improvement you can make to your typography is to ignore the 'System' fonts that came free with your computer and buy a professional font like Equity and Concourse,
see: Font Recommendations. A professional font gives you the benefit of a professional designer’s skills without having to hire one.
If that’s impossible, you can still make good typography with system fonts. But choose wisely. And never choose Times New Roman or Arial.
Point Size should be 10–12 points in printed documents, 15-25 pixels on the web.
Line Spacing should be 120–145% of the point size.
The average Line Length should be 45–90 characters (including spaces).
The easiest and most visible improvement you can make to your typography is to use a professional font, like those found in Font Recommendations.
Use curly quotation marks, not straight ones
(see Straight and Curly Quotes).
Put only One Space Between Sentences.
Never use Underlining, unless it’s a hyperlink.
Use Centered Text sparingly.
Use Bold or Italic as little as possible.
One or the other, as little as possible.
All Caps are fine for less than one line of text.
If you don’t have real Small Caps, don’t use them at all.
Use 5–12% extra Letterspacing with all caps and small caps.
Kerning should always be turned on.
Use First-Line Indents that are one to four times the point size of the text, or use 4–10 points of space between paragraphs. But don’t use both.
Don’t confuse Hyphens and Dashes,
and don’t use multiple hyphens as a dash.
Use Ampersands sparingly, unless included in a proper name.
In a document longer than three pages, one exclamation point is plenty (see Question Marks and exclamation points.)
Use proper Trademark and Copyright Symbols
—not alphabetic approximations.
Make Ellipses using the proper character, not periods and spaces.
Make sure Apostrophes point downward. It’s important.
Make sure Foot and Inch Marks are straight ('), not curly (’).