How to use this clamp calculator
Enter the viewport widths where your fluid range starts and ends. Set the size you want at each width, choose px or rem, and check the root font size. Preview the result, then copy the clamp() value or the full font-size declaration into your CSS.
How the clamp() calculation works
CSS clamp() combines a lower limit, a preferred value and an upper limit. This calculator creates a straight-line relationship between your two viewport and size pairs. The preferred value combines a rem offset with a vw term, while the outer values keep the result within its limits.
A worked example
For viewports from 320px to 1280px, sizes from 16px to 32px and a 16px root font size:
font-size: clamp(1rem, 0.66666667rem + 1.66666667vw, 2rem);
At an 800px viewport the calculated size is approximately 24px.
What happens outside the viewport range?
Below 320px the example stays at 16px; above 1280px it stays at 32px. Decreasing scales also work: their preferred value decreases while the outer limits keep the result within bounds.
Using rem, px and a root font size
px is convenient for design measurements. rem is relative to the root element’s font size. This fluid typography calculator outputs rem + vw with rem limits. Match the root size to your website: changing it can change the physical result. The chosen viewport endpoints are exact for the root size used in the calculation.
The formula itself does not guarantee accessible typography. Test actual browser zoom and text resizing in your layout.
Font size, padding and gap
The generated positive length can also be used for padding or gap. The built-in live preview demonstrates font size only. This is a responsive font size calculator for one fluid range, not a complete type-scale generator.
Common questions
What does this CSS clamp calculator generate?
One clamp() expression and a complete font-size declaration for a linear fluid range. The result uses rem limits and a rem offset plus vw.
How is the preferred value in clamp() calculated?
The slope is the difference between the endpoint sizes in pixels divided by the difference between viewport widths. The offset is the first size minus the slope times the first width. The offset is converted to rem; the slope is multiplied by 100 for vw.
Should I enter sizes in px or rem?
Use px for pixel-based design measurements or rem for sizes relative to the root font. Switching units converts the entered sizes using the root font size, preserving their physical equivalents.
What root font size should I use?
Match your site’s computed root font size. The example uses 16px. In px input mode a root change keeps the pixel endpoints; in rem mode it changes their pixel equivalents.
Can the size decrease on wider screens?
Yes. Enter a smaller size at the larger viewport. The preferred term subtracts vw and the outer clamp limits are ordered from smaller to larger.
What if both sizes are the same?
The calculator produces a constant clamp() value. Equal sizes are valid; equal viewport widths are not.
Can I use the result for padding or gap?
Yes, the positive length can also be used for padding or gap. The live preview demonstrates font size only.
Does using rem and clamp() make my text accessible?
No formula guarantees accessible typography. Test browser zoom, text resizing, contrast and your actual layout. Changing the root font size also changes the physical result.
Does this replace CSS line-clamp?
No. CSS line-clamp limits the number of visible text lines. This tool calculates fluid lengths for font size or spacing.
Does the calculator upload my inputs?
The calculator processes entered values locally in your browser and needs no calculation API. Analytics and advertising are separate page services governed by Raven’s consent and privacy setup.