KOEN

PX to REM Converter & clamp() Calculator

UNIT · CONVERTER

Convert px, rem and em with a custom root font size, and generate fluid typography clamp() values with a live viewport preview and common size chart.

PX ⇄ REM ⇄ EM

Unit converter

rem is relative to the root (html) font size, em to the parent element’s font size. The browser default is 16px.

FLUID TYPE · CLAMP()

clamp() calculator

Font size
Viewport width

px → —px

Fluid typography in action

Click the preview text to edit it. Changing the root font size recalculates the rem values.

HOW TO

How to use

  1. Set the root font size (16px is the browser default, or pick 10px for the 62.5% trick).
  2. Type a value into px, rem or em and the other units update instantly. Click Copy next to a value.
  3. For clamp(), enter the min and max font size and the viewport widths where they should apply.
  4. Drag the viewport slider to preview the size at different widths, then copy clamp() or the full font-size declaration.
PAIRS WELL WITH

Pairs well with

FAQ

FAQ

What's the difference between rem and em?

rem is relative to the root (html) font size, so it's the same everywhere on the page. em is relative to the parent element's font size, so it compounds when elements are nested.

How does the clamp() formula work?

clamp(min, preferred, max) keeps the size between your min and max. The preferred value combines rem and vw so the text grows smoothly between the two viewport widths you set.

Why is clamp() output in rem?

Using rem for the min and max respects users who change their browser's default font size. A px version is shown underneath if you need it.