CSS clamp() Fluid Typography Generator

CSS clamp() Fluid Typography Generator

Local Processing

Calculate fluid responsive CSS clamp() formulas based on minimum and maximum viewport and element sizes.

How It Works & Processing Standards

Calculate fluid responsive CSS clamp() formulas based on minimum and maximum viewport and element sizes.

Tool processing runs in your browser. If you create a calculator or conversion share link, its values are included in the URL. See the privacy policy for account, analytics and advertising data.

Current Limits

  • Maximum input length: 100,000 characters

Make responsive type or spacing that is small on mobile and large on desktop in one line, without media queries. Results use rem based on 1rem = 16px.

What You Can Do

Linear interpolation
Slope chosen so the minimum size hits the minimum width and the maximum the maximum width.
rem units
Respects users’ font-size settings.

How to Use CSS clamp() Fluid Typography Generator

  1. 1
    Enter sizesMinimum and maximum size in px.
  2. 2
    Enter viewport widthsMinimum and maximum viewport in px.
  3. 3
    Copy the CSSUse it for font-size and more.

Examples

16px → 32px (360–1280px)
Input: 16, 32 / 360, 1280
Result: clamp(1rem, 0.6087rem + 1.7391vw, 2rem)

Common Use Cases

  • Responsive heading sizes
  • Spacing that grows with the viewport

Frequently Asked Questions (FAQ)

What if rem is not 16px?

If you changed the root font size, the rem values scale accordingly. The tool assumes the browser default of 16px.

Have feedback or ideas for this tool? Suggest & Inquire →