CSS clamp() / Fluid Typography Generator

Build responsive clamp() sizes that scale without media queries.

Create fluid, responsive CSS with the clamp() function: set a minimum and maximum size and the viewport range they map across, and get a ready-to-paste value that scales smoothly in between — no media queries needed. Works for font-size, padding, gaps and more, with a live preview at any screen width. Runs fully in your browser — nothing is uploaded.

How to use CSS clamp() / Fluid Typography Generator

  1. Set the min & max size

    Enter the smallest size for mobile and the largest for big screens — for example 16px scaling up to 40px for a fluid heading.

  2. Choose the viewport range

    Pick the screen widths the size should map between, such as 320px (mobile) to 1280px (desktop). Below and above that range the value stays pinned.

  3. Pick the property & unit

    Apply the clamp to font-size, padding, margin, gap or width, and output in rem (recommended for accessibility) or px.

  4. Preview the ramp

    Drag the viewport scrubber or tap Mobile / Tablet / Laptop / Desktop to watch the real text resize exactly as it will on those screens.

  5. Copy the CSS

    Click Copy CSS to grab the ready-made clamp() rule and paste it straight into your stylesheet — no media queries required.

Frequently asked questions

What is fluid typography?

Fluid typography makes text (and other sizes) scale smoothly with the viewport instead of jumping at fixed breakpoints. The CSS clamp() function does this in one line: clamp(min, preferred, max) grows the preferred value with the screen while never going below the min or above the max.

How does clamp() work?

clamp(MIN, PREFERRED, MAX) returns PREFERRED when it sits between MIN and MAX, otherwise it clamps to the nearest bound. This tool computes the PREFERRED term as a “rem + vw” line that passes through your two anchor points, so the size interpolates linearly between the min and max viewport.

Should I use rem or px?

Prefer rem for the min and max bounds so the text still respects a user's browser font-size preference — important for accessibility. Use px only when you need a fixed size that ignores user settings. The vw part is always viewport-relative regardless.

Do I still need media queries?

Usually not for sizing. A single clamp() replaces the common pattern of bumping font-size at each breakpoint. You may still use media queries for layout changes (columns, showing/hiding elements), but not for smoothly resizing type.

Why does the value stop changing on very small or very large screens?

That's by design. Below your min viewport the size pins to the minimum, and above your max viewport it pins to the maximum, so text never becomes unreadably small or absurdly large. Widen the viewport range if you want it to keep scaling further.

Is anything uploaded?

No. The clamp() value is calculated entirely in your browser. Nothing you enter is sent to or stored on a server, so it's safe for any project.

Related tools — Design · CSS generators