Fluid Typography

All --esp-type-* tokens are fluid: they interpolate smoothly between a minimum size at narrow viewports and a maximum size at wide viewports using CSS clamp(). No media query breakpoints are involved — type scales continuously across the full viewport range.

The pattern

Each token is a clamp() expression with three values:

--esp-type-normal: clamp(
  1.125rem,       /* minimum — floor at ~320px */
  1rem + 0.625vw, /* preferred — scales with viewport + zoom */
  1.5rem          /* maximum — ceiling at ~1440px */
);

The preferred value combines a rem component and a vw component. The rem part ensures the token responds to browser zoom and root font-size preferences; the vw part provides the viewport-driven slope.

Zoom accessibility

Because every preferred formula includes a rem component, Espalier's fluid type scales correctly when a user zooms their browser to 200%. Text grows proportionally with zoom rather than staying fixed relative to the viewport width. This satisfies WCAG 2.1 Success Criterion 1.4.4 (Resize Text).

Avoid overriding --esp-type-* tokens with viewport-only values (font-size: 3vw) in your own CSS — that pattern removes the zoom compliance the token provides.

Spacing tokens use the same pattern

The --esp-size-* spacing tokens follow the same clamp() hybrid approach. See Fluid Spacing for details.