Fluid typography

Fluid typography makes text scale smoothly with the screen size, between a set minimum and maximum, instead of jumping at fixed breakpoints. Modern CSS does it in one line with clamp(), so a heading grows gradually from mobile to desktop and always stays within readable bounds. It gives type a natural rhythm across every screen.

How clamp() works

The clamp() function takes three values: a minimum, a preferred value, and a maximum. The browser uses the preferred value but never goes below the minimum or above the maximum.

• font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
• Minimum: 1.5rem keeps small screens readable.
• Preferred: 1rem + 2vw scales with the viewport.
• Maximum: 2.5rem stops it getting too big on wide screens.

Why the rem plus vw formula

Mixing a rem base with a vw term is what keeps fluid type accessible. The rem part still responds to the user's font-size setting and browser zoom, while the vw part adds the screen-based scaling. Using pure vw would break zoom, so the combination matters.

Fluid versus breakpoint typography

Building a fluid type scale

Apply the same approach across a type scale (body, h3, h2, h1) with matching minimum and maximum values per level, so the whole hierarchy grows together and keeps its proportions. Driving those values from custom properties keeps the scale easy to tune in one place.

Accessibility notes

Always set a minimum large enough to stay readable on small screens, and keep a rem term in the formula so zoom and user preferences still work. Test at 200% zoom to make sure nothing gets clipped or stuck.

Fluid typography at BeBranded

At BeBranded we use fluid type so headings and body text scale cleanly from mobile to widescreen, with accessible minimums. It is part of the systematic, scalable front-end in our design work.