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
Introduction
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
- Use a non-breaking space to keep words together on the same line.
Example: Page 2. - Use a thin space to separate characters when a regular space is too big. One use is separating nested quotation marks.
Example: Looking up he said, “She mouthed ‘I love you’ ” and then returned to his book. - Use a hair space to prevent adjacent characters touching.
Example: D. H. Lawrence. - Use a narrow no-break space to prevent initials or numbers and their units from wrapping across two lines.
Example: A hair space is 1/24 em wide.
| Space type | HTML entity |
|---|---|
| Non-breaking | |
| Thin |   |
| Hair |   |
| Narrow no-break |   |
Use the right punctuation marks
- 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
- Use an en dash in phrases with numerical ranges.
Example: 4–5 minutes. - 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. - Use a proper minus glyph to mean minus.
Example: 10−7=3. - Use an obelus to indicate division.
Example: 6÷2=3. - Use the proper quotation marks and apostrophes: ‘ ’ and “ ”
- Don't italicize parentheses or brackets.
Example: Nobody (save the other craftsmen) will appreciate half your skill. - Use a proper ellipsis: …
- Use a proper multiplication sign
Example: 4×4 - Use primes to indicate feet and inches, minutes and seconds.
Example: He was 6′4″. - Use a proper degree symbol
Example: 50°.
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
Common/Standard Ligatures
You should use these in most circumstances. They are enabled by default in most browsers.
fight office flight fjord
fight office flight fjord
font-variant-ligatures: common-ligatures;Discretionary ligatures
Use to achieve a special typographic effect.
ct sp st
ct sp st
font-variant-ligatures: discretionary-ligatures;Contextual ligatures
Use to better harmonize the shapes of grouped glyphs.
The bloom has gone off the rose
The bloom has gone off the rose
font-variant-ligatures: contextual;Small Caps
Use when capitalizing words in running text.
operates jpl for nasa programs
operates JPL for NASA programs
font-variant-caps: small-caps;All Small Caps
Converts both upper and lowercase letters to small caps. Typically you will want to use this instead of small caps.
convert All Letters to small caps
convert All Letters to small caps
font-variant-caps: all-small-caps;Use the right numbers
Lining numerals
Use in headings. These are enabled by default.
1912 Ditching Sussex
1912 Ditching Sussex
font-variant-numeric: lining-nums;Old-style numerals
Use in running text.
For nearly 50 years the Swiss type designer Adrian Frutiger, born in 1928, was a hugely infuential figure in typography.
For nearly 50 years the Swiss type designer Adrian Frutiger, born in 1928, was a hugely infuential figure in typography.
font-variant-numeric: oldstyle-nums;Tabular lining numerals
Use in numeric tables.
| Tabular | Proportional |
|---|---|
| 409,280 | 409,280 |
| 367,112 | 367,112 |
| 155,068 | 155,068 |
| 171,792 | 171,792 |
font-variant-numeric: lining-nums tabular-nums;User proper subscripts and superscripts
Use to overwrite browser default styling of sub and sup elements. Currently only supported in Firefox.
Caffeine1 is C8H10N4O2.
Caffeine1 is C8H10N4O2.
font-variant-position: sub;
font-variant-position: super;Fractions
Use to properly style fractions.
Add 13/4 C of flour, 1/2 cup at a time.
Add 13/4 C of flour, 1/2 cup at a time.
font-variant-numeric: diagonal-fractions;Ordinals
Use to properly display ordinals.
Prizes will be awarded to 1st, 2nd, and 3rd place winners.
Prizes will be awarded to 1st, 2nd, and 3rd place winners.
font-variant-numeric: ordinal;Slashed zero
Use for stylistic effect.
0123456789
0123456789
font-variant-numeric: slashed-zero;Use optional letterforms
Historical Forms
Use for a “period” effect.
The glass is 1/2 full.
The glass is 1/2 full.
font-variant-alternates: historical-forms;Stylistic Alternates & Stylesets
Use to select alternate glyphs with various stylistic features.
His accomplice & getaway driver
His accomplice & getaway driver
font-variant-alternates: stylistic(feature-value-name);
font-variant-alternates: styleset(feature-value-name);
font-variant-alternates: character-variant(feature-value-name);Swashes
Use in headings for a flourish effect.
Margarita
Margarita
font-variant-alternates: swash(feature-value-name);