PX to REM Converter
Convert pixels to rem (px to rem) for accessible CSS
1 px = 0.0625 rem at the default 16 px root size, so 16 px = 1 rem. To convert px to rem, divide the pixels by 16, or by your root font size if you changed it.
Pixels to REM (16px root) converter
Live16 px is the default root font size in every major browser.
- 0.0625 em
- 0.75 pt
- 0.010416667 in
How to convert pixels to rem
The rem (root em) is a CSS length equal to the font size of the root html element. Every major browser ships with a default text size of 16 px, so unless a style sheet or the reader changes it, 1 rem = 16 px. Converting is therefore a single division: 24 px ÷ 16 = 1.5 rem, and 14 px ÷ 16 = 0.875 rem. For em, pt and the other CSS lengths, open the digital and typography converter.
The trap is that 16 is a default, not a constant. If a reader sets their browser text to Large, or your CSS sets html { font-size: 62.5% }, the root changes and every rem value follows it. That is exactly why rem is used: a layout written in rem grows with the reader's preferred text size, while one written in px ignores it. Pick a different root with the Root font size chips above, or divide by that number yourself; the chart below lists the common ones. For physical sizes, the pixels to inches converter uses the 96 px per inch CSS standard.
Step by step
- Find the root font size (16 px unless your CSS changes it).
- Divide the pixel value by the root size.
- Write the result with the rem unit, for example
1.5rem. - Keep up to four decimals; browsers round the final pixel value themselves.
See it on a scale
Worked examples
Three values from a typical design spec: small body text, a section heading and a large display heading.
14 px ÷ 16 = 0.875 rem
= 0.875 rem
24 px ÷ 16 = 1.5 rem
= 1.5 rem
40 px ÷ 16 = 2.5 rem
= 2.5 rem
How do I convert px to rem in Sass or CSS?
In plain CSS, calc(24rem / 16) gives 1.5rem, and in Sass a small function turns rem(24px) into 1.5rem at build time.
The CSS version works in every modern browser because calc() can divide a length by a plain number. It keeps the original pixel value visible in the source, which helps when you compare against a design file, but the browser does the division on every page load.
In Sass, load the math module with @use "sass:math"; and define @function rem($px, $root: 16px) { @return math.div($px, $root) * 1rem; }. Then font-size: rem(24px) compiles to 1.5rem, and rem(24px, 10px) gives 2.4rem for a project with a 10 px root. The math.div function replaced the old slash division in Dart Sass, so this form suits current releases.
For an existing code base, the PostCSS plugin postcss-pxtorem rewrites px values to rem automatically, with options to leave borders and other properties in px. Whatever the method, spot-check a few results against the chart above, because a wrong root size shifts every value by the same factor.
How can I convert px to rem in my head?
Halve the pixel value four times, because 16 = 2 × 2 × 2 × 2: 40 px → 20 → 10 → 5 → 2.5rem.
Three anchors make most values instant:
- Every 4 px is a quarter rem, so 12 px is 0.75rem, 20 px is 1.25rem and 28 px is 1.75rem.
- Every 2 px is 0.125rem and every single pixel is 0.0625rem, so 18 px = 1.125rem and 13 px = 0.8125rem.
- Multiples of 8 px give half-rem steps: 8, 16, 24 and 32 px are 0.5, 1, 1.5 and 2rem.
The halving trick works because 16 is a power of two; the decimal to binary converter shows why dividing by 16 simply shifts a binary number four places to the right. With a 10 px root the shortcut is simpler still: move the decimal point one place, so 36 px is 3.6rem.
PX to REM conversion chart (16 px root)
Pixel values from design tools converted to rem at the default 16 px root. Values are exact; any that end in long decimals, such as 13 px, are simply not multiples of 1/16.
| Pixels (px) | REM (16px root) (rem) |
|---|---|
| 1 px | 0.0625 rem |
| 2 px | 0.125 rem |
| 4 px | 0.25 rem |
| 6 px | 0.375 rem |
| 8 px | 0.5 rem |
| 10 px | 0.625 rem |
| 11 px | 0.6875 rem |
| 12 px | 0.75 rem |
| 13 px | 0.8125 rem |
| 14 px | 0.875 rem |
| 15 px | 0.9375 rem |
| 16 px | 1 rem |
| 18 px | 1.125 rem |
| 20 px | 1.25 rem |
| 22 px | 1.375 rem |
| 24 px | 1.5 rem |
| 28 px | 1.75 rem |
| 30 px | 1.875 rem |
| 32 px | 2 rem |
| 36 px | 2.25 rem |
| 40 px | 2.5 rem |
| 44 px | 2.75 rem |
| 48 px | 3 rem |
| 56 px | 3.5 rem |
| 60 px | 3.75 rem |
| 64 px | 4 rem |
| 72 px | 4.5 rem |
| 80 px | 5 rem |
| 96 px | 6 rem |
| 128 px | 8 rem |
PX vs REM: what is the difference?
Both are CSS lengths from the same W3C module, but a pixel is fixed and a rem follows the root font size. That single difference decides which one belongs where.
| Attribute | Pixels | REM (16px root) |
|---|---|---|
| Symbol | px | rem |
| System | CSS reference pixel | CSS relative |
| Defined as | 1/96 in | 16 px at default size |
| One unit equals | 0.0625 rem | 16 px |
| Type of length | Absolute CSS unit | Font-relative CSS unit |
| Relative to | Nothing: 1/96 of a CSS inch | The computed font size of the root html element |
| Follows the reader's default text size | No | Yes |
| Scales with browser zoom | Yes | Yes |
| Best for | Borders, box shadows, hairlines | Font sizes, spacing and component dimensions |
5 key differences
- One rem always equals the computed font size of the html element, which is 16 px unless the page or the reader changes it.
- When a reader raises the default font size from 16 px to 20 px, rem-based text grows by 25% while px-based text stays the same.
- Browser zoom enlarges px and rem equally, so only the default font-size preference tells the two apart.
- Fractional rem values are exact: 0.8125rem renders as 13 px at a 16 px root.
- The CSS Values and Units Module Level 3 defines both units, the px as 1/96 in and the rem as the font size of the root element.
PX to REM at other root font sizes
If your project sets a different root size, divide by that size instead. The 10 px column corresponds to the 62.5% technique, and 20 px is what a reader gets with the Large or 125% browser setting in many browsers.
| Pixels | Root 10 px | Root 12 px | Root 14 px | Root 16 px | Root 18 px | Root 20 px |
|---|---|---|---|---|---|---|
| 8 px | 0.8 rem | 0.6667 rem | 0.5714 rem | 0.5 rem | 0.4444 rem | 0.4 rem |
| 10 px | 1 rem | 0.8333 rem | 0.7143 rem | 0.625 rem | 0.5556 rem | 0.5 rem |
| 12 px | 1.2 rem | 1 rem | 0.8571 rem | 0.75 rem | 0.6667 rem | 0.6 rem |
| 14 px | 1.4 rem | 1.1667 rem | 1 rem | 0.875 rem | 0.7778 rem | 0.7 rem |
| 16 px | 1.6 rem | 1.3333 rem | 1.1429 rem | 1 rem | 0.8889 rem | 0.8 rem |
| 18 px | 1.8 rem | 1.5 rem | 1.2857 rem | 1.125 rem | 1 rem | 0.9 rem |
| 20 px | 2 rem | 1.6667 rem | 1.4286 rem | 1.25 rem | 1.1111 rem | 1 rem |
| 24 px | 2.4 rem | 2 rem | 1.7143 rem | 1.5 rem | 1.3333 rem | 1.2 rem |
| 32 px | 3.2 rem | 2.6667 rem | 2.2857 rem | 2 rem | 1.7778 rem | 1.6 rem |
| 40 px | 4 rem | 3.3333 rem | 2.8571 rem | 2.5 rem | 2.2222 rem | 2 rem |
| 48 px | 4.8 rem | 4 rem | 3.4286 rem | 3 rem | 2.6667 rem | 2.4 rem |
| 64 px | 6.4 rem | 5.3333 rem | 4.5714 rem | 4 rem | 3.5556 rem | 3.2 rem |
When should you use rem, em or px?
Use rem for font sizes and spacing, em for details that should scale with their own text, and px for hairlines and shadows that should stay fixed.
- rem always refers to the root font size, so 1.5rem means the same thing everywhere on the page. Use it for font sizes, spacing, and most component dimensions.
- em refers to the font size of the current element. It compounds when nested: a list item set to 1.2em inside another 1.2em list is 1.44 times the parent's text. Use it for things that should scale with their own text, such as icon sizes or button padding.
- px is fixed. It suits hairline borders, box shadows and other details that should not grow with text.
Why rem helps accessibility
WCAG 2.2 success criterion 1.4.4 asks that text can be resized up to 200% without losing content or function. Browser zoom scales px and rem alike, but the default font size setting only scales relative units. A reader who sets 20 px as their default gets 1.25 times larger text and spacing on a rem-based site, and no change at all on a px-only one.
Tailwind CSS type scale in px and rem
Tailwind's default font-size utilities are defined in rem on a 16 px root. The last column shows the size a reader would see with a 20 px browser default. Tailwind's spacing scale follows the same idea: each step is 0.25rem, so p-4 is 1rem (16 px) of padding.
| Utility | Pixels (16 px root) | rem | At a 20 px root |
|---|---|---|---|
| text-xs | 12 px | 0.75 rem | 15 px |
| text-sm | 14 px | 0.875 rem | 17.5 px |
| text-base | 16 px | 1 rem | 20 px |
| text-lg | 18 px | 1.125 rem | 22.5 px |
| text-xl | 20 px | 1.25 rem | 25 px |
| text-2xl | 24 px | 1.5 rem | 30 px |
| text-3xl | 30 px | 1.875 rem | 37.5 px |
| text-4xl | 36 px | 2.25 rem | 45 px |
| text-5xl | 48 px | 3 rem | 60 px |
| text-6xl | 60 px | 3.75 rem | 75 px |
| text-7xl | 72 px | 4.5 rem | 90 px |
What is the 62.5% font-size trick?
The 62.5% trick sets html { font-size: 62.5% } so that 1 rem equals 10 px at the default 16 px browser size (16 × 0.625 = 10), which makes the math easy: 24 px is 2.4rem. It still respects the reader's setting, because 62.5% of a 20 px default is 12.5 px. The trade-off is that every component must then set its own font size, since unstyled text would render at 10 px.
Other px to rem pitfalls
- Setting the root in px.
html { font-size: 16px }overrides the reader's preference and defeats the purpose of rem. Use a percentage or leave it alone. - Media queries. em and rem inside a media query use the browser's initial font size, not the value set on
html, so 48em is 768 px at the default. - Rounding to two decimals. 0.81rem is 12.96 px, not 13 px. Keep four decimals (0.8125rem) for exact matches.
- Converting borders. A 1 px border becomes 0.0625rem and can disappear or blur at some zoom levels. Leave hairlines in px.
Colors in the same style sheet are written in hexadecimal; the decimal to hex converter turns RGB values into codes like #4682B4. For image and video proportions, see the aspect ratio calculator.
Sources and further reading
The standards and references behind the numbers on this page. Links open in a new tab.
Standards and official sources
Further reading
- PixelWikipedia
PX to REM FAQs
Short, exact answers to what people ask most.
How do I convert px to rem?
Divide the pixel value by the root font size, which is 16 px by default. For example, 32 px ÷ 16 = 2 rem, and 12 px ÷ 16 = 0.75 rem.
What is 1 rem in pixels?
1 rem equals the root font size, which is 16 px in every major browser by default. If a reader sets a larger default, such as 20 px, then 1 rem becomes 20 px.
What is 24px in rem?
24 px is 1.5 rem at a 16 px root. At a 10 px root, used with the 62.5% technique, it is 2.4 rem.
Should I use rem or px for font size?
Use rem for font sizes. Text set in rem follows the reader's browser font setting, which helps people with low vision, while px values ignore it.
What is the difference between rem and em?
rem is relative to the root html font size and is the same everywhere on the page. em is relative to the current element's font size, so it compounds when elements are nested.
What is 14px in rem?
14 px is 0.875 rem at the default 16 px root. At an 18 px root it would be about 0.7778 rem.
What is 18px in rem?
18 px is 1.125 rem at the default 16 px root, the size of Tailwind's text-lg utility.
What is 20px in rem?
20 px is 1.25 rem at a 16 px root. With the 62.5% technique, where the root is 10 px, it becomes 2 rem.
What is 48px in rem?
48 px equals 3 rem at the default 16 px root size.
What is 10px in rem?
10 px is 0.625 rem at a 16 px root, and exactly 1 rem when the root is set to 62.5% (10 px).
Related conversions
rem, em and px definitions from the W3C CSS Values and Units Module Level 3; text resizing guidance from W3C WCAG 2.2 success criterion 1.4.4; the math.div function from the Sass documentation; type scale from the Tailwind CSS documentation. Last updated . How we verify our numbers.