Convert px → rem → em → vw. Generate fluid clamp() CSS. Build type scales. All instant, all free.
Base font size:px(usually 16px — browser default)
Pixels
px — absolute pixels
REM
rem — relative to root (html)
EM
em — relative to parent element
Points (pt)
pt — 1pt = 1.333px
Viewport Width (vw)
vw — % of viewport width (at 1600px)
Percent (%)
% — relative to parent font-size
font-size: 1rem; /* 16px */
💡 Tip: Use rem for font sizes — scales with user's browser preferences. Use em for spacing relative to text size.
🌊 CSS clamp() creates fluid typography that scales smoothly between a minimum and maximum size as the viewport changes. No media queries needed.
Min Size (mobile)
px — smallest the text gets
Max Size (desktop)
px — largest the text gets
Min Viewport (start scaling)
px — usually 320 (small mobile)
Max Viewport (stop scaling)
px — usually 1440 (desktop)
font-size: clamp(1rem, 2.5vw + 0.5rem, 2rem);
/* rem version */
Live Preview
The quick brown fox jumps over the lazy dog
320px880px viewport1440px
Base Size
Scale Ratio
Font Family
Font Size (px)
Font Family
Weight
The quick brown fox jumps over the lazy dog
32px · 2rem · Outfit · 700
Understanding CSS Font Units
px (Pixels) — Absolute
Pixels are the simplest unit — font-size: 16px will always be 16 pixels regardless of context. Problem: it ignores the user's browser font size preference, causing accessibility issues.
rem — Relative to Root
rem is relative to the root element's (html) font size. Default browser base is 16px, so 1rem = 16px, 1.5rem = 24px. Best practice for typography — respects user preferences.
em — Relative to Parent
em is relative to the parent element's font size. Useful for spacing and padding that should scale with the text, but can compound unexpectedly in nested elements.
clamp() — Fluid Typography
clamp(min, preferred, max) creates text that grows with the viewport between defined limits. No media queries needed. The preferred value is typically a vw calculation: font-size: clamp(1rem, 2.5vw + 0.5rem, 2rem).