Typography: pairing, ratio, rhythm and load

Choosing the pairing

There are three durable strategies, and the generator picks between them from the mood and industry inputs.

Open-source families make the safest defaults because they can be self-hosted, subset and versioned. Inter, IBM Plex Sans, Source Serif 4 and JetBrains Mono are all genuinely open and cover those three strategies between them. Where a brand already owns a licensed family, the generator emits the same token structure and leaves the family names for you to fill.

The scale

A modular scale multiplies a base size by a fixed ratio for each step up. Smaller ratios give calm, dense interfaces; larger ratios give dramatic, marketing-led pages.

A useful trick is to run two ratios: a tight one for the body range (small, base, large) and a wider one for display sizes. This keeps paragraphs and labels comfortable while still allowing a genuinely large hero heading. The generator emits eight steps — 2xs through 4xl — because nine or more invites arbitrary choices during implementation.

Fluid steps with clamp()

Fixed breakpoint jumps make headings snap awkwardly at a single viewport width. A fluid step interpolates instead:

--font-3xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
--font-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);

Two rules make fluid type safe. First, always set a real minimum in rem, never a vw-only value, or the text stops responding to the user's browser font-size setting. Second, keep the fluid range on body text tiny — a sixteenth of a rem of movement is plenty. Body copy should be nearly constant; only display sizes should travel.

Measure, leading and tracking

• Measure. Prose reads best in a fairly narrow column. The generator caps long-form text with max-width: 68ch and UI text at around 48ch.
• Leading. Line-height moves inversely to size: roughly 1.6 for body, 1.35 for subheads, 1.05–1.15 for display. A single line-height across all sizes is the most common typographic smell in a hand-rolled system.
• Tracking. Tighten large display text slightly (−0.01em to −0.02em) and open up all-caps labels (+0.06em). Leave body tracking alone.
• Weights. Ship three: a text weight, a medium for UI emphasis, and a bold or semibold for headings. Every extra weight is another file or another variable-font axis position to justify.

Loading strategy

A type system that looks perfect in a design tool and arrives 900ms late is a worse system than a plainer one that arrives instantly. The generator's default is: self-host, subset to the languages actually used, preload only the single family used above the fold, and set font-display: swap so text is readable during the swap period. Where a variable font is available it usually replaces four static files with one, which is a clear win for both payload and flexibility.

Fallback metrics matter too. Declaring a local fallback stack with size-adjust and ascent-override in an @font-face rule reduces the layout shift when the webfont swaps in. It is fiddly to tune, but it turns a visible reflow into a barely perceptible one.

Pros and cons of a generated type system

Pros. Every size, line-height and weight is derived from a stated rule, so new components inherit sane defaults. Fluid steps remove a whole class of breakpoint bugs. The scale is documented by construction.

Cons. Mathematical scales produce sizes like 27.65px that no one chose deliberately; rounding to the nearest half-pixel is usually worth it. Ratios also ignore optical size — a display face at 14px may need a different family entirely rather than a smaller step. And no generator can tell you whether a face's personality actually fits the brand. That judgement stays human.