Classmill - Typography Guide

BODY TEXT

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 the four typographic choices below.

BODY TEXT

Delete Drag

POINT SIZE

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.

POINT SIZE

Delete Drag

Point Size in Print

Nearly every book, newspaper, and magazine is set smaller than 12 point. (One major reason is cost: bigger point sizes require more paper)
There are 72 points to an inch. Word lets you specify point sizes in half-point increments. Pages allows finer increments of one-tenth of a point. CSS allows any size, but browsers will typically round to the nearest whole point.
If you’re not required to use 12 point, don’t. Try sizes down to 10 point, including intermediate sizes like 10.5 and 11.5 point—half-point differences are meaningful at this scale.
But I can’t guarantee 12 point will always look too big. That’s because the point-size system is not absolute—different fonts set at the same point size won’t necessarily appear the same on the page.
So you need to let your eyes be the judge. Don’t just rely on the point size. For instance, the three fonts below—Sabon, Times New Roman, and Arno—are set at 12 point, but they’re not the same size visually.

You can match the length of two fonts by setting a block of text twice: once in the old font and once in the new font, both at the same point size. Adjust the point size of the new font until each line of text breaks in roughly the same place. (You won’t be able to match them exactly.) Below, the point sizes of Sabon and Arno have been adjusted so they occupy the same space as Times New Roman.

The point size can be even smaller in professionally typeset materials like publications and stationery. Text on business cards is often only seven or eight points. All Caps text is often just as legible as regular lowercase text at these sizes.
It’s fine to emphasize text with a larger point size (or de-emphasize it with a smaller point size). But compared to bold or italic , or ALL CAPS , point size offers a subtle range of adjustments. So use the subtlety. In print, if your text is set at 11 point, you don’t need to go all the way to 14 point for emphasis. Start with a small increase—say, half a point—and move up in half-point increments until you get the emphasis you need. It’ll be less than you think.

Point Size on the Web

You don’t have to use pixels as the sizing unit in your CSS (and indeed, most prefer not to). But the pixel is the least ambiguous CSS unit. Also, all CSS measurements are eventually converted to pixels in the browser.
For websites, I recommend body text of 15–25 pixels. As with print, you’ll need to fine-tune based on the particular font you’re using.
Why? Two reasons. First, we typically read screens from further away than we read printed material, so larger point sizes help compensate. Second, screen fonts are rendered with a relatively small number of pixels, so each extra row of pixels improves the quality.
Yes, I know the web has a long tradition of teeny fonts. It’s time to let it go. This habit arose because the 14-inch monitors common in the 1990s had relatively coarse resolution. It persisted because web designers considered it virtuous to keep accommodating people who refused to upgrade those 14-inch monitors. But now, it’s merely silly.
Also silly is the web’s tradition of enormous point sizes for headings. This habit started with the default formatting of <h1> tags in browsers, which is about 200% of the default point size of body text. There is no typographic universe in which you need to double the point size to achieve emphasis.

Point Size in Print Nearly every book, newspaper, and magazine...

Delete Drag

LINE SPACING

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-height.

LINE SPACING

Delete Drag

LINE LENGTH

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)

LINE LENGTH

Delete Drag

Line length is the distance between the left and right edges of a text block. Overly long lines are a very common problem. But they’re easy to correct. Shorter lines will make a big difference in the legibility and professionalism of your layout.

The most useful way to measure line length is by average characters per line. Measuring in inches or centimeters is less useful because the point size of the font affects the number of characters per inch. Average characters per line works independently of point size.

Shorter lines are more comfortable to read than longer lines. As line length increases, your eye has to travel farther from the end of one line to the beginning of the next, making it harder to track your progress vertically.

Aim for an average line length of 45–90 characters, including spaces. You can check line length using word count.

How to Use Word Count

WORD 2007 & 2010 | Review → Proofing panel → Word Count (icon looks like “ABC” above “123”)

WORD 2011 | Tools → Word Count

PAGES '09 | Edit → Writing Tools → Show Statistics. If text is selected in the document, the Range popup menu lets you toggle between word counts for the selection and for the wholedocument.

Alternatively, use the alphabet test to set line length. You should be able to fit between two and three alphabets on your line, like so:

abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefgh
= 2.31 alphabets

This is especially useful when you don’t have easy access to word counts, for instance in a web layout.

Line length is the distance between the left and...

Delete Drag

FONT CHOICE

The fastest, easiest, and most visible improvement you can make to your typography is to ignore the fonts that came free with your computer (known as system fonts) and buy a professional font (like my fonts equity and concourse, or others found in 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, as those fonts are favored only by the apathetic and sloppy. Not by typographers. Not by you.

FONT CHOICE

Delete Drag

SUMMARY OF KEY RULES

Delete Drag

The four most important typographic choices you make in any document are point size, line spacing, line length, and font, because those choices determine how the body text looks.
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.
Avoid goofy fonts, monospaced fonts, and systm fonts, especially Times New Roman and Arial.
Use curly quotation marks, not straight ones.
Put only one space between sentences.
Don’t use multiple word spaces or other white-space characters in a row.
Never use underlining, unless it’s a hyperlink.
Use centered text sparingly.
Use bold and italic 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.
If you use justified text, also turn on hyphenation.
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.
Use proper trademark and copyright symbols—not alphabetic approximations.
Put a non-breaking space after paragrah and section marks.
Make ellipses using the proper character, not periods and spaces.
Make sure apostrophes point downward.
Make sure foot and inch marks are straight, not curly.

The four most important typographic choices you make in...

Delete Drag