Typographic Details - Using Correct Spaces and Punctuation

One of the principles of durable typography is always legibility; another is something more than legibility: some earned or unearned interest that gives its living energy to the page. It takes various forms and goes by various names, including serenity, liveliness, laughter, grace and joy. Robert Bringhurst

Welcome to this quick cheat sheet that will you help you know which spaces, punctuation and characters to use to make your web typography great! Much of this content has been adapted from Richard Rutter's excellent handbook Web Typography.

Use the right spaces

Non-breaking space

Use a non-breaking space to keep words together on the same line. This prevents awkward line breaks between closely related elements, such as labels and numbers.

Page 2.

Thin space

Use a thin space to separate characters when a regular space is too big. This maintains typographic rhythm by creating subtle breathing room but avoiding excessive spacing.

Looking up he said, “She mouthed ‘I love you’ ” and then returned to his book.

Hair space

Use a hair space to prevent adjacent characters touching. This adds just enough separation to avoid visual collisions between initials without disrupting flow.

D. H. Lawrence.

Narrow no-break space

Use a narrow no-break space to prevent initials or numbers and their units from wrapping across two lines.

A hair space is 1/24 em wide.

Use the right punctuation marks

Hyphen

Use a hyphen for one of the following:

• joining words to indicate they have a combined meaning
• indicating missing words shared by a series of compounds
• indicating stuttering speech
• splitting words when breaking them across lines

Example: She wore a well-tailored jacket.

Figure dash

A figure dash has the same width as a numerical digit and is used within numbers to maintain alignment.

Example: (800‒555‒1212)

En dash

An en dash indicates range with spacing that visually balances the digits it connects.

Example: 4–5 minutes.

Em dash

Use an em dash to set off phrases. Separate em dashes from phrases with hair spaces. You can also use to indicate attribution after a quote, followed by a full space.

Example: this and that — that and this.

Minus symbol

The minus symbol is longer and sits at the mathematical midpoint—unlike the shorter hyphen.

Multiplication symbol

A proper multiplication sign avoids confusion with the letter “x” and aligns better with numerals.

Obelus

The obelus is the correct symbol for division, with visual weight that centers between operands.

Quotation marks & apostrophes

Use proper quotation marks and apostrophes (not straight marks).

Ellipsis

The proper ellipsis character (instead of three individual dots) ensures consistent spacing and baseline alignment across typefaces.

Primes

Prime marks indicate units like inches and minutes; straight apostrophes are typographic imposters.

Degree symbol

The proper degree symbol is smaller and raised—distinct from a lowercase o.

Parentheses

Parentheses and brackets are not designed to be italicized; they retain proper shape and spacing when set in roman.

Use the right characters

To learn what characters to use, read my article about better typography with font variants.