PX to REM Converter
Convert px to rem, em, pt and vw with any base size. Runs in your browser.
About this px to rem converter
This PX to REM converter turns pixel values into rem, and back, using whatever root font size your site has. It also converts to em, %, pt, vw and vh, shows a ready conversion table, and can rewrite every px value in a block of CSS at once. It is for front-end developers moving a design from Figma into CSS and for anyone tidying up an old stylesheet.
The math is simple, px ÷ root size, but the details are where people slip: a root of 62.5%, em inside a nested element, a media query that ignores your root size, or a 1px border that should stay 1px. The tool shows its working with your numbers, so you can check each step.
Features
Seven units at once
Type a value in px, rem, em, %, pt, vw or vh and see it in all the others. Each result has its own copy button.
Any root font size
16px by default, with quick picks for 10 (the 62.5% trick), 14, 18 and 20. A separate parent size makes em and % correct inside nested elements.
Viewport units
Set the viewport width and height, 1440 × 900 by default, to see what a pixel value is in vw or vh at that screen size.
Conversion table
29 common sizes from 1px to 128px in rem, em, pt and vw for your settings. The row matching your value is highlighted, and the table copies as tab-separated text for a spreadsheet.
Whole-stylesheet converter
Paste CSS and every px value becomes rem. Comments, strings and url() are never touched, @media conditions are left alone by default, and tiny values like 1px borders stay in px.
Shown working
The formula for each unit with your actual numbers, such as 24 ÷ 16 = 1.5rem.
Shareable link
The value, unit and root size go into the address bar, so a link reopens the same conversion.
How to use the px to rem converter
- 1Enter a value and pick its unit, such as 24 px.
- 2Set the root font size if your site does not use 16px.
- 3Copy the result in any unit, use the table, or paste CSS to convert it all.
When to use it
Turning a design into CSS
The mockup says 18px body text, 32px headings and 24px gaps. Read off 1.125rem, 2rem and 1.5rem from the table.
Making an old stylesheet scale
Paste a component's CSS, keep borders under 2px as they are, and replace it with the rem version so it follows the user's font size setting.
Checking a 62.5% setup
With html { font-size: 62.5% } the root is 10px, so set the base to 10 and 24px becomes 2.4rem.
Print styles
Convert screen pixels to points for a print stylesheet: 16px is 12pt.
How do you convert px to rem?
Divide the pixel value by the root font size: rem = px ÷ root. With the browser default of 16px, 24px ÷ 16 = 1.5rem, 14px ÷ 16 = 0.875rem and 40px ÷ 16 = 2.5rem. To go the other way, multiply: 1.25rem × 16 = 20px.
The root font size is the font-size of the html element. If your CSS does not set it, it is whatever the user chose in their browser settings, which is 16px unless they changed it. That is the point of rem: when a user picks a larger default font, everything sized in rem grows with it.
- 12px = 0.75rem
- 14px = 0.875rem
- 16px = 1rem
- 18px = 1.125rem
- 20px = 1.25rem
- 24px = 1.5rem
- 32px = 2rem
- 48px = 3rem
What is the difference between rem and em?
rem is relative to the root (html) font size, so 1.5rem is the same everywhere on the page. em is relative to the font size of the element itself, which for most properties means the size it inherited from its parent. Inside a block set to 20px, 1em is 20px, and a nested element at 0.8em of that is 16px.
That compounding is the reason most teams size text with rem. em is still useful for things that should scale with their own text, like padding on a button or the gap next to an icon. In the tool, set the parent font size to see em values for a specific context.
Should media queries use px, em or rem?
In a media query, rem and em do not use your root font size. They always refer to the browser's initial font size, usually 16px, even if you set html { font-size: 62.5% }. So @media (min-width: 48em) means 768px at default settings and grows if the user raises their font size.
px breakpoints do not react to font size settings, and em breakpoints do. Either can be a reasonable choice, but rem breakpoints calculated with a 10px root are a common bug. That is why the stylesheet converter skips @media conditions by default.
How are pt, vw and vh calculated?
CSS defines 1in as 96px and as 72pt, so 1pt = 96 ÷ 72 = 1.333px, and px × 0.75 gives points. 1vw is 1% of the viewport width: at 1440px wide, 1vw = 14.4px, so 36px is 2.5vw. vh works the same way with the height.
Viewport units scale with the screen, not with the user's font settings, so text sized only in vw ignores zoom on some browsers. If you want fluid type, combine both, as in clamp(1rem, 0.8rem + 1vw, 1.5rem).
Why use Mavros
| Mavros | Typical upload sites | |
|---|---|---|
| Units | px, rem, em, %, pt, vw and vh together | px and rem only |
| Context | Root, parent and viewport sizes | Root size only |
| Bulk CSS | Converts a stylesheet, skips media queries, comments and url() | One value at a time |
| Small values | Keeps values below a threshold in px | Converts 1px borders too |
| Working shown | Formula with your numbers | Answer only |
| Table | 29 sizes, copyable to a spreadsheet | Static image or short list |
Tips
- Avoid the 62.5% root trick on new projects. It breaks third-party components that expect 1rem = 16px, and it makes the user's own font setting behave less predictably.
- Leave 1px borders and hairlines in px. A 0.0625rem border can round to zero or blur at some zoom levels.
- Line-height works best unitless, such as 1.5, so it scales with the text without any conversion.
- Working out a percentage for a fluid layout instead? The percentage calculator does the arithmetic, and the unit converter covers physical lengths like cm and inches.
- After converting, tidy the stylesheet with the code beautifier or shrink it with the code minifier.
Questions
What is 16px in rem?
1rem, when the root font size is the default 16px. If your html element has a different font size, 16px is 16 divided by that size, so 1.6rem with a 10px root.
How many px is 1.5rem?
24px with a 16px root font size: 1.5 × 16 = 24. With a 10px root it is 15px, and with 18px it is 27px.
Why use rem instead of px?
rem respects the font size a user sets in their browser. If someone raises the default from 16px to 20px for readability, rem-based text and spacing grow with it, while px text stays fixed. WCAG 2.2 asks that text can be resized to 200% without breaking the layout.
What is the default root font size in browsers?
16px in Chrome, Firefox, Safari and Edge, unless the user changes it in settings. That is why 16 is the default base in most px to rem converters.
What does html { font-size: 62.5% } do?
It sets the root to 62.5% of 16px, which is 10px, so 1rem = 10px and the math becomes easy: 24px = 2.4rem. The cost is that every component must assume a 10px root. Set the base to 10 here to match it.
How do I convert px to em?
Divide the pixel value by the font size of the element's parent: em = px ÷ parent size. Inside a 20px parent, 30px is 1.5em. Untick the "same as root" box in the tool to set the parent size.
How many pt is 16px?
12pt. CSS fixes 96px to 72pt, so multiply pixels by 0.75 to get points.