Skip to main content
Nebula Craft
WorkServicesApproachNotes
All field notes

Web Design / 7 min read / March 12, 2026

Typography hierarchy

Most sites use 2 font sizes; premium sites use deliberate type scales. Here is how to build hierarchy that works.

Web Design
On this page

Read slowly. The useful part is usually in the decision behind the surface.

Why most sites feel cheap

type-scale

Most websites use three font sizes: a hero headline, a subheading, and body text. Sometimes a small label. This is the typographic equivalent of a diet, technically functional, but missing the nuance that makes something feel alive. Premium websites use a deliberate set of type sizes, each with a purpose in the hierarchy.

The reason this matters is that typography is the primary carrier of tone and personality on a page. Before a visitor reads a single word, the size, weight, spacing, and arrangement of type tells them something about the brand. Dense, small type reads as technical and detailed. Large, open type reads as confident and modern. Tight tracking reads as editorial. Wide tracking reads as accessible. Every decision is a signal.

Before a visitor reads a word, the arrangement of type tells them something about the brand.

Building a type scale that works

grid-anatomy

A type scale is a set of defined sizes that increase by a consistent ratio. Common ratios are 1.25 (Major Third), 1.333 (Perfect Fourth), and 1.5 (Perfect Fifth). The larger the ratio, the more dramatic the contrast between levels. A more pronounced ratio can create stronger hierarchy, but the right scale depends on the content and viewing distance.

The key is assigning each scale step a semantic role and using each role consistently. Display sizes (the largest two or three) are for hero headlines and section titles. Heading sizes (the middle steps) are for content headers and feature callouts. Body sizes (the smallest steps) are for content, labels, and UI elements. Mixing these roles breaks the hierarchy. Maintaining them creates a page that reads naturally without the visitor noticing the structure.

FROM THE STUDIO

Sound familiar? We can help shape the next move.

The details that make the difference

Line height, letter spacing, and measure (line length) are where type scales go wrong at the detail level. The rule of thumb is: larger type needs tighter line height and tighter letter spacing; smaller type needs looser line height and neutral letter spacing. At display sizes, line heights of 1.0-1.15 with tracking of -0.02em to -0.04em feel modern and controlled. At body sizes, line heights of 1.6-1.8 with neutral tracking make content readable.

Measure, the number of characters per line, is the most underrated typographic decision. A bounded reading measure is often more comfortable than a full-width paragraph. Layouts that stretch body text to full container width on large screens are not just aesthetically weaker; they're actively harder to read. Max-width constraints on body copy aren't a design choice, they're a readability requirement.

A considered line length helps the reader keep their place.

UP NEXT / Motion

Motion design with a reason
Nebula CraftIndependent creative engineering

A good place to begin

Let's make it useful.

Services

  • Websites
  • Software
  • E-commerce
  • Automation
  • Agentic as a Service

Explore

  • Selected work
  • Notes
  • Questions

Company

Nebula Craft Design LtdCompany No. 17180534 · Registered in England and WalesRegistered office: 61 Bridge Street, Kington, HR5 3DJ, United Kingdom
© 2026 Nebula Craft Design Ltd. All rights reserved.
PrivacyTermsCookiesAccessibilityLegal notice