How this clamp() calculator works
You choose two points: the size you want on the narrowest screen and the size you want on the widest one. The calculator draws a straight line between them and turns it into a single CSS clamp() expression with three parts โ a minimum, a preferred value and a maximum. Below the minimum viewport the value stays at the minimum, above the maximum viewport it stays at the maximum, and in between it scales smoothly without a single media query.
The slope tells you how many pixels the value grows for every pixel of viewport width; it is written in vw units, where 1vw is 1% of the viewport width. The intercept is where that line would cross a zero-width screen. Together they make up the middle argument, for example 0.8333rem + 0.8333vw.
Why the output uses rem
Mixing a rem part into the preferred value keeps fluid text connected to the reader's browser font-size setting. A size built only from vw ignores that preference and can weaken zoom. That is why rem is the default output; px is available if your design tokens are written in pixels, and the root font size field covers projects that change the html font size.
Preview, breakpoints and accessibility
Drag the viewport slider from 320 to 1920 px to see the text at the size it would render at that width. The table lists computed sizes at 320 and 375 px for phones, 768 and 1024 px for tablets, and 1280, 1440 and 1920 px for desktops, so you can confirm that headings are neither cramped on phones nor oversized on wide monitors.
WCAG success criterion 1.4.4 requires that text can be resized to 200% without losing content. Browser zoom also shrinks the viewport measured in CSS pixels, so aggressive fluid type can grow less than expected. A common rule of thumb is to keep the maximum within 2.5 times the minimum, and the calculator warns you when you go beyond it.
Share and export
Every setting is stored in the page URL, so you can bookmark a result or send it to a teammate. Copy the plain clamp() value, a CSS custom property for your :root, or a Tailwind arbitrary class. Need a full set of sizes? Switch to type scale mode to export a modular scale as CSS variables.