How to use the PX to REM Converter
- Type the value you want to convert and choose its unit.
- Set the root font size. Browsers default to 16 px, so leave it unless your CSS changes
html { font-size }. - Optionally set the parent font size (for em and %) and viewport width (for vw).
- Read the results and tap Copy next to the unit you need.
px vs rem vs em: which CSS unit should you use?
px is an absolute unit, so it ignores the user's browser font-size setting. rem is relative to the root (html) font size, which makes it the best choice for font sizes and spacing that should scale when someone enlarges their default text. em is relative to the parent element's font size, so nested em values compound, which is useful for components that should scale as a unit but easy to get wrong.
vw is one percent of the viewport width and is handy for fluid type, usually inside clamp(). Percentages for font-size are relative to the parent font size. The conversion here follows those exact rules, so you can paste the output straight into your stylesheet.
Using rem for text and spacing is also an accessibility win, because users who raise their default font size get a layout that scales with them. Check how it looks on different screens with the Responsive Viewport Resizer or the Screen Size Checker.
Frequently asked questions
How do I convert px to rem?
Divide the pixel value by the root font size. With the default 16 px root size, 24 px is 24 / 16 = 1.5 rem.
What is the default root font size in browsers?
Browsers default to 16 px unless the user or your CSS changes it. If you set html { font-size: 62.5% } the root becomes 10 px, so enter 10 as the base here.
When should I use em instead of rem?
Use em when a component's spacing should scale with its own font size, such as button padding. Use rem for global text sizes and layout spacing, since rem does not compound with nesting.
How do I convert px to vw?
Divide the pixel value by the viewport width and multiply by 100. For example, 144 px on a 1440 px wide viewport is 10 vw.