Slope
(max - min) ÷ (maxVw - minVw)
(48 - 16) ÷ (1440 - 375)
= 0.03005 px per px
Pixels of growth per extra pixel of screen width. Multiply by 100 for the vw value, 3.005vw here, because 1vw is 1% of the viewport.
CSS Clamp Calculator
Inputs
Free tool
CSS clamp() calculator for fluid typography
Fluid typography lets text grow smoothly with the screen instead of jumping at breakpoints. This CSS clamp() calculator turns a minimum size, a maximum size and a viewport range into one line of CSS. Copy it as plain CSS, a custom property, Tailwind v3 or v4, SCSS or a container query version, then check it in live mobile, tablet and desktop previews. The output keeps a rem term, so text respects user font settings.
- output formats
- 6
- device presets
- 4
- uploads
- 0
375px16px
768px27.81px
1440px48px
How to create a fluid font size with CSS clamp()
Six quick steps take you from two font sizes to production-ready CSS.
Enter your smallest and largest size
Type the font size for small phones and the size for large monitors, such as 16 and 48. Pick px or rem.
Set the viewport range
Enter the width where growth starts and where it stops, such as 375 and 1440. Text stays at the minimum below the first and at the maximum above the second.
Check root size and precision
Keep the root font size at 16px unless your CSS changes the html font size. Three decimals suits almost every layout.
Preview on real widths
Use the device buttons, drag the frame handle or move the width slider. Each preview is a real iframe, so vw units resolve as on a phone.
Copy the format you need
Choose CSS, Var, SCSS, Tailwind v4, Tailwind v3 or Container query in the Output panel and press Copy.
Read the accessibility notes
The checker warns about vw-only values and about a maximum more than 2.5 times the minimum, which can hinder text resizing.
How the clamp() formula is calculated
Plain linear interpolation, shown with the 16px to 48px example.
Intercept
min - slope × minVw
16 - 0.03005 × 375
= 4.732px = 0.296rem
Shifts the line through your minimum size at your minimum width, then converts pixels to rem using the root size.
Preferred value
intercept(rem) + slope × 100 (vw)
0.296rem + 3.005vw
= 0.296rem + 3.005vw
The middle argument of clamp(). The rem part follows the visitor's font setting, the vw part moves with the screen, so it is never vw-only.
Min and max
clamp(lower, preferred, upper)
lower = 1rem, upper = 3rem
= clamp(1rem, 0.296rem + 3.005vw, 3rem)
Stops the size leaving your range. Bounds are ordered automatically, so shrinking text still produces a valid clamp().
Why the result is accurate
Two sizes and two widths define a straight line, and the formula is that line in CSS. It passes exactly through both points, so each end equals your input. Rounding to three decimals shifts results by under 0.01px, as the table shows.
| Width | Exact | From CSS | Gap |
|---|---|---|---|
| 375px | 16 | 16.005 | 0.005 |
| 768px | 27.808 | 27.814 | 0.006 |
| 1024px | 35.5 | 35.507 | 0.007 |
| 1440px | 48 | 48 | 0 |
CSS clamp() examples with real inputs and outputs
Three common situations, from input to CSS.
Hero heading
A landing page headline that should feel big on a phone without wrapping into five lines.
- Min size
- 32px
- Max size
- 64px
- Min viewport
- 375px
- Max viewport
- 1440px
font-size: clamp(2rem, 1.296rem + 3.005vw, 4rem);
Size at viewport width
- 375px32px
- 768px43.81px
- 1440px64px
The size doubles, staying under the 2.5x guideline, so zoom still works.
Article body text
Long-form reading text entered in rem: 16px on small phones, a little larger on desktops.
- Min size
- 1rem
- Max size
- 1.25rem
- Min viewport
- 320px
- Max viewport
- 1280px
font-size: clamp(1rem, 0.917rem + 0.417vw, 1.25rem);
Size at viewport width
- 320px16px
- 768px17.87px
- 1280px20px
A gentle 1.25x increase keeps line lengths comfortable.
Card title in a container
A reusable card used in a narrow sidebar and a wide grid. Its title follows the card, not the screen.
- Min size
- 18px
- Max size
- 28px
- Min container
- 280px
- Max container
- 640px
.card { container-type: inline-size; }
font-size: clamp(1.125rem, 0.639rem + 2.778cqi, 1.75rem);Size at container width
- 280px18px
- 400px21.33px
- 640px28px
cqi resolves against the nearest container, so the card scales wherever it sits.
CSS clamp() font size FAQ
Short answers to what people ask most.
Divide the size difference by the viewport range for the slope, multiply by 100 for vw, and subtract slope times minimum width from the minimum size for the intercept. For 16px to 48px between 375px and 1440px that gives clamp(1rem, 0.296rem + 3.005vw, 3rem).
A vw-only size ignores the font size a visitor sets in their browser. The rem term keeps part of the size tied to it, so people who raise their default font size still get larger text.
In v4, add --text-fluid inside @theme and use text-fluid. In v3, add it to theme.extend.fontSize. For one-offs use an arbitrary value with underscores for spaces, such as text-[clamp(1rem,0.296rem_+_3.005vw,3rem)].
Usually, if the value has a rem term and the maximum stays within about 2.5 times the minimum. WCAG 1.4.4 requires text to enlarge to 200 percent without loss. The tool flags larger ratios as a heuristic, not a guarantee.
One vw is 1 percent of the viewport width, one cqi is 1 percent of the nearest container's width. Use vw for page headings and cqi for reusable components. The Container query tab outputs the cqi value and the container-type rule.
