CSS Clamp

Font size clamp() generator

Fluid typography that scales smoothly between two screen widths.

Screen width
1152px

Actions

Clamp sizes

The smallest and largest size, for padding, margin or font size.

rem
rem

Viewport settings

The screen widths where the value starts and stops growing.

rem
rem

The clamped value will be between 1rem and 3rem, applied linearly between viewports of 24rem and 120rem.

Fluid typography with clamp()

A fixed font size is either too small on a phone or too big on a desktop, and media queries only fix that at a few breakpoints. A clamp() font size grows in a straight line between a minimum and a maximum, so the text fits every screen width, not just the ones you designed for.

Set the smallest and largest size above, pick the viewport range where the text should grow, and drag the screen width to check the result before you copy it.

Tips for fluid font sizes

  • Keep body text almost fixed and let headings do the growing.
  • Pair large fluid headings with a tighter line height, around 1.1.
  • Test the largest heading at 200% browser zoom.
  • Use the same viewport range for every step of your type scale, so they grow in step.

Use it in your project

Paste the value into font-size, a custom property, or a Tailwind theme token. The Tailwind CSS clamp() guide shows how, and the examples include a complete fluid type scale.

Frequently asked questions

How do I make a font size responsive with clamp()?

Set font-size to a clamp() value with a minimum, a preferred value that contains vw and a maximum, for example font-size: clamp(1rem, 0.625rem + 1.563vw, 2.5rem). The text then grows smoothly with the screen instead of jumping at breakpoints.

What is a good minimum and maximum font size?

Body text works well from 16px to 18px (1rem to 1.125rem). Headings can grow more: an h1 from about 36px on phones to 64px on desktops is common. Keep the maximum within about 2.5 times the minimum so the text still scales with browser zoom.

Should the font size clamp use vw or rem?

Both. The minimum, maximum and intercept should be rem so the text respects the user’s font size setting, and the part that grows should be vw so it follows the screen width.

How do I create a fluid type scale?

Give every heading level and body text its own mobile and desktop size, and generate a clamp() value for each with the same viewport range. The examples page has a complete scale for h1 to h6 and body text that you can copy.