Skip to content
Gridtray

CSS Unit Converter

Convert a value between px, rem, em, pt, vw, vh and %, with your own root and viewport sizes, and generate fluid clamp() sizes that scale between two screen widths.

Convert

px
px
px
px

Fluid size with clamp()

px
px
px
px
24 px equals
24px
  • px24
  • rem1.5
  • em1.5
  • pt18
  • vw1.6667
  • vh2.6667
  • %150
Fluid font size
font-size: clamp(2rem, 1.2958rem + 3.0047vw, 4rem);
px

At 900px wide the text is 47.8px.

Fluid headline

How to use the css unit converter

  1. Enter a value and its unit.
  2. Set the root font size, the parent font size and the viewport if they differ from the defaults.
  3. Copy any converted value.
  4. For fluid type, enter the smallest and largest size and the viewport range, then copy the clamp() line.

The units

  • rem: relative to the root (html) font size, 16px by default.
  • em: relative to the parent’s font size, so it compounds when nested.
  • pt: a print unit; 1pt is 1/72 inch, which CSS defines as 1.333px.
  • vw / vh: 1% of the viewport’s width or height.

How the clamp() value is calculated

A fluid size is a straight line between two points: the smallest size at the smallest viewport and the largest size at the largest. The slope is (max size − min size) ÷ (max viewport − min viewport), written as vw, and the intercept is the remaining rem value. clamp() keeps the result between the two sizes outside that range. Mixing rem into the middle term keeps the text zoomable.

Questions

How do I convert px to rem?

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

Is clamp() safe to use?

Yes. All current browsers support it. Keep a rem part in the middle value so users can still zoom text.