What is fluid typography?
Fluid typography makes font sizes grow and shrink smoothly with the viewport instead of jumping between fixed sizes at breakpoints. In CSS, the clamp() function does the heavy lifting: clamp(minimum, preferred, maximum) picks a preferred value that scales with the viewport, but never goes below the minimum or above the maximum.
How clamp() works
The preferred value is usually a calculation like 1.2rem + 2.5vw: a fixed base plus a viewport-relative term. At your minimum viewport width it resolves to your minimum size; at your maximum viewport it resolves to your maximum size. Everywhere in between, it interpolates linearly. This calculator derives the exact intercept and slope so the line passes through both of your endpoints.
Why a type scale beats a single size
- Headings and body text stay in visual proportion at every screen width, not just at breakpoints.
- A consistent ratio (like 1.333) gives your whole page a rhythm designers recognize instantly.
- One factor pair applied to every step means you tune the whole scale with two numbers.
Accessibility notes
- Use
remunits so text still respects the user's browser font-size setting. - Keep body text between 16px and 19px equivalent at the small end of your range.
- Fluid type is not a substitute for responsive layout; it pairs with it.
Frequently asked questions
What is the CSS clamp() function?
clamp(min, val, max) resolves to val unless it is smaller than min or larger than max. For typography, val is usually a calc combining a fixed term and a vw term, which makes the size fluid between the two endpoints.
How do I convert px to rem in clamp()?
Divide by your root font size, almost always 16. So 24px becomes 1.5rem. This calculator outputs rem by default because rem respects the user's browser text-size preference, which matters for accessibility.
What viewport range should I use?
A common pair is 360px (small phones) to 1280px (laptops). Sizes below 360px are rare enough that the minimum bound handles them; sizes above 1280px are handled by the maximum bound, so giant monitors don't get giant text.
Which type scale ratio should I pick?
1.333 (perfect fourth) is the safest default: noticeable hierarchy without melodrama. Use 1.25 for dense, content-heavy UIs and 1.5 or 1.618 when you want editorial drama. This tool previews every step, so try ratios and watch the preview.
Does clamp() work in all browsers?
clamp() is supported in all modern browsers released since 2020 (Chrome 79+, Firefox 75+, Safari 13.1+, Edge 79+). For older browsers you can add a fixed-size fallback declaration before the clamp() line; browsers that understand clamp() will override it.
Can I use fluid type with Tailwind?
Yes. Paste this tool's Tailwind v3 config snippet into theme.extend.fontSize for utilities like text-step-3, or use the v4 @theme tokens in your CSS. Both export tabs generate the code from your current settings.