April 20, 2025

html
typography

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

Prevents an awkward line break between closely related elements, such as labels and numbers.

Use a non-breaking space to keep words together on the same line.

Page&nbsp;2.

Thin space

Maintains typographic rhythm by creating subtle breathing room where standard spacing feels excessive.

Use a thin space to separate characters when a regular space is too big.

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

Hair space

Adds just enough separation to avoid visual collisions between initials without disrupting flow.

Use a hair space to prevent adjacent characters touching.

D.&hairsp;H.&hairsp;Lawrence.

Narrow no-break space

Keeps fine-grained units intact on a single line while preserving typographic tightness.

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&#8239;em wide.

Use the right punctuation marks

Hyphen

A hyphen joins compound words without altering rhythm or spacing of surrounding characters.

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.

En dash

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

Use an en dash in phrases with numerical ranges.

Example: 4–5 minutes.

Em dash

The em dash marks interruption or emphasis—spaced just enough to breathe but not break.

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.

Use a proper minus glyph to mean minus.

Multiplication symbol

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

Use a proper multiplication sign (not x).

Obelus

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

Use an obelus to indicate division.

Quotation marks & apostrophes

Quotation marks and apostrophes should curl inward and reflect the structure of the sentence—not the keyboard.

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

Ellipsis

The ellipsis character ensures consistent spacing and baseline alignment across typefaces.

Always use the correct ellipsis character instead of typing three individual dots.

Primes

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

Use primes to indicate feet and inches, minutes and seconds (not straight marks).

Degree symbol

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

Use a proper degree symbol.

Parentheses

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

Use for clarification or an aside. Don't italicize parentheses or brackets.

Use the right characters

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