Home / CSS tools / Fluid typography calculator

Fluid Typography Calculator

Pick a size for small screens and large screens, and preview how the text scales in between. Start from a preset, then adjust.

Pick sizes for each text role

Set a size for the narrowest screen and the widest, then let clamp() fill the gap. Use the presets above as a starting point and adjust to your design. A common viewport range is 320px to 1280px.

:root {
  --step-body: clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem);
  --step-h1: clamp(2rem, 1.3333rem + 3.3333vw, 4rem);
}
h1 { font-size: var(--step-h1); }

Keep line-height unitless

Set line-height as a plain number such as 1.5 for body text and 1.1 for headings. It scales with the font size, so you do not need a second fluid value.

Suggested starting sizes

  • Body text: 16px to 18px
  • Small text: 14px to 15px
  • H3: 20px to 28px
  • H2: 24px to 40px
  • H1: 32px to 64px

Tips for good fluid type

Keep body text at 16px or larger. Check the largest size at both ends of your viewport range. Limit headings so they never wrap to more than three lines on a phone. The responsive font size guide explains the reasoning behind each method.

Frequently asked questions

What is fluid typography?

Text that scales continuously with the screen width instead of jumping at breakpoints.

What sizes should I use for headings?

A common starting point is 32px to 64px for h1 and 24px to 40px for h2. Test them with real content.

Which viewport range should I choose?

320px for small phones and 1280px or 1440px for desktop works for most sites.

Does fluid typography hurt accessibility?

Not when the preferred value contains a rem part. Browser zoom and text size settings still work.

Should line-height be fluid too?

Usually not. A unitless line-height follows the font size automatically.