CSS Fluid Typography Scale & Clamp Generator

Design a complete responsive type scale with CSS clamp() — drag the preview to simulate any viewport and export to CSS, Tailwind, or SCSS instantly.

Min: 320px Drag to simulate viewport width Max: 1240px
768px
Mathematical Resolution Table
Step Min px (@320) Max px (@1240) CSS clamp() Output 
:root {
  /* Dynamic clamp() output */
}
module.exports = {
  theme: {
    extend: {
      fontSize: {
        /* Dynamic Tailwind output */
      }
    }
  }
}
$fluid-typography: (
  /* Dynamic SCSS output */
);

@mixin fluid-type($step) {
  font-size: map-get($fluid-typography, $step);
}

What is Fluid Typography?

Historically, web developers adjusted font sizes by writing media query breakpoints: font-size: 24px on mobile, then font-size: 48px above 768px. The result is a jarring visual jump at the exact breakpoint pixel.

Fluid Typography eliminates those jumps. Using the CSS clamp() function, your text mathematically scales up in perfect sync with the viewport width — no media queries, no sudden shifts, just smooth linear growth between your specified minimum and maximum sizes.

Why this matters for users

On devices between 768px and 1024px (most tablets and small laptops), traditional breakpoint-based typography is either too small or too large. Fluid typography hits the sweet spot at every width in between.

The clamp() Formula Explained

clamp(MIN, PREFERRED, MAX)

The three arguments are straightforward. MIN and MAX are rem values. The PREFERRED value is where the math happens.

We calculate the slope: (maxSize - minSize) / (maxVp - minVp). Then the y-intercept: minSize - slope × minVp. This gives a linear equation that exactly hits your pixel values at both boundary viewports and interpolates perfectly at every width in between.

The Mathematical Resolution Table in the tool above proves this by showing the exact pixel output at your minimum and maximum viewport — so you can confirm to your designer that the CSS respects their Figma spec precisely.

Why Two Different Scale Ratios?

A typographic scale ratio determines how much each heading step is multiplied from the base. At a ratio of 1.414 (Augmented Fourth), five steps up gives you 16 × 1.414⁵ = ~90px. On a 4K monitor that's beautiful. On a 375px iPhone, a 90px heading takes up your entire screen.

The solution: use a tight ratio for mobile (e.g., 1.125 — Major Second) and a wider ratio for desktop (e.g., 1.250 — Major Third). This generator fluidly interpolates not just the individual sizes, but the ratio itself as the screen expands, so headings grow more dramatically on large screens and stay compact on small ones.

Accessibility: Why REM Units Are Non-Negotiable

Never use px inside clamp()

Code like clamp(16px, 2vw, 32px) violates WCAG 1.4.4. If a visually impaired user has set their browser default to 24px, your px-based clamp overrides it and forces text back to 16px, ignoring their accessibility setting entirely.

This generator always outputs boundaries in rem units. Because 1rem equals the user's chosen browser font size, your clamp values automatically scale up when a user increases their browser text size setting — achieving WCAG 2.1 Level AA compliance without any extra work.

Figma Integration & Design Token Workflow

Figma does not natively support fluid typography — designers still create separate Mobile, Tablet, and Desktop frames with static pixel values. Here's the handoff workflow that eliminates that friction:

  1. Designer provides two pixel values per step — one from the 375px mobile frame, one from the 1440px desktop frame.
  2. Enter those exact values into this generator as your base size and viewport boundaries.
  3. Check the Resolution Table — it proves the generated clamp() hits exactly those pixel values at both breakpoints.
  4. Export and paste the CSS Custom Properties into your design token file. Reference with font-size: var(--step-3) throughout your stylesheet.

Common Mistakes & Edge Cases

  • Negative Scaling: Sometimes a secondary label should be smaller on desktop to save space (e.g., captions, fine print). Our algorithm detects when the desktop size is smaller than mobile and automatically flips the clamp boundaries and y-intercept calculations, producing a valid shrinking clamp.
  • Container vs Viewport Units: Using vw in clamp is fine for page-level headings but breaks inside narrow CSS Grid columns on wide screens. The drag visualizer in this tool uses cqi (Container Query Inline) units internally for the preview — showing you what a component-scoped clamp would look like. For truly modular components, swap vw for cqi in your exported code.
  • Setting min and max to the same value: If mobile and desktop sizes are equal, the tool outputs a static rem value instead of a clamp — this is correct behaviour and avoids generating a nonsensical clamp(1rem, 0vw + 1rem, 1rem).

Frequently Asked Questions

How to bridge the gap:

What is fluid typography in CSS?

Fluid typography is a technique where font sizes scale smoothly and linearly between a minimum and maximum value based on the viewport width, rather than jumping suddenly at specific media query breakpoints. It is typically implemented using the CSS clamp() function.

Why use clamp() instead of just vw for font sizes?

If you only use viewport units (vw), text will become microscopically small on mobile devices and ridiculously huge on ultra-wide monitors. The clamp() function solves this by setting a strict minimum and maximum boundary, allowing the text to scale fluidly only within your specified safe zones.

Why should I use rems inside the clamp function instead of pixels?

Using rem units inside clamp() ensures that your typography respects the user's browser-level font size preferences. If a visually impaired user increases their default browser font size from 16px to 24px, rem units will automatically scale up to accommodate them, whereas px units will stubbornly remain locked, violating AAA accessibility standards.

Can I use CSS clamp() with container queries instead of viewport units?

Yes, and it is highly recommended for component-driven architectures (like React or Vue). By swapping vw for cqi (Container Query Inline) in the clamp calculation, your typography scales based on the width of its parent container rather than the global browser window, making your components perfectly modular.

Should I use fluid typography for body text or just headings?

Fluid typography is primarily designed for Display headings (H1, H2) where massive pixel jumps cause layout shifts. For standard body copy (paragraphs, lists), it is strongly recommended to use static sizes (like 1rem) or a very subtle fluid scale. Reading long paragraphs of constantly shifting text sizes can cause motion sickness and cognitive strain for readers.

What happens if an older browser doesn't support the clamp() function?

As of 2024, CSS clamp() has over 96% global browser support. However, for legacy enterprise environments, you should provide a static fallback rule immediately preceding the fluid rule: font-size: 16px; font-size: clamp(1rem, 2vw + 1rem, 2rem);. Older browsers will parse the first rule and safely ignore the second.

Rate CSS Fluid Typography Scale

Help us improve by rating this tool.

4.7/5
574 reviews