Fluid type scale calculator (CSS clamp)
Generate a fluid type scale with CSS clamp(): set the viewport range, base sizes and scale ratios, preview at any width and copy Tailwind v4 or plain CSS.
@theme {
--text-xs: clamp(0.6331rem, 0.7184rem + -0.1066vw, 0.6944rem);
--text-sm: clamp(0.8333rem, 0.8292rem + 0.0185vw, 0.844rem);
--text-base: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);
--text-lg: clamp(1.2rem, 1.0828rem + 0.5211vw, 1.4996rem);
--text-xl: clamp(1.44rem, 1.2213rem + 0.9722vw, 1.999rem);
--text-2xl: clamp(1.728rem, 1.3615rem + 1.629vw, 2.6647rem);
--text-3xl: clamp(2.0736rem, 1.4951rem + 2.5711vw, 3.552rem);
--text-4xl: clamp(2.4883rem, 1.6093rem + 3.907vw, 4.7348rem);
--text-5xl: clamp(2.986rem, 1.6847rem + 5.7835vw, 6.3115rem);
}
:root {
--step-xs: clamp(0.6331rem, 0.7184rem + -0.1066vw, 0.6944rem);
--step-sm: clamp(0.8333rem, 0.8292rem + 0.0185vw, 0.844rem);
--step-base: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);
--step-lg: clamp(1.2rem, 1.0828rem + 0.5211vw, 1.4996rem);
--step-xl: clamp(1.44rem, 1.2213rem + 0.9722vw, 1.999rem);
--step-2xl: clamp(1.728rem, 1.3615rem + 1.629vw, 2.6647rem);
--step-3xl: clamp(2.0736rem, 1.4951rem + 2.5711vw, 3.552rem);
--step-4xl: clamp(2.4883rem, 1.6093rem + 3.907vw, 4.7348rem);
--step-5xl: clamp(2.986rem, 1.6847rem + 5.7835vw, 6.3115rem);
}
How to use it
- 1Set the smallest and largest viewport widths you design for.
- 2Choose the base font size at each end and a scale ratio for small and large screens.
- 3Drag the preview slider to check every step, then copy the CSS.
How clamp() makes type fluid
clamp(min, preferred, max) picks the preferred value unless it falls outside the range. The preferred value here is a straight line between two points, the minimum size at the small viewport and the maximum at the large one, written as rem + vw. Keeping a rem term means text still scales when people change their browser font size, which pure vw values break.
/* 16px at 360px wide, 18px at 1280px wide */
font-size: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);
Why two ratios
A 1.333 scale looks confident on a laptop but makes headings enormous on a phone. Using a tighter ratio on small screens and a wider one on large screens keeps hierarchy clear everywhere, so small text barely changes while display sizes grow the most.
Frequently asked questions
Is fluid typography accessible?
Yes, if the formula includes a rem term, as this tool's output does. WCAG requires text to scale to 200% with browser zoom, and rem based clamp values respect that.
How do I use it in Tailwind CSS v4?
Paste the @theme block. It overrides --text-* sizes, so text-xl and friends become fluid across the whole project.
What viewport range should I use?
Common choices are 360px to 1280px or 1440px. Below the minimum and above the maximum, sizes stay fixed.