PX to REM
Convert pixels to rem with a custom root font size.
Convert Pixels (px) to REM (rem). Results update as you type.
px
Browser default is 16px
px to rem conversion table (base 16px)
| Pixels | REM |
|---|---|
| 1px | 0.0625rem |
| 2px | 0.125rem |
| 4px | 0.25rem |
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 28px | 1.75rem |
| 32px | 2rem |
| 36px | 2.25rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 56px | 3.5rem |
| 64px | 4rem |
| 72px | 4.5rem |
| 96px | 6rem |
PX to REM Converter
Convert pixel values to rem units for responsive CSS. Type a pixel value – for example 24 – and get 1.5rem instantly. Change the root font size if your project does not use the browser default of 16px, paste a whole list of values into the bulk box, or click any row of the conversion table to load it.
The PX to REM formula
rem = px ÷ root font size
With the default 16px root:
| Pixels | REM |
|---|---|
| 8px | 0.5rem |
| 12px | 0.75rem |
| 16px | 1rem |
| 20px | 1.25rem |
| 32px | 2rem |
If your stylesheet uses the popular html { font-size: 62.5%; } trick, the root becomes 10px and the math is simply "move the decimal point": 24px = 2.4rem.
Why designers convert to rem
Design files in Figma or Sketch are measured in pixels, but hard-coded pixel sizes ignore the reader's font preferences. When a visitor sets a larger default text size, every rem-based font size, margin, and padding grows with it, which is exactly what accessibility guidelines (WCAG 1.4.4, Resize Text) ask for. Converting the design's pixel values to rem keeps the proportions of the design while respecting that setting.
Tips for using rem
- Use rem for font sizes, spacing, and breakpoints; keep 1px borders and hairlines in px.
- Round to at most four decimals – browsers render sub-pixel values anyway.
- In Sass you can automate the conversion with a function such as
@function rem($px) { @return math.div($px, 16px) * 1rem; }.
Need the opposite direction? Use REM to PX. For values relative to a parent element, see PX to EM.
Frequently Asked Questions
How do I convert px to rem?
Divide the pixel value by the root font size. With the browser default of 16px, 24px ÷ 16 = 1.5rem and 12px ÷ 16 = 0.75rem.
What root font size should I use?
Use the font-size set on the html element. If you have not set one, browsers use 16px. Some projects set html { font-size: 62.5% } so that 1rem equals 10px – enter 10 as the base in that case.
Why use rem instead of px?
rem values scale with the user's browser font-size setting, so layouts stay readable for people who increase their default text size. Pixel values ignore that preference.
What is the difference between rem and em?
rem is always relative to the root (html) font size, while em is relative to the font size of the parent element, so em values compound when elements are nested.