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

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

Space type HTML entity
Non-breaking  
Thin  
Hair  
Narrow no-break  

Use the right punctuation marks

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);