PX to REM Converter
Convert pixels to REM and EM units. Set a custom base font-size for accurate conversions.
Enter a pixel value to see the equivalent in rem, em, and percentage. Based on the default browser root font size of 16px, which you can customise.
Use rem for text and spacing that should respect reader settings, and px for fixed details such as borders.
Formula
rem equals pixels divided by the root font size. With a 16px base, 24px becomes 1.5rem.
Design handoff
Designers often specify px values. Convert text, gaps, padding, and margins to rem before writing production CSS.
Keep px for
One-pixel borders, hairlines, shadows, and fine decorative details usually work best as fixed px values.
Base-size warning
Check your project before converting a large design system. A custom root font size changes every rem value, including third-party components.
Common text sizes
12px is 0.75rem, 14px is 0.875rem, 16px is 1rem, 18px is 1.125rem, and 20px is 1.25rem on a 16px base.
Common spacing
4px is 0.25rem, 8px is 0.5rem, 16px is 1rem, 24px is 1.5rem, and 32px is 2rem on a 16px base.
These values match common spacing scales in Tailwind, shadcn-ui, and many design tokens.
PX vs REM: Why It Matters
Pixels (px) are fixed. 16px is always 16px regardless of the user's preferences. REM units are relative, 1rem equals whatever the root font size is (usually 16px by default). The difference seems small until you consider accessibility: millions of users increase their browser's default font size because they have difficulty reading small text.
When you set font sizes, margins, and padding in rem, your entire layout scales gracefully when users change their browser settings. Set them in px, and increasing the font size can break layouts because the text grows but the containers don't. That's why CSS frameworks like Tailwind use rem-based spacing by default.
This converter translates between px and rem using any base font size. The default is 16px (the browser standard), but if your project uses a different root font size, adjust the base to get accurate conversions.
CSS Unit Comparison
| Unit | Relative To | Scales With | Best For |
|---|---|---|---|
| px | Nothing (absolute) | Nothing | Borders, shadows, fine details |
| rem | Root font size (html) | Browser settings | Font sizes, spacing, layout |
| em | Parent font size | Parent element | Component-level scaling |
| % | Parent dimension | Parent size | Fluid widths and heights |
| vw/vh | Viewport width/height | Window size | Full-screen layouts, hero sections |
| ch | Width of "0" character | Font choice | Limiting text width (max-width: 65ch) |
What this means for you: Use rem for most things (font sizes, padding, margins, gaps). Use px for things that shouldn't scale (1px borders, box shadows). Use vw/vh for viewport-relative layouts. Use ch for readable line lengths.
Common PX to REM Conversions
| Pixels | REM (base 16px) | Tailwind Class | Typical Use |
|---|---|---|---|
| 4px | 0.25rem | p-1, gap-1 | Tight spacing, icon padding |
| 8px | 0.5rem | p-2, gap-2 | Small gaps, compact UI |
| 12px | 0.75rem | text-xs | Caption text, labels |
| 14px | 0.875rem | text-sm | Secondary text, sidebar |
| 16px | 1rem | text-base | Body text (browser default) |
| 20px | 1.25rem | text-xl | Subheadings |
| 24px | 1.5rem | text-2xl, p-6 | Section headings, card padding |
| 32px | 2rem | text-3xl, p-8 | Page headings, large spacing |
| 48px | 3rem | text-5xl | Hero headings |
The 62.5% Trick
Some developers set html { font-size: 62.5%; } to make 1rem = 10px (instead of 16px). This makes mental maths easier: 1.4rem = 14px, 2.4rem = 24px. But there are trade-offs:
Pros
- Easy mental conversion: 1.6rem = 16px
- No calculator needed for common sizes
Cons
- Third-party components assume 16px base
- Must reset body font-size to 1.6rem
Conversion Formula and Examples
The calculation is simple: divide the pixel value by the root font size. With the browser default of 16px, every 16 pixels equals 1rem.
| Goal | Calculation | CSS |
|---|---|---|
| Convert 18px text | 18 / 16 = 1.125 | font-size: 1.125rem; |
| Convert 24px padding | 24 / 16 = 1.5 | padding: 1.5rem; |
| Convert 40px gap | 40 / 16 = 2.5 | gap: 2.5rem; |
| Convert 12px label text | 12 / 16 = 0.75 | font-size: 0.75rem; |
If your root font size is 18px, the same 24px design value becomes 1.333rem instead of 1.5rem. Always check the project base before converting a full design.
What to Convert and What to Leave Alone
Use rem for text
Body text, headings, captions, labels, and form controls should respond when a reader raises their browser font size.
Use rem for spacing
Padding, margins, gaps, and component rhythm usually feel better when they scale with the text they surround.
Keep px for fixed details
One-pixel borders, hairlines, small shadows, and icon strokes are often meant to stay visually fixed.
Use other units for layout
Percentages, grid fractions, container queries, and viewport units are better choices for widths and larger layout relationships.
Design System Handoff Notes
Design files often express everything in pixels because screens, frames, and exported measurements use pixels. CSS does not have to copy those units directly. Translate design intent into the unit that fits the job.
| Design Spec | Suggested CSS | Reason |
|---|---|---|
| 16px body text | 1rem | Matches the browser default and scales with user settings |
| 14px helper text | 0.875rem | Common secondary text size |
| 1px border | 1px | Border should stay crisp and fixed |
| 24px card padding | 1.5rem | Spacing scales with the card's text |
| 720px content width | 45rem or 70ch | Pick rem for layout scale, ch for readable prose width |
Testing REM-Based Interfaces
Increase the browser font size
Set the browser default to 18px or 20px and reload the page. Text, spacing, and form controls should grow without clipping or overlapping.
Check small containers
Bad conversions usually show up in buttons, badges, table cells, and sidebars first. Give fixed-format controls enough width or allow wrapping.
Avoid converting every number blindly
Converting a 1px border to 0.0625rem can make it change with the root font size. Use the design intent, not a mechanical rule.
Document the base
Record whether the project uses the browser default, a custom root size, or the 62.5% trick. Future conversions depend on that choice.
Component-Level Example
A button with 14px text and 12px vertical padding can become text-sm with 0.75rem padding. The border can stay 1px because it is a fixed visual detail.
| Design Token | PX | REM CSS |
|---|---|---|
| Button text | 14px | font-size: 0.875rem; |
| Vertical padding | 12px | padding-block: 0.75rem; |
| Horizontal padding | 16px | padding-inline: 1rem; |
| Border | 1px | border-width: 1px; |
Related Tools
How to use this tool
Enter a pixel value in the input field
Adjust the base font size if your project doesn't use the 16px default
See instant REM, EM, and percentage conversions
Common uses
- Converting pixel values to REM for accessible CSS
- Building responsive layouts with relative units
- Translating design specs (usually in px) to CSS rem values
- Quick reference for Tailwind CSS spacing values
Share this tool
Frequently Asked Questions
What is a REM unit?
Why use REM over PX?
What is the difference between EM and REM?
What's the default root font size?
When should I use PX instead of REM?
Does Tailwind use REM?
What happens if I change the root font size?
How do I convert my entire CSS from PX to REM?
What about viewport units (vw, vh)?
What is the 62.5% trick?
Do all browsers support REM?
What about the ch unit?
Results are for general informational purposes only and should be checked before use. They are not professional advice. See our Disclaimer and Terms of Service.