Fluid Typography Calculator
Generate CSS clamp() values for fluid typography. Set min/max font sizes and viewport widths, preview the result live, and export the clamp() expression or Tailwind config.
The quick brown fox jumps over the lazy dog
What is the CSS clamp() function?
The CSS clamp() function constrains a value between a minimum and maximum, with a preferred middle value that scales with the viewport. For fluid typography it takes the form clamp(min, preferred, max) where the preferred value is a linear equation combining a viewport-relative unit (vw) and an intercept offset. The result is a font size that grows smoothly as the browser window widens — no breakpoints required.
How the fluid type formula works
Given minimum size s₁ at viewport v₁ and maximum size s₂ at viewport v₂, the slope is (s₂ − s₁) / (v₂ − v₁) and the intercept is s₁ − slope × v₁. The preferred value becomes intercept + slope × 100vw. Wrapped in clamp(), the font never falls below the minimum or exceeds the maximum regardless of screen size.
Frequently Asked Questions
What does fluid typography mean?
Fluid typography is the practice of making font sizes scale continuously with the viewport width rather than jumping at fixed breakpoints. Instead of writing @media (min-width: 768px) { font-size: 20px }, you declare a single clamp() expression that interpolates from a small size on narrow screens to a large size on wide screens. The result feels smoother because every intermediate viewport gets a precisely calculated size.
Should I use px or rem for fluid type?
Rem is generally preferred because it respects the user's browser font-size preference. If a user sets their base font to 20px, rem values scale accordingly while px values do not. This calculator converts your px inputs to rem automatically when rem mode is selected, using the root size you specify (usually 16px). The generated clamp() is then expressed entirely in rem and vw units.
How do I use this with Tailwind CSS?
Switch to the Tailwind tab and copy the fontSize object. In Tailwind v3, add it inside the theme.extend block of tailwind.config.js. In Tailwind v4, you can define a CSS variable and reference it with an arbitrary value like text-[clamp(...)], or register the font size via the theme plugin. Once configured, apply it with a utility class like text-fluid-base.
What browsers support CSS clamp()?
clamp() is supported in all modern browsers: Chrome 79+, Firefox 75+, Safari 13.1+, and Edge 79+. Global browser support sits above 96% as of 2025. Internet Explorer does not support it, but IE usage is effectively zero for new projects. No polyfill is needed for any actively maintained browser target.
Can I use fluid type for spacing and sizes other than fonts?
Yes. The same clamp() formula applies to any CSS length property: padding, margin, gap, width, and more. A fluid spacing system uses the same slope-intercept math to scale layout values with the viewport. Tools like Utopia.fyi generate entire fluid type and space scales; this calculator focuses on generating a single font-size clamp expression you can drop in immediately.