Fluid Type & Units

Convert px, rem and em, and build clamp() values for fluid typography.

Runs entirely in your browser. Nothing you type or paste is sent anywhere.

Root font size

Browsers default to 16px.

Min viewport

Where fluid sizing starts.

Max viewport

Where it stops growing.

Unit converter

Value

Parent font size (for em)

px24px
rem1.5rem
em1.5em
pt18pt

Quick reference at a 16px root

10px: 0.625rem
12px: 0.75rem
14px: 0.875rem
16px: 1rem
18px: 1.125rem
20px: 1.25rem
24px: 1.5rem
28px: 1.75rem
32px: 2rem
40px: 2.5rem
48px: 3rem
64px: 4rem

clamp() generator

Min size

Max size

clamp(1rem, 0.6087rem + 1.7391vw, 2rem)

Show the maths

slope = (max − min) ÷ (maxViewport − minViewport): = (32 − 16) ÷ (1280 − 360) = 0.017391
intercept = min − slope × minViewport: = 16 − 0.017391 × 360 = 9.7391px = 0.6087rem
preferred = intercept + slope × 100vw: = 0.6087rem + 1.7391vw
bounds = min ÷ root, max ÷ root: = 1rem … 2rem (root 16px)

Preview viewport width820px

At 820px wide the text is 24px (1.5rem).

Fluid type scales smoothly

Fluid type scale

Base size at min viewport

Ratio at min viewport

Base size at max viewport

Ratio at max viewport

Variable prefix

Preview viewport width1280px

--step-561px
39.81 → 61.04px
Almost before we knew it
--step-448.8px
33.18 → 48.83px
Almost before we knew it
--step-339.1px
27.65 → 39.06px
Almost before we knew it
--step-231.3px
23.04 → 31.25px
Almost before we knew it
--step-125px
19.2 → 25px
Almost before we knew it
--step-020px
16 → 20px
Almost before we knew it
--step--116px
13.33 → 16px
Almost before we knew it
--step--212.8px
11.11 → 12.8px
Almost before we knew it

:root { --step--2: clamp(0.6944rem, 0.6531rem + 0.1836vw, 0.8rem); --step--1: clamp(0.8333rem, 0.7681rem + 0.2899vw, 1rem); --step-0: clamp(1rem, 0.9022rem + 0.4348vw, 1.25rem); --step-1: clamp(1.2rem, 1.0582rem + 0.6304vw, 1.5625rem); --step-2: clamp(1.44rem, 1.2392rem + 0.8924vw, 1.9531rem); --step-3: clamp(1.728rem, 1.4488rem + 1.2407vw, 2.4414rem); --step-4: clamp(2.0736rem, 1.6908rem + 1.7011vw, 3.0518rem); --step-5: clamp(2.4883rem, 1.9693rem + 2.3067vw, 3.8147rem); }

More in Design & CSS

Color Lab

Convert HEX, RGB, HSL and OKLCH, check WCAG contrast and generate tint scales.

Gradient Generator

Build linear, radial and conic CSS gradients visually.

Shadow Generator

Layered CSS box shadows with a live preview.