Responsive Typography: From Pixels to Fluid Scales
Good responsive typography is about more than just changing font sizes at arbitrary breakpoints. Here is my approach to building fluid, accessible type systems. For years I defined font sizes at three breakpoints. mobile, tablet, desktop. and called it responsive typography. Then I tested a site on a phone in landscape mode and realized it was getting desktop-sized fonts because the viewport was wide enough. The jump between breakpoints was jarring. Fluid typography using clamp() solved this by smoothly interpolating between minimum and maximum sizes across every possible viewport width. The Clamp Formula The formula is simple: font-size: clamp(minimum, preferred, maximum) . The preferred value uses viewport units, typically with a small fixed value added for stability. For body text, clamp(1rem, 0.5rem + 1vw, 1.25rem) keeps text between 16px and 20px while smoothly adjusting at every viewport width. /* Body text: 16px to 20px */ body { font-size: clamp(1rem, 0.5rem + 1vw, 1.25rem); } /* At 320px viewport: 0.5rem + 3.2px = 11.2px + 8px = 16px (hits min) At 768px viewport: 0.5rem + 7.68px = 15.68px (between) At 1200px viewport: 0.5rem + 12px = 20px (hits max) */ The reason for adding a…