Typography Scale Generator

A scale replaces arbitrary font sizes

Choosing sizes individually produces a set that looks almost consistent and is not. A modular scale derives every size from one base and one ratio, multiplying up for headings and dividing down for small text. The relationships are then intentional, and the page reads as a system rather than a collection of decisions.

Ratios and what they feel like

1.125, the major second, is subtle and suits dense interfaces and data-heavy screens. 1.25, the major third, is a reliable general-purpose choice. 1.333, the perfect fourth, gives clear hierarchy for content sites. 1.618, the golden ratio, produces dramatic contrast that works for marketing pages and quickly becomes unusable for body-heavy layouts, since the third step up is already enormous. Larger ratios need fewer steps.

Different ratios for different viewports

A ratio that works on a wide screen is usually too aggressive on a phone, where a 3rem heading consumes the viewport. Common practice is a smaller ratio on narrow screens and a larger one on wide ones. CSS clamp() expresses this in one declaration, interpolating between a minimum and maximum against viewport width without media queries.

Use rem, and leave the root alone

Sizes in rem scale with the user's browser font-size setting, which is the mechanism by which people with low vision read comfortably. Sizing in px ignores that preference entirely. Setting the root to 62.5 percent to make the arithmetic easier overrides the user's chosen default and is worth avoiding for the same reason.

Line height moves opposite to size

Body text wants roughly 1.5 to 1.6 for comfortable reading. Large headings want 1.1 to 1.2, because a line height that suits 16px looks like a gap at 48px. A single line-height applied across the scale always looks wrong at one end. Line length matters as much: 45 to 75 characters is the readable range, and a wide container with no max-width defeats good type sizing.

Scales need editing

A generated scale gives mathematically related numbers, not a finished system. Steps too close to distinguish should be dropped, and awkward values rounded to something usable. The scale exists to constrain choices, not to be obeyed literally — and a system of five or six sizes people actually use beats twelve that get ignored.