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. This illustrative formula spans 320px to 1280px when the root font size is 16px; actual token values depend on your theme:

--esp-type-normal: clamp(
  1.125rem,
  1rem + 0.625vw,
  1.5rem
);

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

The rem component makes type respond to the root font size as well as the viewport width. Check the complete page at 200% zoom: text, controls, wrapping, and navigation must remain usable. A formula alone cannot verify that outcome.

Avoid overriding --esp-type-* tokens with viewport-only values (font-size: 3vw) in your own CSS. Viewport-only sizing can counteract text enlargement.

Spacing tokens use the same pattern

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