The Elements of Typographic Style Applied to the Web

Define the word space to suit the size and natural letterfit of the font

Tue, 14 Jun 2005 08:57:59 PST

If text is set ragged right, the word space (the space between words) can be fixed and unchanging. If the text is justified (set flush left and right), the word space must be elastic. In either case the size of the ideal word space varies from one circumstance to another, depending on factors such as letterfit, type color, and size. A loosely fitted or bold face will need a larger interval between the words. At larger sizes, when letterfit is tightened, the spacing of words can be tightened as well.

Don't stretch the space until it breaks

Mon, 27 Jun 2005 08:45:18 PST

Lists, such as contents pages and recipes, are opportunities to build architectural structures in which space between the elements both separates and binds. The two favourite ways of destroying such an opportunity are setting great chasms of space that the eye cannot leap without help from the hand, and setting unenlightening rows of dots that force the eye to walk the width of the page like a prisoner being escorted back to its cell.

Choose a comfortable measure

Thu, 16 Jun 2005 09:20:06 PST

Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.

Set ragged if ragged setting suits the text and page

Mon, 20 Jun 2005 09:20:48 PST

In justified text, there is always a trade-off between evenness of word spacing and frequency of hyphenation.

Narrow measures – which prevent good justification – are commonly used when the text is set in multiple columns. Setting ragged right under these conditions will lighten the page and decrease its stiffness.

Many unserifed faces look best when set ragged no matter what the length of the measure. And mono-spaced fonts, which are common on typewriters, always look better set ragged.

Use a single word space between sentences

Mon, 20 Jun 2005 19:05:47 PST

In the nineteenth century, which was a dark and inflationary age in typography and type design, many compositors were encouraged to stuff extra space between sentences. Generations of twentieth century typists were then taught to do the same, by hitting the spacebar twice after every period [full stop]. Your typing as well as your typesetting will benefit from unlearning this quaint Victorian habit. As a general rule, no more than a single space is required after a period, colon or any other mark of punctuation.

Add little or no space within strings of initials

Mon, 27 Jun 2005 08:41:26 PST

Names such as W.B. Yeats and J.C.L. Prillwitz need hair spaces, thin spaces or no spaces at all after the intermediary periods [full stops]. A normal word space follows the last period in the string.

Letterspace all strings of capitals and small caps, and all long strings of digits

Mon, 27 Jun 2005 08:42:08 PST

Acronyms such as CIA and PLO are frequent in some texts. So are abbreviations such as CE and BCE or AD and BC. The normal value for letterspacing these sequences of small or full caps is 5% to 10% of the type size.

Many typographers like to letterspace all strings of numbers as well, Spacing is essential for rapid reading of long, fundamentally meaningless strings such as serial numbers, and is helpful even for shorter strings such as phone numbers and dates.

Don't letterspace the lower case without a reason

Mon, 27 Jun 2005 08:42:42 PST

A man who would letterspace lower case would steal sheep, Frederic Goudy liked to say. The reason for not letterspacing lower case is that it hampers legibility. But there are some lowercase alphabets to which this principle doesn’t apply. Moderate letterspacing can make a face such as lowercase Univers bold condensed more legible rather than less.

Kern consistently and modestly or not at all

Mon, 27 Jun 2005 08:43:32 PST

Kerning – altering the space between selected pairs of letters – can increase consistency of spacing in a word like Washington or Toronto, where the combinations Wa and To are kerned.

Don't alter the widths or shapes of letters without cause

Mon, 27 Jun 2005 08:44:41 PST

In the world of digital type, it is very easy for a designer or compositor with no regard for letters to squish them into cattle trains and ship them to slaughter.

Choose a basic leading that suits the typeface, text and measure

Fri, 14 Jul 2006 17:33:43 PST

Vertical space is metered in a different way [to horizontal space]. You must choose not only the overall measure – the depth of the column or page – but also a basic rhythmical unit. This unit is the leading, which is the distance from one baseline to the next.

Add and delete vertical space in measured intervals

Wed, 30 Aug 2006 20:37:21 PST

Headings, subheads, block quotations, footnotes, illustrations, captions and other intrusions into the text create syncopations and variations against the base rhythm of regularly leaded lines. These variations can and should add life to the page, but the main text should also return after each variation precisely on beat and in phase.

Set opening paragraphs flush left

The function of a paragraph indent is to mark a pause, setting the paragraph apart from what precedes it. If a paragraph is preceded by a title or subhead, the indent is superfluous and can therefore be omitted.

In continuous text mark all paragraphs after the first with an indent of at least one en

Ornaments [...] drop lines [...] outdented paragraphs [...] and others, have their uses but the plainest, most unmistakable yet unobtrusive way of marking paragraphs is the simple indent.

Add extra lead before and after block quotations

Sat, 04 Nov 2006 17:20:18 PST

However the block quotations are set, there must be a visual distinction between main text and quotation, and again between the quotation and subsequent text.

Indent or center verse quotations

Wed, 10 Jan 2007 20:30:01 PST

Verse is usually set flush left and ragged right, and verse quotations within prose should not be deprived of their chosen form. But to distinguish verse quotations from surrounding prose, they should be indented or centered on the longest line.

At hyphenated line-ends, leave at least two characters behind and take at least three forward

Wed, 10 Jan 2007 20:35:18 PST

Fi-nally is a conventionally acceptable line-end hyphenation, but final-ly is not, because it takes too little of the word ahead to the next line.

Avoid more than three consecutive hyphenated lines

Sat, 07 Apr 2007 13:34:13 PST

Hyphenate according to the conventions of the language

Wed, 11 Apr 2007 14:32:55 PST

In English one hyphenates cab-ri-o-let but in French ca-brio-let. The conventions of the individual language should, ideally, be followed even for single foreign words or brief quotations.

Link short numerical and mathematical expressions with hard spaces

Wed, 10 Jan 2007 20:36:36 PST

Hard spaces are useful for preventing line-breaks within phrases such as 6.2 mm, 3 in., 4 × 4, or in phrases like page 3 and chapter 5.

Never begin a page with the last line of a multi-line paragraph

Fri, 17 Aug 2007 16:52:28 PST

The stub-ends left when paragraphs end on the first line of a page are called widows. They have a past but not a future, and they look foreshortened and forlorn.

Don't compose without a scale

Mon, 04 Feb 2008 18:14:55 PST

In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years. [...] Use the old familiar scale, or use new scales of your own devising, but limit yourself, at first, to a modest set of distinct and related intervals.

Use titling figures with full caps, and text figures in all other circumstances

Wed, 16 Apr 2008 16:15:04 PST

When arabic numerals joined the roman alphabet, they too were given both lowercase and uppercase forms. Typographers call the former text figures, hanging figures, lowercase figures, or old-style figures (OSF for short) and make a point of using them whenever the surrounding text is set in lowercase letters or small caps. The alternative forms are called titling figures, ranging figures or lining figures, because they range or align with the upper case.
[...]
[Text figures] are basic parts of typographic speech, and they are a sign that dollars are not really twice as important as ideas, and numbers are not afraid to consort on an equal footing with words. [...] However common it may be, the use of titling figures in running text is illiterate: it spurns the truth of letters.