Responsive Typography Scale Calculator
Generate fluid CSS clamp() typography values from minimum and maximum viewport widths, font sizes and a modular scale.
Generate a responsive typography scale
Create fluid clamp() values that interpolate between minimum and maximum font sizes across a viewport range.
Fluid typography with CSS clamp()
A responsive typography scale can grow smoothly between two viewport widths instead of jumping at multiple breakpoints. CSS clamp(minimum, preferred, maximum) is useful because it preserves hard lower and upper bounds while allowing a fluid value between them.
How the calculator builds the preferred value
For each type step, the tool derives a straight-line relationship between the selected minimum and maximum viewport anchors. It converts that line into a calc(intercept + slope × 1vw) expression and wraps it in clamp(). Heading sizes are generated by applying the modular ratio to both endpoint body sizes.
Choosing a modular scale
A ratio such as 1.125, 1.2 or 1.25 can create visual hierarchy, but no ratio is universally correct. Test the largest generated headings on narrow screens, long translated strings, zoomed layouts and real content. A mathematically elegant scale can still overflow a card or create awkward line breaks.
Accessibility and readability
Fluid type should not be used to defeat browser/user text-size preferences. Keep semantic heading structure independent of visual size, test zoom/reflow, and verify line height and measure. This calculator generates size values only; it does not determine whether a complete typography system meets WCAG.