Responsive typography adjusts font size, line height, spacing, and related text relationships as display conditions change. Fluid CSS math lets text scale smoothly across screen sizes instead of jumping at breakpoints, while typographic ratios keep headings and body text visually related. section 8.0 section 8.2
Build responsive type with a small set of mathematical constraints:
- Use vw or vh when a value should respond to the viewport. section 8.2
- Use calc() to combine a responsive component with a stable base, such as calc(2vw + 1rem). section 8.2.2
- Use min() or max() when a font needs only an upper or lower bound. section 8.2.2
- Prefer clamp(min, preferred, max) when text must grow fluidly without becoming too small or too large. section 8.2.2
- Use modular scales to derive related sizes from a base size and ratio; CSS custom properties can centralize those values. section 8.5
A bounded fluid heading
font-size: clamp(1rem, 0.5rem + 2vw, 2rem); The preferred value grows with viewport width, but the result stays between 1rem and 2rem. A 320px-wide phone produces 14.4px from the preferred formula, so the minimum constraint applies; larger screens eventually reach the maximum. section 8.2.2
let fontSize = parseFloat((baseSize * scale).toFixed(2));
Round scale-based decimal font sizes to a fixed number of decimal places when computed values become unwieldy. section 2.6.4
