TLDR: I’ll show you how to convert pixels (px) to rem, why rem-based sizing improves accessibility and responsiveness, and practical CSS examples you can copy. You’ll learn the math, see real-world rules of thumb, and know what to avoid so your typography and spacing scale predictably across devices.
I remember the time I inherited a site where font sizes were a mess: some headings set in pixels, buttons in ems, and components that looked tiny on phones. I spent an afternoon converting key styles to rem units and the site suddenly behaved. That experience taught me why mastering px to rem conversion matters, and why you should prefer rem for layout and typography in modern CSS.
Understanding px, rem, and why it matters
Let’s break it down: px is an absolute unit tied to the device pixel grid, while rem is relative to the root element’s font size — usually the html element. Using rem makes your design scale when users change their browser’s base font size, improving accessibility. As you know, consistent, scalable units prevent layout surprises when users zoom or when you change the base font for different breakpoints.
What is px?
Pixel (px) is a fixed unit. In CSS, 16px has historically been the browser default for the root font-size. If you set an element to 20px it will remain 20px regardless of user settings, unless the browser zoom changes everything.
What is rem?
rem stands for root em. 1rem equals the font-size of the root element (html). If html { font-size: 16px; } then 1rem = 16px. If you change the root to 10px, 1rem = 10px and every rem-based value updates automatically. This is powerful for establishing predictable scaling.
Why rem matters
Using rem helps in several ways:
- Accessibility: users who increase their default font size get larger type across your site.
- Consistency: spacing and type scale together when the root font-size changes.
- Maintainability: it’s easier to adjust the whole system by changing one value.
Key terminology
Quick definitions to keep in mind:
- Root font-size: the font-size set on html (commonly 16px).
- 1rem: equals root font-size.
- em: relative to the font-size of the current element.
Core conversion formula
Converting px to rem is simple math. Use this formula:
rem value = px value ÷ root font-size (in px)
For example, with a 16px root: 24px = 24 ÷ 16 = 1.5rem
Practical conversion table (assuming root = 16px)
Here are quick lookups you’ll use often:
- 8px = 0.5rem
- 12px = 0.75rem
- 14px = 0.875rem
- 16px = 1rem
- 18px = 1.125rem
- 20px = 1.25rem
- 24px = 1.5rem
- 32px = 2rem
How I pick a root font-size
I usually leave html at the browser default (16px) and calculate rems from there. However, when I need simpler math for design tokens I sometimes set html { font-size: 62.5%; } which makes 1rem = 10px if the browser default is 16px. In addition to simplifying math, this approach is debated because it ties your system to assumptions about the browser default. I prefer using CSS custom properties for clarity when needed.
CSS examples you can copy
Here are real snippets I use in projects. Replace values to fit your scale.
Base system with default root
html { font-size: 100%; /* 16px usually */ }
body { font-size: 1rem; /* =16px */ }
h1 { font-size: 2rem; /* =32px */ }
.small { font-size: 0.875rem; /* =14px */ }
.container { padding: 1.5rem; /* =24px */ }Alternative: easier math using 62.5%
html { font-size: 62.5%; /* 1rem = 10px if default is 16px */ }
body { font-size: 1.6rem; /* =16px */ }
h2 { font-size: 2.4rem; /* =24px */ }
.button { padding: 1.2rem 2rem; /* =12px 20px */ }Responsive scaling with rem
To make components scale at different breakpoints, adjust the root or use clamp. I often combine rem with clamp for fluid typography:
html { font-size: 100%; }
h1 { font-size: clamp(1.5rem, 2vw + 1rem, 3rem); }This keeps sizes in rem units while allowing fluidity between viewport widths.
How I implement a design system
I create tokens in rem and store them as CSS custom properties so they are reusable and easy to tweak. Example:
:root {
--space-1: 0.5rem; /* 8px */
--space-2: 1rem; /* 16px */
--space-3: 1.5rem; /* 24px */
--font-base: 1rem; /* 16px */
}
.card { padding: var(--space-3); font-size: var(--font-base); }Common mistakes and what to avoid
What should you avoid? Here are mistakes I see often:
- Setting a root font-size in px then using rem inconsistently. If the root is fixed in px it defeats some accessibility benefits.
- Mixing em and rem without a clear plan. em depends on the current font-size and can cause compounding when nested.
- Assuming every user has 16px default. Some people change defaults; test with different settings.
- Overuse of 62.5% trick without comments. Future devs may not know why math was changed.
When px still makes sense
Pixels are fine for tiny UI details where you want absolute control, such as 1px hairlines or icons that must align to a pixel grid. However, for type, spacing, and major layout dimensions I prefer rem.
Workflow: how I convert a codebase
When I refactor a codebase from px to rem I follow these steps:
- Audit all CSS for px values used for typography and spacing.
- Pick a root strategy: default 100% or 62.5% for easier math.
- Convert tokens first: set –font-base and –space-1, –space-2, etc in rem.
- Replace px with rem via automated script or careful manual edit.
- Test across devices and with larger browser font-size settings.
Examples converting by hand
If root is 16px:
- 36px → 36 ÷ 16 = 2.25rem
- 15px → 15 ÷ 16 = 0.9375rem
Use decimals to be precise, but don’t be afraid to round to 3 decimal places for readability.
Accessibility wins
After switching to rems, I noticed that users who bump browser text size get a consistent experience: text, buttons, and spacing scale together. In addition, using rem reduces the need for complex media queries to maintain legibility on small screens.
Integration with WordPress
If you’re using WordPress themes or editing a theme stylesheet, using rem units makes responsive typography easier. You can also customize the root font-size for theme breakpoints so everything adjusts predictably. If you need step-by-step help to change font size WordPress or to change fonts WordPress or adjust styles when you change font color WordPress, rem-based tokens will make those changes safe and consistent.
Performance considerations
Rem has no runtime cost versus px. The only performance consideration is maintainability: sensible tokens reduce redundancy and CSS size. In addition, when you use rem and CSS variables, your CSS becomes more compressible and easier to maintain.
FAQs
How do I convert px to rem quickly?
Use the formula rem = px ÷ root. For large projects use a find-and-replace script or a PostCSS plugin like postcss-pxtorem to automate conversion. Test visually after conversion because nested em values can behave differently.
Should I set html font-size to 62.5%?
That trick makes math easier because 1rem becomes 10px (if browser default is 16px). However, I avoid it unless the team understands the tradeoffs. It can be surprising for future maintainers, so if you use it, add a clear comment in your CSS.
What’s the difference between rem and em?
rem is relative to the root element. em is relative to the current element’s font size. em can compound when nested, which is useful for component-relative scaling but complicates site-wide consistency. I use rem for global scale and em for small, component-local adjustments.
Will changing the root font-size break my layout?
It can, if your styles mix px and rem unpredictably. However, if your design uses rem consistently via tokens, changing the root font-size scales the whole interface predictably. That’s the main benefit of rem-based systems.
Any tips for rounding rem values?
Round to three decimal places for cleanliness (ex: 1.125rem). If the browser renders sub-pixel sizes, it will handle it. If you need pixel-perfect control for tiny elements, consider px for those specific cases.
How do I test rem-based typography?
Test by increasing the browser’s default font size, zooming in, and checking on multiple devices. Use accessibility tools to simulate low-vision settings. A consistent rem system will pass these tests with fewer tweaks.
To summarize
Switching from px to rem gives you a scalable, accessible, and maintainable CSS system. Use a clear root strategy, define tokens, automate conversions where possible, and test thoroughly. However, keep px for micro-details when needed and document any decisions like root size tricks to avoid confusion later.
If you want, I can convert a snippet of your CSS to rem and show the exact changes. Just paste a sample and I’ll walk you through the conversion and explain any tradeoffs I find.