Turn a minimum size, a maximum size and two screen widths into a clamp() value, or a whole fluid type scale. Runs on your device.
A CSS clamp() value is a size that grows smoothly with the screen width but never goes below a minimum or above a maximum. It takes three parts, clamp(min, preferred, max). The browser uses the preferred value unless it falls outside the min and max, in which case the nearest one wins. For fluid text the preferred part is a straight line made of a fixed rem amount plus some vw. A size of 16 px on a 320 px screen growing to 24 px on a 1200 px screen becomes clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem). No media queries are needed, and the text changes by a fraction of a pixel at a time instead of jumping at breakpoints.
The tool draws a straight line through two points: the minimum size at the minimum viewport and the maximum size at the maximum viewport. The slope is the size gained per pixel of width: (max size - min size) ÷ (max viewport - min viewport). In the example that is (24 - 16) ÷ (1200 - 320) = 0.00909 px per px, written as 0.9091vw because 1vw is one percent of the viewport width. The intercept is where the line crosses zero width: min size - slope × min viewport = 16 - 0.00909 × 320 = 13.09 px, which is 0.8182rem at a 16 px root. The preferred value is intercept + slope in vw. The formula box shows each step with your numbers.
Type scale mode builds a set of sizes where each step is the one before it multiplied by a ratio, such as 1.2 (minor third) or 1.25 (major third). You give a base size, a ratio at the narrow screen and a ratio at the wide screen, and how many steps go below and above the base. The tool works out every step at both screen widths and joins them with a clamp(), then prints CSS custom properties like --step-0 and --step-3 to paste into :root. A table lists each step in pixels at the minimum width, your preview width and the maximum width, so you can check headings do not become too large on phones.
WCAG 2.2 success criterion 1.4.4 asks that text can be resized to 200% without losing content or function. A size written in vw alone does not respond to browser zoom the way people expect, and it ignores the font size a person has set. Writing the intercept in rem keeps that link, because rem follows the root font size and zoom. This tool always writes rem. As a rule of thumb the maximum size should be no more than about 2.5 times the minimum; the tool shows a warning above that. It cannot test your whole page, so zoom to 200% in a browser before you ship. Nothing you type is stored or sent.
Pick a minimum and maximum size and the screen widths they belong to. For 16 px at 320 px wide growing to 24 px at 1200 px wide, the result is clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem). Paste it as font-size: clamp(...); no media query is needed.
The rem part is the intercept and the vw part is the slope. Using only vw would ignore browser zoom and the user's font setting, which is a problem under WCAG 1.4.4. With a rem part, zooming to 200% still enlarges the text.
Yes. clamp() works for any length. Enter the smallest and largest gap, for example 16 px to 48 px between 320 px and 1200 px, and use the result in padding, margin, gap or width. The maths is the same as for font size.
It still works. A shrinking size, say 32 px down to 20 px, gives a negative slope, clamp(1.25rem, 2.2727rem - 1.3636vw, 2rem) across 320 px to 1200 px, and the tool puts the smaller value first in clamp() so the limits stay valid. The preview shows the size at the viewport you choose.
Use the font size of your html element, 16 px unless your CSS changes it. If html is set to 62.5% the root is 10 px, and 24 px is then written as 2.4rem. The root size only changes how pixels are written as rem; it does not change the look at default settings.
1.2 (minor third) gives close sizes for text-heavy pages. 1.25 (major third) is a common middle choice, and 1.333 (perfect fourth) gives bolder headings. A smaller ratio on phones, such as 1.2, and a larger one on desktop, such as 1.25, keeps headings from overflowing narrow screens.