About the PX to REM Converter
CSS lets you size text and spacing in pixels, but rem and em units scale with the user's font size, which helps accessibility and responsive design. Switching between them means dividing or multiplying by the base font size, usually 16 pixels. This converter does it in either direction and shows the result in every common unit at once: pixels, rem, em, points, a percentage of the font size and viewport width units. You can change the base font size if your root element uses something other than 16 pixels, and set a viewport width for vw. A table of common pixel sizes in rem is included as a handy reference.
Updated October 2026
How to use the PX to REM Converter
- 1Enter the value you want to convert.
- 2Choose the unit it is in.
- 3Set the base font size if your page does not use 16 px.
- 4Enter a viewport width if you want vw values.
- 5Read the result in every unit, and the quick table of common sizes.
A quick reference with a 16 px base
- 12 px = 0.75 rem.
- 14 px = 0.875 rem.
- 16 px = 1 rem.
- 20 px = 1.25 rem.
- 24 px = 1.5 rem.
- 32 px = 2 rem.
When to use each unit
Use rem for font sizes and for spacing that should grow with text. Use em for components that should scale with their own font size, such as the padding of a button. Use px for hairlines and borders that should stay crisp, and vw or clamp() for fluid headings. Percentages work well for widths and for fonts relative to a parent.
A practical workflow is to design in pixels and build in rem. Take each pixel size from your design file, divide by 16 and write the result in your style sheet, keeping a short list of values for consistency, such as 0.75, 0.875, 1, 1.25, 1.5 and 2 rem. Spacing then scales together with text, and a user who increases their default font size gets a layout that grows with it instead of breaking, which also helps you meet accessibility guidelines on text resizing.
Common pitfalls
Do not set the root font size in pixels, because that overrides the user's preference. Be careful with nested em values, which multiply: a list inside a list with 1.2em text becomes 1.44 times the base size. Test your layout with the browser font size set to large, to be sure it holds up.
Related tools
The CSS Gradient Generator and Box Shadow Generator create styles, the Color Converter changes between hex and RGB, the Screen Size Checker shows your viewport and the Unit Converter handles other lengths.
Features
- px, rem, em, pt, percent and vw
- Custom base font size
- Custom viewport width
- Common size reference table
- Works in both directions
- Copy the result as CSS values
Frequently asked questions
How do I convert px to rem?
Divide the pixel value by the base font size. With the usual 16 px base, 24 px is 24 ÷ 16 = 1.5 rem. To go the other way, multiply rem by 16.
What is the difference between rem and em?
rem is relative to the font size of the root html element, so it is the same everywhere. em is relative to the font size of the element's own parent or itself, so nested elements can compound. This tool treats them as equal for a given base.
Why use rem instead of px?
Because rem follows the user's browser settings. People who raise their default font size for readability see your whole layout scale up, whereas fixed pixel sizes ignore the setting.
What is the default browser font size?
16 pixels in nearly all browsers. Some developers set html font-size to 62.5 percent so that 1 rem equals 10 px, which makes sums easier. If you do that, enter 10 as the base.
How do I convert px to pt?
Multiply by 0.75, since CSS defines 1 inch as 96 px and 72 pt. So 16 px is 12 pt. Points are mostly used for print styles.
What does vw mean?
vw is one percent of the viewport width. At a 1,440 px wide window, 10vw is 144 px. It is useful for fluid type and layouts, but combine it with a limit so text does not become too large or too small.