Calwarden

CSS Clamp Calculator

Calculate CSS clamp() for fluid typography.

Save

Calculator

Inputs

Viewport width where scaling starts.

px

Viewport width where scaling stops.

px

Font size at the minimum viewport.

px

Font size at the maximum viewport.

px

Live output

Results

CSS Clamp
font-size: clamp(1.000rem, 0.818rem + 0.909vw, 1.500rem);

Report

Export and share

Document

Copy and share

Assumptions

  • The output assumes a 16px root font size when converting the min, max, and intercept values into REM.
  • Viewport widths and font sizes should describe a sensible increasing range for the fluid formula to be useful.
  • The generated rule targets font sizing specifically, even though the same `clamp()` pattern can be adapted for spacing.

Sensitivity preview

No numeric sensitivity scenarios are available.

Related Tools

View All
PX to REM
Convert pixels to REM units based on root font size.
Box Shadow Gen
Generate CSS box-shadow code visually.
Meta Tag Gen
Generate standard HTML meta tags for SEO.
Ratio Calculator
Solve for X in ratios (A:B = C:D).
JSON Formatter
Prettify or Minify JSON data.

About this Fluid Type

Fluid typography allows font sizes to scale smoothly between a minimum and maximum value as the viewport width changes. This is achieved using the CSS `clamp()` function, which removes the need for multiple media queries.

Who this calculator is for

  • Frontend developers building responsive type scales without maintaining multiple breakpoint overrides.
  • Design-system teams turning fixed desktop/mobile specs into one fluid `clamp()` rule.
  • Anyone modernizing typography so headings scale more gracefully across phones, tablets, and desktops.

When to use it

  • Generate a `clamp()` value for hero headings, section titles, or body text that should resize smoothly.
  • Translate a designer's min/max font specs and viewport breakpoints into production-ready CSS.
  • Compare different viewport ranges before baking fluid type values into tokens or utility classes.

How to use this calculator

  1. Enter Min Viewport width (e.g., 320px).
  2. Enter Max Viewport width (e.g., 1200px).
  3. Enter Min Font Size.
  4. Enter Max Font Size.
  5. Copy the generated CSS Clamp code.

Key assumptions

  • The output assumes a 16px root font size when converting the min, max, and intercept values into REM.
  • Viewport widths and font sizes should describe a sensible increasing range for the fluid formula to be useful.
  • The generated rule targets font sizing specifically, even though the same `clamp()` pattern can be adapted for spacing.

Accuracy and testing

Review formula sources, default test cases, assumptions, unit handling, rounding rules, and changelog for this calculator.

View accuracy page

How this calculator works

The formula calculates the slope (rate of change) between the two font sizes over the two viewport widths. It produces a `clamp(MIN, PREFERRED, MAX)` value where PREFERRED is a combination of REM and VW units.

Inputs explained

Viewport Range

The screen width range over which the font size will actively scale. Below min width, font stays at min size. Above max width, it stays at max size.

Font Size Range

The smallest and largest sizes you want your text to be.

Understanding your results

The output uses REM for accessibility and VW (Viewport Width) for fluid scaling.

Key Features

  • Modern CSS Clamp
  • REM output
  • Smooth scaling

Frequently Asked Questions

What is fluid typography?
Fluid typography means text size scales smoothly between a minimum and maximum value depending on the viewport width, rather than jumping at fixed breakpoints.
How does CSS clamp() work?
clamp(MIN, VAL, MAX) restricts a value between an upper and lower bound. It effectively says: 'Use VAL, but never go lower than MIN and never go higher than MAX'.
Is clamp() supported in all browsers?
Yes, CSS clamp() has excellent support across all modern browsers (Chrome, Firefox, Safari, Edge).
Why use fluid type instead of media queries?
Fluid type requires less code and creates a smoother experience during window resizing. Media queries can create 'jumps' in font size at specific breakpoints.
Can I use other units like EM or CH in clamp?
Yes, clamp() accepts any valid CSS length unit, including em, rem, ch, %, vw, and vh.