Why CSS has so many units
CSS lets you size text, spacing and layouts with absolute units such as pixels and points, and relative units such as rem, em, percent, vw and vh. Relative units make designs scale when a visitor changes their browser's font size or uses a different screen. But designs are usually made in pixels, so developers constantly need to convert. This tool converts one value into every unit at once.
How to use the converter
- Enter a value and choose its unit, for example 24 px.
- Check the settings: the root font size is 16 px in almost every browser. Change the parent size if you are converting em, and the viewport size if you need vw or vh.
- Click any result to copy it.
The units explained
| Unit | Relative to | Formula from px |
|---|---|---|
| rem | Root (html) font size | px ÷ root size |
| em | Parent element's font size | px ÷ parent size |
| % | Parent font size (for font-size) | px ÷ parent size × 100 |
| pt | Print points (1 pt = 1/72 inch) | px × 0.75 |
| vw | 1% of viewport width | px ÷ viewport width × 100 |
| vh | 1% of viewport height | px ÷ viewport height × 100 |
Example: px to rem
With the default root size of 16 px, a 24 px heading is 24 ÷ 16 = 1.5rem, and a 14 px caption is 14 ÷ 16 = 0.875rem. If a user sets their browser text size to 20 px, the heading automatically becomes 30 px, which is better for accessibility than a fixed pixel size.
Frequently asked questions
Should I use rem or em?
Use rem for font sizes and most spacing because it always refers to the same root value. Use em when something should scale with its own text, such as padding inside a button.
What does % mean for widths?
For width, percent refers to the parent element's width, not the font size. This converter uses % in the font-size sense.
Why is 1px not always one screen pixel?
A CSS pixel is a reference unit. On high-density screens, one CSS pixel may be drawn with 2 or 3 physical pixels.