Responsive Typography: Fluid Scales Beyond Breakpoints
Media query breakpoints produce typographic jumps. Fluid typography scales smoothly across viewports. Here is how I build them. Responsive typography has traditionally meant setting different font sizes at different breakpoints, which produces visible jumps as the viewport crosses each threshold. Fluid typography replaces those jumps with smooth scaling, using viewport-relative units so that font size changes continuously as the viewport changes. After building fluid type systems for several years, I find them more maintainable and more visually consistent than breakpoint-based systems, but they require care to avoid common pitfalls. The Clamp Approach The foundation of modern fluid typography is the CSS clamp() function, which takes a minimum, a preferred, and a maximum value. The preferred value is typically a viewport-relative expression that scales between the minimum and maximum. This produces a font size that grows with the viewport but never goes below the minimum or above the maximum. h1 { font-size: clamp(1.75rem, 1.25rem + 2.5vw, 3.5rem); } In this example, the heading size is at least one point seven five rem, at most three point five rem, and scales with the viewport width in between. The expression 1.25rem + 2.5vw is constructed so that at small viewports the rem term dominates and at large viewports the vw term dominates, producing a smooth curve. The minimum and maximum prevent the size from becoming unreadable at the extremes.