Web typography cheat sheet

Body copy size — should never be smaller.

110% for large screens.

120% for extra large screens.

Body line-height — looser on the web.

1.3 for small screens.

1.4 for medium screens.

1.5 for large screens.

Body maximum line-length.

Shorter on small screens is okay.

Based on the font-size set in the html element.

1.5rem is 1.5 × the html element’s font size.

Based on the font-size of the parent (or current element).

1em is 1 × the parent element’s size.

0.5em is 0.5 × the parent element’s size.

Percentage

A percentage of the font-size of the parent element.

80% is to 80% the size of the parent element.

Viewport height

Allows you to change the type size based on the height of the window.

Viewport width

Allows you to change the type size based on the width of the window.

CSS pixels—different sizes for every device.

16px is exactly 16 pixels in all situations.

Avoid using pixels for font sizes unless absolutely necessary.

The colour of the text.

color: red;

☛ See CSS colour reference.

Change the typeface of the text.

Put quotes around typefaces with spaces in their names.

Always provide a fallback typeface.

Web safe fonts: Georgia, Arial, Verdana, Times, Comic Sans, Courier.

font-family: "Open Sans", sans-serif;

Change the size of the text.

Prefer rem or em units.

font-size: 1.5rem;

Change the thickness of the text.

bold, normal, number: 400, 700, etc.

font-weight: bold;

Change the slanting of the text.

italic, normal

font-style: italic;

Adjust the space a line takes up, similar to leading.

Set in a number, a multiplier of the font size.

line-height: 1.4;

Adjust the position of the text within its parent.

left, right, center, justify

text-align: center;

Add or remove lines on the text.

none, underline, line-through, overline

text-decoration: none;

Change the capitalization of the text.

uppercase, lowercase, capitalize

text-transform: uppercase;

Indent the first line of text.

Set the number in ems.

text-indent: .8em;

Add a drop shadow to the text.

Needs four properties: horizontal offset, vertical offset, blur radius, colour.

Use a comma after the colour to add more than one shadow.

text-shadow: 2px 2px 5px rgba(0,0,0,.5);

Determine what happens to the text if it’s too wide for its box.

Often requires overflow: hidden; to be used.

ellipsis, clip, custom: "."

text-overflow: ellipsis;

Control the style of bullets on a list.

none, circle, disc, square, decimal, lower-alpha, lower-roman, lower-greek

list-style-type: square;

Shorthand property for specifying lots of font details.

Syntax: font: [font-style] [font-variant] font-weight font-size/line-height font-family;

font: normal 100%/1.5 sans-serif;

Controls the space between the different letters.

letter-spacing: .3em;

Controls the space between the different words.

word-spacing: 1em;

Controls how the text wraps.

normal, nowrap, pre

white-space: nowrap;

Controls whether the browser is allowed to break really long words.

normal, break-word

word-wrap: break-word;

Select the first line of text.

Good for highlighting the first line of a paragraph.

p::first-line {}

Select the first character in the text.

Good for drop caps.

p::first-letter {}

Not a property, but a selector.

Style an element when it has been selected and highlighted.

::selection {
  color: red;
}

Set to the number of columns wanted in the text block.

column-count: 2;

Set the amount of space between the columns.

column-gap: 1.5rem;

Create a vertical border between each column.

Exact same 3 values as a border.

column-rule: 2px solid #e2e2e2;

<main class="main">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</main>

.main {
  column-count: 2;
  column-gap: 1.5rem;
  column-rule: 2px solid #e2e2e2;
}

Control if the text will be hyphenated.

Usually requires text-align: justify.

none, auto

Example: hyphens: auto;

Control a font’s built-in kerning metrics.

none, normal, auto

Example: font-kerning: auto;

Control whether ligatures are used or not.

none, normal, specific: common-ligatures, contextual, etc.

Example: font-variant-ligatures: normal;

Enable/disabled alternative glyphs for numbers & fractions.

normal, ordinal, slashed-zero, oldstyle-nums, tabular-nums, etc.

Example: font-variant-numeric: oldstyle-nums;

Control whether small caps are used or not.

normal, small-caps

Example: font-variant-caps: small-caps;

Controls a bunch of the font-variant properties automatically.

Has extreme performance issues.

Example: text-rendering: optimizeLegibility;

Double curly quote.

“— Mac:⌥[

”— Mac:⌥⇧]

Single curly quote, apostrophe.

‘— Mac:⌥]

’— Mac:⌥⇧]

Double guillemet.

«— Mac:⌥\

»— Mac:⌥⇧\

Single guillemet.

‹— Mac:⌥⇧3

›— Mac:⌥⇧4

En-dash.

Mac:⌥-

Em-dash.

Mac:⌥⇧-

Bullet.

Mac:⌥8

Middle dot.

Mac:⌥⇧9

Degree.

Mac:⌥⇧8

Ellipsis.

Mac:⌥;

Numero.

Mac:⌥⇧;

Pilcrow.

Mac:⌥7;

Double dagger.

Mac:⌥⇧7;

Cents.

Mac:⌥4

Section.

Mac:⌥5

Copyright.

Mac:⌥G