PX to REM Converter: Instant Pixels to Rem Calculator
Convert px to rem and rem to px instantly with our free CSS converter. Customize the root font size, copy results, and simplify responsive web design.
16px ÷ 16px = 1rem
Based on 16px base font sizeQuick Conversions
Common pixel values at 16px base
| Pixels | REM |
|---|---|
| 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 |
| 80px | 5rem |
| 96px | 6rem |
| REM | Pixels |
|---|---|
| 0.25rem | 4px |
| 0.5rem | 8px |
| 0.75rem | 12px |
| 1rem | 16px |
| 1.125rem | 18px |
| 1.25rem | 20px |
| 1.5rem | 24px |
| 1.75rem | 28px |
| 2rem | 32px |
| 2.25rem | 36px |
| 2.5rem | 40px |
| 3rem | 48px |
| 3.5rem | 56px |
| 4rem | 64px |
| 5rem | 80px |
| 6rem | 96px |
Why use REM units?
Accessibility & responsive design
Scales with user preferences. Respects the browser's root font size set by the user in their settings.
Better accessibility. Visually impaired users who increase their system font size get properly scaled layouts.
Consistent relative sizing. Components maintain proportional relationships across different screen sizes.
Easier maintenance. Change the root font size in one place and the whole layout adapts automatically.
Key facts
- Formula: rem = px / root font size.
- Common base: 16px in many browsers.
- 1rem means: the html root font size.
- Best for: scalable CSS typography and spacing.
These tables reflect your current root font size of 16px. Change the base above to see how it affects all conversions. REM is relative to the root element's font size, not the parent element.
Common PX to REM conversions (16px base)
| Pixels | REM | Typical use |
|---|---|---|
| 12px | 0.75rem | Small text or compact spacing |
| 14px | 0.875rem | Small text or compact spacing |
| 16px | 1rem | Body text or controls |
| 18px | 1.125rem | Body text or controls |
| 20px | 1.25rem | Body text or controls |
| 24px | 1.5rem | Headings or larger gaps |
| 32px | 2rem | Headings or larger gaps |
| 40px | 2.5rem | Display type or section spacing |
| 48px | 3rem | Display type or section spacing |
| 64px | 4rem | Display type or section spacing |
PX to REM formula
To convert pixels to rem, divide the pixel value by the root font size: rem = px / root font size. With the common 16px root font size, 16px is 1rem, 24px is 1.5rem, and 32px is 2rem.
PX to REM
24px / 16px = 1.5rem
REM to PX
1.5rem x 16px = 24px
Last updated:
Individual pixel conversion pages
Jump to a dedicated page for common CSS pixel values - each includes the formula, rem result at 16px base, and a copy-ready CSS snippet.
When should you use rem instead of px?
Use rem for typography, spacing, and component dimensions that should scale with the user's root font-size preference. MDN describes rem as a root element font-relative length unit, which means it is based on the font size of the html element rather than the current component.
-
Good rem use cases
Font sizes, padding, margins, gaps, buttons, cards, form controls, and layout rhythm.
-
Good px use cases
One-pixel borders, bitmap image dimensions, hairline dividers, and exact icon strokes.
PX to REM FAQ
How do you convert px to rem?
Convert px to rem by dividing the pixel value by the root font size. With the common 16px browser default, 24px equals 1.5rem because 24 / 16 = 1.5.
How do you convert rem to px?
Convert rem to px by multiplying the rem value by the root font size. With a 16px root font size, 1.25rem equals 20px because 1.25 x 16 = 20.
What is 1rem in pixels?
1rem equals the font size of the root html element. In many browsers the default root font size is 16px, so 1rem is commonly 16px unless the site or user changes that setting.
Should I use px or rem in CSS?
Use rem for scalable typography, spacing, and component sizing that should respond to the user's root font-size preference. Use px for values that should stay fixed, such as one-pixel borders or precise raster image dimensions.
Related Dev Tools
- Color Contrast Checker Check WCAG AA/AAA contrast ratios with live swatches for text and UI colors.
- CSS Clamp Calculator Generate rem-safe fluid clamp() values with a live viewport preview.
- Fluid Typography Calculator Build a full responsive type scale and export CSS variables or Tailwind tokens.
- CSS Grid Generator Generate auto-fit minmax() grid CSS with a live wrapping card preview.
- Type Scale Calculator Generate a modular font-size scale in px and rem with copy-ready CSS.