Typography basics: size, weight, spacing and rhythm

Typography basics come down to six decisions: the size of each piece of text, its weight, the line height, the letter spacing, the alignment and the line length. Get those right and almost any decent typeface looks professional; get them wrong and the best font in the world looks amateur. Each has a sensible default, given below, that you can depart from on purpose.

Size: use a type scale

Picking sizes one at a time leads to a page full of nearly-the-same sizes, and no clear order. A type scale fixes that: start from a base size and multiply by the same ratio for each step up. The ratio sets the character. Small ratios, like 1.2, feel calm and dense; large ones, like 1.5, feel dramatic and editorial.

:root {
  --step--1: 0.8rem;     /* 12.8px */
  --step-0: 1rem;        /* 16px   */
  --step-1: 1.25rem;     /* 20px   */
  --step-2: 1.5625rem;   /* 25px   */
  --step-3: 1.953rem;    /* 31.25px */
  --step-4: 2.441rem;    /* 39px   */
  --step-5: 3.052rem;    /* 48.8px */
}

body { font-size: var(--step-0); }
h3   { font-size: var(--step-2); }
h2   { font-size: var(--step-3); }
h1   { font-size: var(--step-5); }

On social posts the canvas is larger, so the numbers are bigger but the idea is the same. On a 1080-pixel-wide post, a headline of around 90 to 120 pixels and a detail line of around 40 to 56 keeps a clear step between them and reads on a phone.

Weight: fewer weights, clearer steps

Weight is the thickness of the strokes, usually numbered from 100 (thin) to 900 (black), with 400 as regular and 700 as bold. Two or three weights are enough for most designs. The key is that neighbouring weights must look different: regular against bold reads as a deliberate contrast, regular against medium often reads as a mistake.

Line height: room between lines

Line height, or leading, is the distance from one line to the next. Body text needs air to be read comfortably: about 1.4 to 1.6 times the font size is a reliable range. Large headlines need less, around 1.0 to 1.2, because at big sizes the gaps look much wider than they are. Long lines need a little more line height than short ones, so the eye can find the start of the next line. Line height and line length goes deeper.

Letter spacing: mostly leave it alone

Typefaces are spaced by their designers for their intended sizes, so body text rarely needs adjusting. Two exceptions are worth knowing. Large headlines often look better slightly tighter, a small negative value such as -0.01em to -0.02em. Text in capitals, and small labels, need the opposite: a little extra space, around 0.05em to 0.1em, because capitals were designed to sit next to lowercase letters. Letter spacing covers the details.

Alignment

Left-aligned text, with a ragged right edge, is the default for a reason: every line starts in the same place, so the eye finds it easily. Centred text suits short pieces, like a headline, a quote or an invitation, and becomes tiring beyond a few lines. Justified text looks neat in print where the software can hyphenate well, but on the web it often opens uneven gaps between words.

Line length: the measure

The length of a line, the measure, matters as much as its size. Lines that are too long make it hard to find the next one; lines that are too short break the reading rhythm with constant returns. A range of about 45 to 75 characters per line is the one most often recommended for body text. On the web, the ch unit makes this easy.

article p {
  max-width: 65ch;   /* about 65 characters per line */
  line-height: 1.55;
}

h1 {
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance; /* evens out headline lines where supported */
}

.label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--step--1);
}

Rhythm: spacing that groups

Space tells readers what belongs together. A heading should sit closer to the paragraph it introduces than to the one before it, so put more space above headings than below. Keep paragraph spacing consistent, and use one spacing unit, often based on the body line height, throughout. When space is used consistently, the page gains a rhythm that makes it feel calm even when it's full. Visual hierarchy builds on this.

1. 1

   Choose a body size

   16 pixels or larger on screens; much larger on social posts.

2. 2

   Pick a scale ratio

   1.2 for calm and dense, 1.25 for most things, 1.333 or more for editorial drama.

3. 3

   Set two weights

   Regular for reading, bold or semibold for emphasis and headings.

4. 4

   Set line heights

   About 1.5 for body, about 1.1 for large headlines.

5. 5

   Limit the measure

   Around 65 characters for body text.

6. 6

   Space with a unit

   One spacing step, reused, with more space above headings than below.

With these in place, the choice of typeface becomes the fun part rather than the fix. Start with font pairing and serif vs sans serif.