Fluid Typography with CSS: clamp(), Viewport Units, and Scales

Fluid typography means font size (and often line-height) scales smoothly between a minimum and maximum viewport width instead of jumping at breakpoints. CSS clamp() and viewport units make this straightforward. This post shows how to set it up and keep it accessible.

Why fluid type

• Smoother scaling: No sudden jumps at media queries; type grows and shrinks with the viewport.
• Less code: One clamp() (or a small set) can replace several breakpoint-based font-size rules.
• Consistency: If you use a type scale (e.g. 1.25 ratio), fluid values keep the scale in proportion across viewports.

clamp() basics

clamp(min, preferred, max) keeps a value between min and max. The preferred value is usually a viewport-based expression (e.g. 2vw + 1rem). The browser uses preferred when it’s between min and max, otherwise uses min or max.

Example:

h1 {
  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}

So on small viewports the size doesn’t go below 1.5rem, on large viewports it doesn’t go above 3rem, and in between it scales with the viewport.

Choosing min and max

• Min: Don’t go below a size that’s readable (e.g. 1rem for body, larger for headings). Consider accessibility (users who zoom or have low vision).
• Max: Cap at a size that still looks good on large screens; avoid huge one-line headings.
• Preferred: A formula like Xvw + Yrem gives a smooth curve. Tune X and Y so that at a “typical” viewport (e.g. 768px) you get the size you want.

Line height and fluid scale

Pair fluid font-size with a sensible line-height (e.g. 1.4–1.6 for body, tighter for large headings). You can also use clamp() for line-height if you want it to scale, but avoid values that hurt readability (too tight or too loose).

Summary

• Fluid typography scales type between min and max viewport sizes; clamp(min, preferred, max) is the main tool.
• Min/max should keep type readable and on-brand; preferred (e.g. Xvw + Yrem) controls how it scales.
• Use fluid type as part of a type scale and pair with line-height that stays readable. Fluid typography keeps UI type consistent and reduces breakpoint-specific CSS.