Skip to content
Jonathan Harrell

Article tags

  • css
  • typography

Typographic Details Cheat Sheet

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, characters and numbers 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

NameEntityWhen to useExample
Non-breaking space Use a non-breaking space to keep words together on the same line.Page 2.
Thin space Use a thin space to separate characters when a regular space is too big.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.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

NameEntityWhen to useExample
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
She wore a well-tailored jacket.
En dashUse an en dash in phrases with numerical ranges.4–5 minutes.
Em dashUse 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.this and that — that and this.
Minus symbolUse a proper minus glyph to mean minus.10−7=3.
Multiplication symbol×Use a proper multiplication sign (not x)4×4.
Obelus÷Use an obelus to indicate division.6÷2=3.
Quotation marks‘ ’ “ ”Use the proper quotation marks and apostrophes (not straight marks)“Typography isn’t just about looks,” she said.
EllipsisAlways use the correct ellipsis character instead of typing three individual dots.I’m not sure… maybe we should wait.
Primes′ ″Use primes to indicate feet and inches, minutes and seconds (not straight marks)He was 6′4″.
Degree symbol°Use a proper degree symbol50°.
Parentheses( )Use for clarification or an aside. Don't italicize parentheses or brackets.Nobody (save the other craftsmen) will appreciate half your skill.

NOTE: You can use the above characters directly in your code without needing to use an HTML entity. If you are using a Mac, open your symbol viewer and pop in the correct character.

Use the right characters

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

Subscribe

Want more front-end tips and tricks? Sign up for my newsletter to stay up-to-date.