Typography Scale

What a typography scale is

A typography scale is a defined set of font sizes that relate to each other by a consistent ratio. Instead of picking sizes at random, you choose a base size and generate the rest from it, so headings, subheadings, body text, and captions form a deliberate progression. The scale is what makes text on a page feel harmonious rather than arbitrary.

The idea borrows from music, where notes sound pleasant because their frequencies relate by fixed ratios. Type behaves the same way: sizes that share a mathematical relationship feel balanced together, while a jumble of unrelated sizes feels noisy. A scale replaces guesswork with a small system that keeps every piece of text in proportion.

How a typography scale works

A scale starts with two decisions: a base size, usually the body text, and a ratio that multiplies up and divides down from it. Common ratios come from classic proportions, and each produces a different character.

• Base size: the body text size everything else is measured against, often around sixteen pixels on the web.
• Ratio: the multiplier between steps, such as 1.25 for a gentle scale or 1.5 for a dramatic one.
• Steps: each successive size, giving you h1, h2, h3, body, and small text.
• Line height: the vertical spacing paired with each size to keep text readable.

A smaller ratio produces a subtle, close set of sizes suited to dense, information rich interfaces. A larger ratio produces bold contrast between a big headline and small body text, suited to expressive marketing pages. Choosing the ratio is choosing the personality of the type.

Why a scale matters

The first benefit is hierarchy. Clear size differences tell a reader what to look at first, guiding the eye from headline to subheading to body without conscious effort. A page without a scale forces the reader to work out the structure themselves, which is exactly the friction good design removes.

The second benefit is consistency. When every size comes from the same scale, text across dozens of pages feels like one coherent system rather than a series of one off choices. This is what separates a designed site from a document where each heading was sized by whoever wrote it.

A scale also speeds up work. Once the steps are defined, sizing any piece of text is a matter of choosing a level, not inventing a number. That removes a recurring decision and prevents the slow drift toward dozens of slightly different sizes that makes a codebase hard to maintain.

Type scales and responsive design

Text cannot be one fixed size everywhere. A headline that looks commanding on a desktop can overwhelm a phone screen, so scales adapt across devices. The traditional approach changes sizes at breakpoints, stepping a heading down on smaller screens. A more modern approach uses fluid typography, where sizes scale smoothly with the viewport using CSS functions, so text feels right at every width without abrupt jumps.

Whichever method you use, the scale stays the anchor. You are not choosing new sizes on mobile, you are expressing the same hierarchy at a size that suits the screen. Accessibility matters here too: respecting a readable minimum size and using relative units so users can enlarge text keeps a scale usable for everyone, not just those with perfect eyesight.

Type scales in tokens and no-code tools

In a modern workflow the scale is stored as design tokens: each step becomes a named variable such as text-lg or heading-1, applied by reference throughout the product. This means the scale can be adjusted in one place, and it stays perfectly consistent because nobody types raw sizes. It is the same token principle that governs color and spacing, applied to type.

No-code tools support this directly. Webflow lets you define text styles and variables so a scale is applied site wide and changed globally, and Figma text styles do the same in design, keeping the mockup and the build in sync. The common mistake is bypassing the scale to nudge a single size for one component, which quietly erodes the system. The discipline is to add a step to the scale if you truly need it, rather than sprinkling exceptions that no one else can predict.

Typography scales at BeBranded

At BeBranded we define a typography scale at the start of every project, because consistent type is one of the clearest signals of a professional site. We choose a base size and ratio that fit the brand, generate the steps for headings and body, and store them as text styles and variables in Figma and Webflow so they stay identical across every page. We make the scale responsive, adjusting sizes for smaller screens while keeping the same hierarchy, and we respect readable minimums so the text works for every visitor. Because the scale lives as tokens, refining it later is a single change rather than a page by page edit. The result is text that reads clearly, guides the eye, and feels like part of one coherent system from the first heading to the smallest caption.