CSS Unit Converter
Convert between px, rem, em and pt with a configurable root font size.
How to use the CSS Unit Converter
CSS offers several length units and converting between them by hand is error-prone. Enter a value once, pick its unit and set your root font size \u2014 this tool shows the equivalent in px, rem, em and pt simultaneously, so you can copy whichever one your stylesheet needs.
- 01Enter the value you want to convert.
- 02Pick its unit (px, rem, em or pt).
- 03Set the root font-size in px if your project does not use the default 16px.
- 04Read the four equivalent values and copy the one you need.
tips
- —Most browsers default to a 16px root font size, which is why 1rem = 16px out of the box.
- —For responsive layouts built on a rem scale, set
html { font-size: 62.5% }so 1rem becomes a tidy 10px. - —pt is mainly for print stylesheets. On screen it converts to 1.333px exactly (96px per inch, 72pt per inch).
frequently asked
What is the difference between rem and em?+
rem is relative to the root element’s font size (the <html> element). em is relative to the current element’s font size, which means it compounds when nested. For predictable scaling across a layout, prefer rem.
Why does rem depend on a root font size?+
Browsers default to a 16px root font size, so 1rem = 16px. If you set html { font-size: 10px; } in your stylesheet, then 1rem becomes 10px everywhere. This tool lets you set that root value so the rem column matches your project.
How accurate is the pt conversion?+
CSS defines 1 inch as 96px and 1 inch as 72pt, so 1pt = 1.333…px exactly. The conversion is exact, not rounded, though the displayed result is rounded for readability.
Why are the em values the same as rem here?+
em is contextual: it depends on the font size of the element it is used on. This tool cannot know your element’s context, so it treats em the same as rem (relative to root). In real CSS, em values will differ once you nest elements.