Fluid body text

Quick implementation

body {
  font-size: clamp(1rem, 0.875rem + 0.5vw, 1.25rem);
  line-height: 1.7;
}

h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

h2 {
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
}

Prompt this to your LLM

Includes role, constraints, and edge cases to handle.

You are a senior frontend engineer building a responsive type system.

Goal: Create fluid font sizes using clamp() that scale smoothly between mobile and desktop — no media queries.

Technical constraints:
- Use clamp(min, preferred, max) for all text sizes.
- The preferred value should combine rem and vw: e.g., 0.875rem + 0.5vw.
- Body text: clamp(1rem, 0.875rem + 0.5vw, 1.25rem).
- H1: clamp(2rem, 1.5rem + 2vw, 3.5rem).
- H2: clamp(1.5rem, 1.25rem + 1vw, 2rem).
- Always include a rem component in the preferred value so text respects user font size preferences.

Accessibility:
- Never use only vw for font sizes — it ignores user zoom and browser font settings.
- The rem + vw combination ensures the text scales with both viewport AND user preferences.
- Test with browser zoom at 200% to ensure text remains readable.

Why this matters in 2026

Before clamp(), responsive typography meant media queries at arbitrary breakpoints — text would jump between sizes instead of flowing smoothly. Fluid type scales naturally with the viewport, giving mobile users appropriately sized text and desktop users larger, more comfortable text. One line of CSS replaces half a dozen media queries.

The logic

clamp(min, preferred, max) returns the middle value clamped between the minimum and maximum. The preferred value 0.875rem + 0.5vw creates a linear ramp: on a 320px viewport it evaluates to ~17.6px, on a 1440px viewport it evaluates to ~21.2px. The clamp() caps it at 1rem (16px) minimum and 1.25rem (20px) maximum. The rem component in the preferred value is critical — without it, browser zoom wouldn't affect the font size.

Accessibility & performance

Mixing rem with vw in the preferred value ensures the font size responds to both viewport width and user font preferences. If a user sets their browser to a larger default font size, the rem component scales up accordingly. Never use vw alone — it ignores user settings and fails WCAG 1.4.4 (text resize up to 200%). clamp() is resolved by the CSS parser with zero runtime cost.