Building a Modular Type Scale for Posters

A poster usually needs several distinct sizes of type — a headline, maybe a subhead, some body copy, and a small credit or caption line — and it's tempting to just pick each size by eye until it looks about right. The trouble is that "about right" sizes chosen independently rarely relate to each other in any consistent way, and the layout ends up feeling arbitrary even if no individual size is wrong on its own. A modular type scale fixes this by deriving every size in the hierarchy from one base size and one ratio.

The idea, borrowed from music

A modular scale works by repeated multiplication: pick a base size, pick a ratio, and every step up multiplies the previous size by that ratio, while every step down divides by it. The formula is simply size at step n equals the base size times the ratio raised to the power of n. The named ratios most scale tools offer — minor second (1.067), major second (1.125), minor third (1.2), major third (1.25), perfect fourth (1.333), perfect fifth (1.5), the golden ratio (1.618) — borrow their names directly from musical intervals, because the underlying math (repeating a fixed multiplicative interval) is the same idea in both domains.

Choosing a ratio for the composition

A small ratio, like a minor second or major second, produces closely spaced sizes — useful in dense interfaces or documents with many levels of hierarchy that all need to sit close together. A large ratio, like a perfect fifth or the golden ratio, produces dramatic jumps between sizes, which suits a poster where you want one commanding headline, one clearly smaller supporting line, and not much in between. There's no universally correct ratio; it's a decision about how much visual contrast you want between hierarchy levels, and it's worth generating a scale at two or three different ratios on the same base size just to compare how the results feel.

Working from a sensible base

The base size is usually your reference point — often body text or a caption size, since that's the size you'll use the most and want to be comfortable, legible, and unremarkable. Steps up from the base generate your headline and display sizes; steps down generate your fine print, captions, and credit lines. Anchoring the scale to body text (rather than, say, the headline) tends to keep the whole hierarchy legible, since it's easy to build an impressive-looking headline size and then realise the body text derived from it is uncomfortably small or large.

You don't need every step

A generated scale might produce eight or ten sizes across its full range, but most layouts only use three or four of them — say, the base, two steps up for a headline, and one step down for a caption. Treat the full scale as a menu of harmonious options rather than a checklist you need to use in its entirety. The value isn't in using every size; it's in knowing that whichever sizes you do pick will relate to each other by the same consistent ratio, so the layout reads as considered rather than arbitrary.

A practical example

Take a 16px base size and a major third ratio (1.25). Two steps up gives a subhead at 25px; four steps up gives a headline at roughly 39px; one step down gives a caption at about 12.8px. Every one of those sizes is mathematically related to every other, so if you later decide the base needs to be a little bigger for a larger print run, you can regenerate the whole scale from the new base and every size updates in proportion — no need to eyeball four or five sizes all over again from scratch.

This is the real payoff of a modular scale: not just that the initial sizes look considered, but that the whole hierarchy stays easy to adjust and re-derive as a project evolves.

Why the numbers you actually use are rounded

A modular scale's underlying math produces exact, often fractional pixel values — step three of a major third scale from a 16px base comes out to 31.25px, not a tidy whole number. In practice, most workflows round each generated size to the nearest whole pixel (or the nearest half-pixel, in print contexts working in points) before it goes anywhere near a layout, since fractional pixel values render inconsistently across browsers and fractional point values are awkward to typeset by hand. Rounding a generated scale doesn't undo its usefulness — the sizes still relate to each other by very close to the original ratio — but it's worth doing deliberately and consistently rather than letting each design tool round differently, since a scale that's 31px in one file and 31.25px in another has quietly stopped being the same scale.

A type scale and a baseline grid are two different disciplines

It's easy to assume that once you have a type scale, your line heights are solved too, but the two systems answer different questions. A type scale tells you how large each piece of text should be; a baseline grid tells you where each line's baseline should fall so that different-sized text blocks stay in vertical rhythm with each other. In practice they work together: you'd typically derive a line height for each scale step (often using a leading multiplier appropriate to that step's role — text sizes get more generous leading, display sizes get tighter leading) and then snap each of those line heights to the nearest whole multiple of your page's baseline unit. Treat the scale as answering "how big" and the grid as answering "how the lines line up," and use both together rather than expecting one to substitute for the other.

When it's correct to break the scale

A modular scale is a tool for consistency, not a law of physics, and there are legitimate reasons to deviate from it. Body text has a practical comfort floor — most readers find text under roughly 14-16px genuinely uncomfortable to read at length, regardless of what a generated scale step happens to land on, so if your scale's nearest step to "body text" comes out smaller than that, it's reasonable to nudge that one size manually rather than force discomfort in the name of mathematical purity. Likewise, a caption or credit line squeezed into a tight physical space sometimes needs a size the scale didn't generate. The scale's value is in giving you a considered starting point and a set of harmonious options to reach for first; deviating from it for a specific, deliberate reason is different from ignoring it altogether.

Asymmetric scales: more room up, or more room down

Nothing requires stepsUp and stepsDown to match. A poster with one dominant headline, a subhead, and body copy — but no need for fine print below body size — might only need one or two steps down and four or five steps up, weighting the scale toward the display sizes it actually uses. A dense reference document or a design system with many small UI labels might do the opposite: several steps down for fine distinctions in small type, and only one or two steps up for the rare larger heading. Deciding how many steps to generate in each direction is really a question of how much of the hierarchy you expect to use at the small end versus the large end, and there's no reason to generate steps you know you won't need just to keep the scale looking symmetrical.

Comparing ratios on the same base, side by side

The clearest way to feel the difference a ratio makes is to generate two or three scales from the identical 16px base and watch how quickly they diverge. A gentle ratio like a minor second (1.067) barely moves: four steps up from a 16px base lands at roughly 20.7px, a difference most readers would register as "slightly bigger" rather than a distinct hierarchy level. A major third (1.25), the workhorse ratio for a lot of general design work, reaches about 39px over the same four steps — comfortably into headline territory while the base still anchors a normal reading size. A perfect fifth (1.5), one of the most dramatic common ratios, reaches 81px over those same four steps — more than five times the base size, suited to posters and large display work where you want one commanding size and comparatively little in between. Seeing all three side by side, from an identical base, makes the choice of ratio feel less like an abstract preference and more like a direct decision about how much size contrast the piece actually needs.

Reusing a scale across a whole project

Once a base size and ratio feel right for one piece, they're worth carrying forward across a whole project or client relationship rather than re-deriving from scratch each time. A consistent scale used across a poster series, a set of programme booklets, or a family of related lettering pieces gives the whole body of work a quiet family resemblance, the same way a consistent colour palette does — even when the individual pieces use different sizes from the scale for different reasons. If a later piece genuinely needs a different feel, that's a legitimate reason to generate a new scale with a different ratio, but it's worth being a deliberate choice rather than a default drift, since an unplanned mix of scales across related work is one more way a set of pieces ends up looking like they don't quite belong together.