Typography Rules Every Designer Should Know

Typography is the foundation of design. Get it right and everything else falls into place. Get it wrong and no amount of beautiful imagery or clever layout will save you. Here are the rules I live by.

1. Hierarchy Is Everything

Every piece of text on a page exists in a hierarchy. The reader's eye should flow naturally from most important to least important, without thinking about it.

You create hierarchy with four tools, in order of effectiveness:

1. Size — The most obvious. Bigger = more important.
2. Weight — Bold draws the eye before regular weight.
3. Color/contrast — High contrast text reads as primary. Muted text reads as secondary.
4. Position — Top and left are read first (in LTR languages).

The mistake most people make: using all four at once on one level, leaving no tools to distinguish secondary from tertiary content.

2. Choose Two Typefaces. Maximum.

One for headings, one for body. That's it. If you're using three or more, you almost certainly don't need them — you need better use of weight, size, and spacing within fewer families.

Safe pairings that always work:

• Geometric sans + humanist sans: Inter + Source Sans Pro
• Serif + sans-serif: Playfair Display + Inter
• Monospace + sans-serif: JetBrains Mono + Inter (great for dev/tech brands)

The cheat: one well-designed typeface with a full weight range (thin through black) can do everything. Inter, Satoshi, and General Sans are all excellent solo choices.

3. Line Length: 45–75 Characters

This is the single most ignored typography rule, and it has the biggest impact on readability. The ideal line length for body text is 45–75 characters per line. For a 16px font, that's roughly max-width: 65ch.

At wider lengths, the eye struggles to track back to the start of the next line. At narrower lengths, constant line-breaking disrupts reading flow.

4. Line Height Is Not One-Size-Fits-All

• Body text (14–18px): 1.5–1.7 line height
• Large text (24–36px): 1.2–1.4 line height
• Display text (48px+): 1.0–1.2 line height

The pattern: as font size increases, line height ratio decreases. Large display text with 1.6 line height has gaps you could drive a truck through. Small body text at 1.2 feels suffocating.

5. Whitespace > Dividers

If you're reaching for a horizontal rule or border to separate sections, try removing it and adding more space instead. In most cases, 48–64px of vertical space creates a cleaner separation than a 1px line. Dividers add visual noise. Space adds clarity.

6. Alignment: Pick One and Commit

Left-aligned text is the default for a reason — it creates a consistent left edge the eye can track. Center-aligned works for short blocks (headlines, CTAs) but becomes unreadable for paragraphs.

The cardinal sin: mixing left-aligned and center-aligned text in the same section.

7. Contrast Ratios Matter

WCAG 2.1 requires 4.5:1 contrast for normal text and 3:1 for large text. Light grey on white might look "clean" but if it fails contrast ratios, it's inaccessible.

On dark backgrounds, pure white on pure black has too much contrast and causes eye strain. Soften it: use zinc-100 on zinc-950 for comfortable reading.

8. Responsive Typography

A 72px heading that looks commanding on desktop becomes a wall of text on mobile. Use clamp() for fluid scaling:

h1 { font-size: clamp(2rem, 5vw, 4rem); }

9. Don't Stretch, Squish, or Fake It

Never horizontally scale a typeface. Never apply faux bold or faux italic. If you need bold, load the bold weight. Real type designers spend months perfecting weight distribution — don't let CSS undo that in one line.

10. Read Your Own Design

The ultimate typography test: actually read the text. Not skim — read. Out loud if possible. If you stumble, lose your place, or feel fatigued, the typography needs work.

Good typography is invisible. The reader absorbs the content without ever thinking about the typeface, spacing, or layout. That's the goal.

Working on a project that needs typographic polish? I'd love to help.