Free CSS Unit Converter
PX to REM Converter
Convert px, rem, em, pt, and percent in both directions instantly. Set any root font size, copy the CSS with one click, or scan the live table for every common value from 10 to 64px.
Convert a value
Common conversions
| px | rem | em | pt |
|---|
How to Convert PX to REM
The math behind every px to rem conversion is a single division: rem = px ÷ root font size. In almost every browser, the default root font size is 16px, so you divide your pixel value by 16 to get rem.
Here is a worked example. Say your design calls for a 24px heading:
24 ÷ 16 = 1.5, so font-size: 24px becomes font-size: 1.5rem.
Going the other way is just as simple — multiply instead of divide: px = rem × root font size. So 1.5rem × 16 = 24px. This converter runs both formulas for you in real time, and if your project uses a different root font size (say, the popular 62.5% trick that sets the root to 10px), change the root value above and every result updates instantly. When you are done, copy the generated CSS straight into your stylesheet.
PX vs REM vs EM: What's the Difference?
These three units answer the same question — how big should this text be? — but they measure from different reference points.
PX (pixels) is an absolute unit. A 16px font stays 16px no matter what the user or any parent element does. That predictability is handy for borders and fine details, but it makes typography rigid.
REM (root em) is relative to the root element's font size — the <html> tag. 1rem always equals the root font size, no matter how deeply an element is nested. That consistency makes rem the go-to unit for font sizes, spacing, and media queries.
EM is relative to the parent element's font size. Nest a 1.2em element inside another 1.2em element and the sizes compound (1.2 × 1.2 = 1.44×), which is powerful for components that scale with their container but easy to lose track of in deep DOM trees.
The biggest argument for rem is accessibility. Many users increase their browser's default font size to read comfortably. Text sized in rem scales with that preference automatically; text hard-coded in px ignores it. Using rem for type is one of the simplest accessibility wins available, and it is why modern style guides and frameworks default to rem-based type scales.
Common PX to REM Conversions (16px Root)
With the browser-default root font size of 16px, these are the conversions front-end developers reach for most. Bookmark this cheat sheet or use the live table above for the full 10–64px range.
- 12px = 0.75rem — fine print, captions, badges
- 14px = 0.875rem — secondary text, form labels
- 16px = 1rem — body text, the browser default
- 18px = 1.125rem — comfortable long-form reading
- 20px = 1.25rem — lead paragraphs, small headings
- 24px = 1.5rem — H3-level headings
- 32px = 2rem — H1 and hero headings
Notice the pattern: every value is simply the pixel size divided by 16. Once a few of these anchors stick in your memory, you can estimate the rest — or just keep this converter open in a tab.
Frequently asked questions
What is 1rem in px?
By default, 1rem equals 16px, because nearly all browsers set the root font size to 16px. If a stylesheet changes the root font size — for example, html { font-size: 10px } or the 62.5% trick — then 1rem equals that new value instead. Use the root font size setting in this converter to match your project.
How do I convert px to rem?
Divide the pixel value by the root font size: rem = px ÷ root. With the default 16px root, 24px ÷ 16 = 1.5rem and 12px ÷ 16 = 0.75rem. To go from rem back to px, multiply instead: 1.5rem × 16 = 24px. This tool does both directions automatically for any root font size.
Should I use px or rem for font sizes?
Use rem for font sizes in most cases. Rem-based text scales when users raise their browser's default font size, which px ignores — a meaningful accessibility benefit. Rem also keeps your type scale consistent site-wide. Px is still fine for things that shouldn't scale with text, like 1px borders or fixed icon dimensions.
What if my root font size is not 16px?
The formula stays the same — rem = px ÷ root — you just divide by your actual root value. If your CSS sets html { font-size: 62.5% }, the root becomes 10px, so 24px = 2.4rem instead of 1.5rem. Enter your custom root font size in the converter above and every result and the conversion table update instantly.
What is the difference between em and rem?
Rem is always relative to the root (html) font size, while em is relative to the parent element's font size. Nested em values compound — 1.2em inside 1.2em renders at 1.44 times the base — which can make sizes hard to predict. Rem stays constant at any nesting depth, so it's the safer default for font sizes; em suits component-local scaling like padding that tracks the element's own text size.
What is the difference between pt and px?
Points (pt) are a print unit — 1pt is 1/72 of an inch — while pixels (px) are the standard screen unit. In CSS, 1pt equals 1.333px (96 ÷ 72), so a 12pt font is 16px and 0.75pt equals 1px. Use pt only for print stylesheets; on screen, stick with px or rem. This converter handles pt to px and back automatically.
