Fluid Typography Calculator for CSS clamp()
This fluid typography calculator turns two viewport widths and two font sizes into a ready-to-paste CSS clamp() value, so your text scales smoothly instead of jumping between media-query breakpoints. It is built for developers and designers who want responsive type that grows in step with the screen.
Enter a min and max viewport, pick a min and max size, and the tool does the math — slope, intercept, and the vw coefficient — then outputs production-ready font-size and line-height in rem or px. A live preview and built-in presets (H1–H6, Body, Small) let you tune the scale before you copy.
How to Use the Calculator
Set your viewport range
Under Viewport Range, enter the Min Width and Max Width for your design. A range of 320px to 1440px covers most projects; the text scales linearly between them.
Set the font size
Use the sliders or type the Min Size (at the smallest viewport) and Max Size (at the largest). Or click a Preset — H1 through H6, Body, or Small — to load proven size and line-height values.
Adjust line height
Set the Min and Max line-height. Headings usually want tighter spacing (1.1–1.2) and body text more (1.5–1.7). If both values match, a single static line-height is output instead of a clamp().
Choose the output unit
In Output Settings, pick rem (recommended) or px. For rem, set Base Font to your project's root font-size — typically 16px — so the conversions are accurate.
Preview and copy
Drag the Preview viewport slider (320–1920px) to watch the sample text resize, then click Copy to put the CSS on your clipboard.
Features
CSS clamp() Generation
Outputs production-ready font-size using clamp(), with the correctly calculated slope (vw) and intercept in rem or px.
Fluid Line Height
Generates a matching clamp() for line-height, and falls back to a clean static value when the min and max are equal.
Viewport Range Control
Define the min and max viewport widths between which your typography scales, matching your own breakpoints.
Interactive Preview
A viewport slider from 320px to 1920px resizes the sample text in real time so you see exactly how it scales.
8 Typography Presets
One click loads sensible size and line-height ranges for H1–H6 headings, body text, and small text.
rem / px Output
Switch between rem and px output, with a configurable base font-size so rem values stay accurate for your setup.
Formula Breakdown
Shows the step-by-step math — slope, vw coefficient, intercept, and rem conversion — so you can verify the result.
One-Click Copy
Copy the complete font-size and line-height CSS to your clipboard with a single button.
Frequently Asked Questions
What is fluid typography?
Fluid typography makes text scale smoothly across screen sizes instead of snapping between fixed breakpoints. Using CSS clamp(), the font-size adjusts proportionally as the viewport width changes — no media queries required.
How does CSS clamp() work for font size?
clamp(min, preferred, max) constrains a value between a minimum and a maximum. The preferred value uses a vw unit so it grows with the viewport, but it never drops below the min or rises above the max. For example, font-size: clamp(1rem, 0.5rem + 0.7143vw, 1.5rem) scales text from 16px at a 320px viewport to 24px at 1440px.
How do I calculate clamp values for typography?
The preferred (middle) value is a linear function of viewport width. You compute the slope from the size and viewport differences, convert it to a vw coefficient, and work out the rem/px intercept. This calculator does all of that automatically and shows the working in the Formula panel.
Should I use rem or px for the output?
Use rem for most cases — rem respects the user's browser font-size setting, which improves accessibility. Choose px only when you need a size that is independent of the root font-size. With rem output, set Base Font to your project's root font-size so conversions are exact.
What min and max viewport widths should I use?
A range of 320px to 1440px works well for most projects: 320px covers the smallest common phones, and 1440px is a standard desktop width. Adjust the bounds to match your own analytics or design specs.
Why does my line-height show a static value instead of clamp()?
When the min and max line-height are the same, there is no scaling to do, so the calculator outputs one static value rather than an unnecessary clamp(). Set different min and max line-heights if you want it to scale fluidly.
Is clamp() supported across browsers?
Yes. CSS clamp() is supported in all modern browsers, including Chrome 79+, Firefox 75+, Safari 13.1+, and Edge 79+. For very old browsers, add a plain fallback font-size before the clamp() declaration.
Why use clamp() instead of media queries for responsive text?
Media queries change size in abrupt steps at each breakpoint and require a separate value for every element and screen size. A single clamp() scales continuously between two viewports, so the type always looks right and there is far less CSS to maintain.
No comments yet. Be the first to comment!