流体排版

Fluid typography is a technique where font sizes scale continuously with viewport width rather than jumping between fixed values at breakpoints. The CSS clamp() function makes this practical and readable in production code.

The goal is typography that always fits its context optimally — never too large on small screens, never too small on large monitors — without requiring a cascade of media queries.

The clamp() function:

font-size: clamp(minimum, preferred, maximum);

• minimum: Smallest allowed size (px or rem)
• preferred: A viewport-relative expression that scales with screen width
• maximum: Largest allowed size (px or rem)

Basic example:

h1 {
  /* Scales from 2rem (32px) at narrow viewports
     to 4rem (64px) at wide viewports */
  font-size: clamp(2rem, 5vw, 4rem);
}

p {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
}

Calculating precise fluid type with viewport bounds:

The 5vw in the middle value is an approximation. For precise control over exactly where scaling starts and stops, use this formula:

preferred = minSize + (maxSize - minSize) * (100vw - minWidth) / (maxWidth - minWidth)

As CSS:

h1 {
  /* Fluid from 375px to 1200px viewport width */
  /* min: 32px (2rem), max: 64px (4rem) */
  font-size: clamp(
    2rem,
    calc(2rem + (4 - 2) * ((100vw - 23.4375rem) / (75 - 23.4375))),
    4rem
  );
}

Tools like Utopia and Fluid Type Scale Calculator generate these calculations for entire type scales, which you can paste directly into CSS.

Full fluid type scale example:

:root {
  --text-sm:   clamp(0.875rem, 0.8rem + 0.4vw,  1rem);
  --text-base: clamp(1rem,     0.9rem + 0.5vw,  1.25rem);
  --text-lg:   clamp(1.25rem,  1rem   + 1.25vw, 1.875rem);
  --text-xl:   clamp(1.5rem,   1rem   + 2.5vw,  2.5rem);
  --text-2xl:  clamp(2rem,     1.25rem + 3.75vw, 3.5rem);
  --text-3xl:  clamp(2.5rem,   1.5rem  + 5vw,   5rem);
}

Accessibility consideration:

Fluid type with vw units in the preferred value can break browser zoom accessibility. The solution is to combine viewport units with rem in the preferred value (as in the examples above using calc(Xrem + Yvw)), which ensures the fluid type still responds to user font size preferences.

Fluid typography eliminates a common responsive design problem: breakpoints chosen for layout don't always coincide with where typography needs adjustment. Fluid type gracefully handles all viewport widths, not just the ones you remembered to add breakpoints for.