When a client says a site "doesn't feel right," it's rarely the typeface. It's usually that every piece of text on the page is fighting for the same amount of attention. A headline, a subheading, a caption, and a body paragraph all set at similar weights and sizes read as one undifferentiated block — technically readable, but the eye has no idea where to start.
Hierarchy is the fix, and it's mostly a structural problem, not a font-shopping problem. You can build a strong hierarchy with two typefaces and four sizes. You can also fail with twelve.
Start with a scale, not a font
Before picking typefaces, decide how many levels of text your site actually needs. Most pages need fewer than people assume:
- Display — page titles, hero headlines. Used sparingly.
- Heading — section titles within a page.
- Body — the paragraph text people actually read.
- Meta — captions, timestamps, labels, footnotes.
A modular scale — where each size is the previous size multiplied by a fixed ratio, commonly somewhere between 1.15 and 1.333 — keeps these four levels feeling related instead of arbitrary. Pick a ratio, apply it consistently, and resist the urge to introduce a "just this once" font size in the middle of a build.
Two type families, three jobs
A common, durable pattern:
| Role | Typeface style | Used for |
|---|---|---|
| Display | A serif or characterful sans with real personality | Headlines, pull quotes |
| Body | A neutral, high-legibility sans or serif | Paragraphs, UI text |
| Utility | A monospace or condensed face | Labels, timestamps, code, meta |
The utility role is the one most sites skip, and it's a cheap way to add hierarchy. A monospace label on a date or category tag instantly reads as "system text" rather than "content," which frees the display and body faces to do less work distinguishing themselves.
Weight and color do more than size
Before making something bigger, try making it bolder, or making everything around it quieter.
Increasing font size is the most obvious way to create emphasis, and also the fastest way to run out of room. Two underused alternatives:
- Weight contrast. A 600-weight label next to 400-weight body text creates a clear distinction without changing the type scale at all.
- Color and opacity. Dropping meta text to a muted gray — rather than shrinking it further — signals "secondary" without hurting legibility the way tiny text does.
Line length is part of hierarchy
Body copy set at 45–75 characters per line reads fastest; most usability research over the years has converged somewhere in that range. On a wide desktop layout, that usually means body text should not run the full width of the content column — constrain it, even if headings and images are allowed to stretch wider. That width contrast is itself a hierarchy signal: full-width elements read as structural, constrained text reads as "read me."
Quick check
Squint at your homepage, or shrink the browser zoom to 50%. If you can still tell which text is the headline, which is the subheading, and which is body copy, your hierarchy is working. If everything blurs into the same gray mass, that's the fix to prioritize before touching color or imagery.
Common mistakes worth naming
- Too many sizes. Five or six font sizes on one page usually means the scale wasn't planned; it accumulated.
- Centered body text. Centering works for short headlines. For paragraphs, it breaks the eye's left-edge anchor and slows reading.
- Low contrast for "style." Light gray text on white looks clean in a mockup and fails an accessibility check in production. Aim for at least a 4.5:1 contrast ratio for body text.
- Letter-spacing on body copy. Tracking looks good on all-caps labels in small doses. Applied to paragraph text, it just slows reading down.
Good type hierarchy is mostly invisible. Nobody compliments a site on its font sizing. They just find it easy to read, and move through it faster than they expected to.