Anonymous usage statistics

With your permission we record which pages are visited, using random identifiers, to understand how the site is used. Nothing is recorded unless you accept. Privacy Policy

Free tool

CSS unit converter and fluid type

Convert pixels to rem, build a type scale, and write a clamp() size that grows smoothly between two screen widths.

Runs in your browser. What you type is not sent anywhere.

Convert

Browsers use 16 unless the site changes it.

px
24
rem
1.5
em
1.5

Common sizes

The usual pixel sizes in rem, with a root size of 16px. Choose one to convert it.

Type scale

Each step is the one before it multiplied by a ratio. Pick a base size and a ratio.

  • The quick brown fox48.83px · 3.052rem
  • The quick brown fox39.06px · 2.441rem
  • The quick brown fox31.25px · 1.953rem
  • The quick brown fox25px · 1.563rem
  • The quick brown fox20px · 1.25rem
  • The quick brown fox16px · 1rem
  • The quick brown fox12.8px · 0.8rem
  • The quick brown fox10.24px · 0.64rem

Fluid size with clamp()

Choose the smallest and largest size and the screen widths between which the size grows. Move the slider to see it.

font-size: clamp(1rem, 0.5rem + 2vw, 2rem);

rem follows the root font size, so a visitor who raises the text size in their browser gets larger text. Using vw alone can stop that, which is why the middle value of clamp() adds a rem part. Check zoom and large text settings on real devices.

How to use it

  1. 01Enter a value and choose px or rem to convert, with your root font size if it is not 16.
  2. 02Pick a base size and a ratio to see a type scale in px and rem.
  3. 03Enter the smallest and largest size and the screen widths, then copy the clamp() line.

Questions

Why use rem instead of px?

rem is relative to the root font size, so text and spacing grow when a visitor makes the text larger in their browser. Pixels do not follow that setting.

What is the difference between rem and em?

rem is always relative to the root font size. em is relative to the font size of the element it is on, so it can compound when elements are nested. The numbers here are the same only when the element has the root size.

How does clamp() make a size fluid?

clamp(min, preferred, max) uses the preferred value but never goes below the minimum or above the maximum. The preferred value here is a straight line between your two sizes, so it grows smoothly from one to the other.

Why does the middle value have a rem part and a vw part?

A line is a starting offset plus a slope. The slope is the vw part and the offset is the rem part. Keeping the offset in rem lets the size still respond when the visitor changes their text size.

Is anything I enter sent anywhere?

No. The numbers are worked out in your browser.

Typography that fits every screen

We build design systems and responsive sites where type, spacing and layout scale cleanly from a phone to a wide monitor.

Explore digital solutions

More free tools

All tools