CSS Unit Converter

Convert CSS units with the right context

Moving a design from pixels to rem, working out a fluid font size in vw or matching a print stylesheet in points all depend on a few base numbers. This converter lets you set them, so the answers match your site rather than a default.

How to use it

1. Enter a value and choose its unit.
2. Read the same length in px, rem, em, pt, vw, vh and percent. Each has a copy button.
3. Adjust the context values if yours differ from the defaults.

The context values

• Root font size is the html font size, normally 16px. It decides rem.
• Parent font size decides em. Nested elements can change it, so use the size of the element you care about.
• Viewport width and height decide vw and vh. Try common sizes like 375 wide for phones or 1440 for laptops.
• % of is the pixel size that 100 percent stands for. For font-size it is the parent font size; for width it is the parent width.

Why use rem

Rem units scale with the user's browser font size setting, which is an accessibility feature. People with low vision often raise their default size, and layouts built with rem grow with them while pixel layouts do not. A common pattern is rem for font sizes and spacing, px for borders and fine details, and percentages or vw for fluid layouts.

Quick reference

1. px to rem: divide by the root size.
2. rem to px: multiply by the root size.
3. pt to px: multiply by 4/3.
4. vw to px: viewport width times the value divided by 100.

The table

The table at the bottom shows common pixel sizes from 8 to 96 in rem, em, pt and vw using your context values. Keep it handy when you build a type scale or spacing system, and change the root size to see how the whole scale shifts.