Modular Type Systems

When to use this

• You need to pick a scale ratio and number of hierarchy levels for a specific content type.
• You are tuning line-height relative to measure and font size.
• You need letter-spacing rules that change by size and weight.
• You are pairing fonts and need structural logic, not a list of trendy combos.
• You need real font stack recommendations with system-font fallbacks.
• Do NOT use this when you need the clamp() math for fluid scaling; use fluid-type-scale instead.

Mental model

A modular type system starts with two decisions: a base size and a ratio. Every other size is derived by multiplying or dividing the base by the ratio. base * ratio^n gives you step n. This produces a mathematically coherent set of sizes where the visual distance between any two adjacent steps is consistent.

Line-height is not a fixed number. It is a function of three things: the font size, the measure (line length), and the typeface's x-height. Larger text needs tighter line-height (headings at 1.1-1.2). Longer lines need looser line-height (1.6-1.7 for 75ch body text). Short lines (30-40ch) can go tighter (1.4). The sweet spot for body text at 60ch measure is 1.5.

Letter-spacing follows the opposite curve from line-height: it opens up as size shrinks and tightens as size grows. Large display type (48px+) almost always needs negative tracking (-0.02em to -0.04em). Body text at 16px generally needs 0. Small text (12px) benefits from +0.01em to +0.02em. Weight also affects spacing: bold text at any size looks tighter than regular because the strokes fill more of the sidebearing, so bold often needs +0.01em more than regular at the same size.

Measure (line length) has been studied since the 1920s. 45-75 characters per line is the readable range, with 66 characters being the ideal cited by Bringhurst. In practice, 55-70ch is the working range for body text. Below 45ch (mobile single column), line-height can tighten. Above 75ch, reading comprehension drops measurably.