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

Name	Entity	When to use	Example
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

Name	Entity	When to use	Example
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 dash	–	Use an en dash in phrases with numerical ranges.	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.	this and that — that and this.
Minus symbol	−	Use 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.
Ellipsis	…	Always 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 symbol	50°.
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.