Use the free CSS Clamp Calculator below: your data never leaves your browser — all work happens on your device, and nothing is uploaded to any server.
The Fluid Type Problem
Text that looks right on a desktop often looks wrong on a phone, and the usual fixes are clumsy. A fixed font size is too big on small screens and too small on large ones. Media queries fix it by jumping between sizes at breakpoints, but the jumps are visible: text suddenly grows when the window crosses a threshold. Fluid type solves this by scaling smoothly, growing a little with every extra pixel of screen width, with no jumps anywhere.
The CSS clamp() function is the tool for this. It takes three values: a minimum, a preferred value, and a maximum. The browser uses the preferred value when it falls between the minimum and maximum, and clamps it to the ends otherwise. For fluid type, the preferred value mixes a viewport unit with a fixed unit, like 1.6667vw + 10.6666px, so the size grows with the screen but never escapes the range you set.
How to Use the Tool
Enter your smallest font size and your largest font size, then the viewport widths where those sizes should apply. The tool computes the slope and intercept and gives you the clamp() line. The preview slider simulates different screen widths so you can watch the size grow and confirm it stops exactly at your minimum and maximum. Copy the line into your stylesheet as a font-size value.
A sensible starting point is 16 pixels at a 320-pixel viewport growing to 32 pixels at 1280 pixels. That gives readable body text on a phone and confident headlines on a desktop, with smooth growth in between. Adjust the numbers to your design: headlines usually deserve a wider range than body text, and captions often deserve a narrower one.
The Maths, Plainly Explained
The formula has two parts. The slope measures how fast the size grows: subtract the minimum size from the maximum size, divide by the viewport range, and multiply by 100 to express it in viewport-width units. The intercept is the fixed part: the minimum size minus the slope’s contribution at the minimum viewport. Together they describe a straight line that passes exactly through your two endpoints.
Here is a worked example. Minimum 16 pixels at 320, maximum 24 at 1280. The slope is (24 – 16) / (1280 – 320) x 100, which is 0.8333 viewport units. The intercept is 16 – 0.8333 x 320 / 100, which is 13.3334 pixels. The result, clamp(16px, 0.8333vw + 13.3334px, 24px), gives exactly 16 at 320, exactly 24 at 1280, and a smooth line between. The tool does this arithmetic for you, but knowing it lets you sanity-check any value you are given.
Why Clamp Beats Media Queries Here
Media queries are still right for layout changes, like switching from one column to three. For font sizes, though, fluid values have three advantages. First, there are no jumps: text grows continuously, so no window width ever shows a sudden size change. Second, there is less code: one line replaces three or four breakpoint rules. Third, every screen size gets an appropriate size, not just the handful of widths you wrote breakpoints for.
There is one trade-off. Fluid type makes sizes less predictable at in-between widths, which can matter for precise designs like data tables or fixed-height cards. If a heading must never wrap to two lines, a fluid size that grows past your estimate will break that. In those cases, keep the fluid range narrow, or use media queries for that one element and fluid type everywhere else.
Choosing Your Range
The minimum viewport should be the smallest screen you support, usually 320 pixels for older phones. The maximum viewport should be where growth stops looking better, often 1200 to 1440 pixels for desktop layouts. Beyond that, text that keeps growing becomes harder to read, because lines get too long and headings dominate the page.
For the sizes themselves, respect readability. Body text rarely needs to go below 15 or 16 pixels, and going above 20 for body text usually hurts line length. Headlines can range much wider: a hero headline might run from 28 pixels on a phone to 64 on a desktop. The key is that the range matches the element’s job: body text stays calm, headlines get drama.
Units Beyond Pixels
The calculator works in pixels because pixels are the easiest unit to reason about, but clamp() accepts any units. Many teams prefer rem units so text respects the user’s browser font-size setting, which is an accessibility win: a user who sets their default size larger gets larger text everywhere. To convert, divide your pixel values by 16: 16 pixels is 1rem, 24 pixels is 1.5rem, and the same slope maths applies to the rem values.
Common Mistakes
The most common mistake is a preferred value that never actually applies: if your slope is too steep or too shallow, the size sits at the minimum or maximum across most widths and only moves in a narrow band. Check the preview at several widths, not just the ends. Another mistake is forgetting the units in the middle term: 0.8333vw + 13.3334px needs both units, and a missing one invalidates the whole declaration.