Type Scale

Espalier generates a seven-step type scale from a single geometric ratio (default: 1.25, the Major Third). Every step is derived by multiplying or dividing the base size by this ratio, then passed through the fluid scaling pipeline so values interpolate smoothly across viewport widths.

The default fluid viewport range is 320px through 1200px. Below or above those bounds each token remains at its minimum or maximum, respectively.

Scale tokens and their roles

Using scale tokens

Always reference tokens by semantic role, not by the underlying rem value. Token sizes are outputs of the fluid scaling pipeline and change across viewport widths.

/* Correct */
font-size: var(--esp-type-normal);

/* Avoid — the px value is correct at one viewport width only */
font-size: 18px;

Configuring the scale ratio

The typeRatio theme field controls the multiplier between steps. Increase it for more expressive hierarchy; decrease it for denser, more compact UI:

// Tighter scale for a data-dense dashboard
const myTheme = { seedColor: '...', typeRatio: 1.2 };

// More expressive scale for editorial content
const myTheme = { seedColor: '...', typeRatio: 1.333 };

Changing typeRatio shifts all seven steps proportionally. The fluid scaling clamp bounds adjust accordingly.

Cross-step display recipe

--esp-type-display-font-size spans two endpoints instead of representing an eighth scale step: it starts at the large step's minimum at 320px and reaches the huge step's maximum at 1200px. Use it through the complete display-heading recipe, which supplies the matching heading family, weight, leading, tracking, and context-local color. This gives hero text a more expressive slope without changing the global size or semantics of every <h1>.

Line height and letter spacing

Espalier components apply appropriate line-height and letter-spacing for each token's intended role:

• Body-sized text uses loose leading (~1.5×) for comfortable long-form reading.
• Display-sized text uses tight leading (~1.1×) to avoid large gaps between headline lines.
• The display recipe uses normal tracking by default; a product may override its recipe token when a chosen heading face needs optical tightening.

If you are setting font-size to an Espalier type token in your own CSS, apply matching line-height values for the size range you are targeting.