Skip to content
HQ8T

PX to REM & clamp()

Convert px and rem; generate fluid clamp() CSS.

px ⇄ rem

px

Browser default is 16px

px
rem
Conversion table at 16px
1px = 0.0625rem2px = 0.125rem4px = 0.25rem6px = 0.375rem8px = 0.5rem10px = 0.625rem12px = 0.75rem14px = 0.875rem16px = 1rem18px = 1.125rem20px = 1.25rem24px = 1.5rem28px = 1.75rem32px = 2rem36px = 2.25rem40px = 2.5rem48px = 3rem56px = 3.5rem64px = 4rem72px = 4.5rem80px = 5rem96px = 6rem128px = 8rem

Fluid size with clamp()

px
px
px
px
font-size: clamp(1.125rem, 0.7624rem + 1.547vw, 2rem);

The quick brown fox

How to use

  1. 1Set the root font size (16px by default).
  2. 2Type pixels or rem; the other updates instantly.
  3. 3For fluid sizes, enter mobile and desktop sizes and screen widths.
  4. 4Copy the clamp() CSS and test it with the preview slider.

Frequently asked questions

How do I convert px to rem?

Divide pixels by the root font size. With the default 16px, 24px = 1.5rem.

Why use rem instead of px?

rem scales with the user's browser font setting, which improves accessibility.

What does clamp() do?

clamp(min, preferred, max) lets a size grow with the screen width but never go below the minimum or above the maximum.

Is the clamp formula accurate?

Yes. It uses a linear interpolation between your two screen widths, expressed in rem plus vw.

Is my data uploaded?

No. Everything runs in your browser; nothing you paste is sent to a server.

You may also need