CSS workflow
Fluid typography with CSS clamp(): formula and accessibility
A fluid font-size is a straight line between two viewport widths, limited by clamp(). The formula is easy to copy; the rendered page still needs testing.
Content updated: · Maintainer and corrections
Check the two endpoints
Enter a font size for the smaller viewport and another for the larger viewport. The slope is the size difference divided by the viewport difference. The preferred CSS value combines that slope in vw with an intercept; clamp() keeps the result between the two sizes.
The generator also accepts a decreasing size. It sorts only the CSS lower and upper bounds; the preferred value still follows your chosen direction. The endpoint table uses unrounded arithmetic while CSS coefficients are rounded to six decimals. Compare the rendered result at both widths.
Understand rem and the preview
Enter design values in pixels. With rem output, the tool divides sizes and the intercept by the assumed root font size, default 16px. If the receiving site has a different root size, the output will resolve to different pixel values; enter that site's root size before copying.
The tapered band illustrates the relative size trend; use the endpoint table for exact values. The slider simulates a viewport width mathematically. It does not resize the browser, change a container query, load your font or reproduce the receiving page's CSS cascade. Test the copied rule in the real component.
Test text resizing and reflow
MDN recommends a relative upper size at least twice the lower size when clamp() controls text, to help 200% resizing. This is guidance, not an automatic WCAG verdict. Browser zoom also changes the effective viewport; vw and rem respond differently.
Test the actual page at 200% text resizing and browser zoom. Check that text remains readable, controls still work and content does not overlap or get cut off. A formula cannot prove accessibility across fonts, breakpoints and user settings.
/* 16px at 360px; 32px at 1440px; assumed root 16px */
font-size: clamp(1rem, calc(0.666667rem + 1.481481vw), 2rem);Data provenance