PX to REM Converter (& REM to PX)
Convert px to rem and rem to px instantly. Change the root font-size to match your project and see the conversion update in real time. Free, no signup.
PX to REM Chart (16px base)
Common px values converted to rem, assuming the default root font-size of 16px.
| px | rem |
|---|---|
| 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 |
| 64px | 4rem |
What Is PX to REM Conversion?
rem stands for "root em" — a relative CSS unit calculated from the font-size of the root element (<html>). At the browser default, 1rem equals 16px, but if the root font-size changes, the same rem value maps to a different px value.
Using rem instead of px for font sizes and spacing means elements scale automatically when a user increases their browser's text size setting, which is why rem is widely recommended for accessible, responsive design. Design tools like Figma typically export sizes in px, so converting px to rem (and back) is a routine step when turning a design into CSS.
How to Use This Converter
- Check your base font-size The default is 16px (the browser default). If your project sets a different root font-size in CSS, enter that value instead.
- Enter a px or rem value Type into either field and the other one converts automatically.
- Copy the generated CSS Use the "Copy CSS" button to grab a ready-to-paste font-size declaration.
Tips for getting more out of it
- Browsers default to 1rem = 16px, but users with low vision often increase their browser's default text size — rem-based sizes automatically follow that setting, while px-based sizes do not.
- Media query breakpoints are traditionally written in px, but font-size, padding, and margin are good candidates for rem so that the overall layout balance holds up when users change their font-size preference.
- Some teams set html { font-size: 62.5%; } so that 1rem = 10px, making mental math easier (1.6rem = 16px). Enter 10 as the base value above to convert using that convention.
- A common convention is to use rem for page-level layout values and em for spacing inside a reusable component, so the component scales with its own font-size wherever it's placed.
Common Use Cases
Converting a Figma design to CSS
Design files are usually measured in px. Convert each px value to rem so text and spacing respect the user's browser font-size setting.
Auditing an existing stylesheet for accessibility
Find hard-coded px font-sizes and convert them to the equivalent rem value before replacing them.
Working with a non-default root font-size
Some projects set html { font-size: 62.5%; } so that 1rem = 10px. Enter 10 as the base value to convert with that convention.
Glossary
- rem
- Short for "root em". A relative unit based on the font-size of the root (<html>) element — changing the root font-size scales every rem-based value together.
- em
- A relative unit based on the font-size of the current element's parent. Unlike rem, the base changes at every nesting level, which can make calculations harder to predict.
- px (pixel)
- An absolute unit tied to physical screen pixels. It ignores the user's browser text-size setting, which makes it useful when a dimension must stay fixed.
- Root font-size
- The font-size set on the <html> element. Browsers default to 16px, but it can be overridden in CSS (e.g. html { font-size: 62.5%; }) — this is the base that all rem values are calculated from.
Frequently Asked Questions
Side Note — How rem Made It Into the CSS Spec
The rem unit was added to the CSS Values and Units Module around 2011. Before that, nearly every website sized text and spacing with either px or em, and em came with a well-known headache: because it's based on the parent element's font-size, nesting elements caused the effective size to compound in ways that were easy to get wrong in complex layouts.
rem was designed to fix exactly that problem by referencing a single, always-available anchor — the root element — no matter how deeply an element is nested. During the years when Internet Explorer 9 still lacked rem support, developers commonly wrote a px fallback followed by the rem value (font-size: 16px; font-size: 1rem;) so older browsers would still get a usable size. Once major browsers caught up in the mid-2010s, the px fallback became unnecessary.
Today, building an entire site's typography and spacing scale around rem is a standard accessibility practice: it lets the whole page scale gracefully when a visitor increases their browser's text size, instead of breaking or clipping content. Guidelines like WCAG (Web Content Accessibility Guidelines) explicitly recommend against relying solely on fixed units for text sizing.