Tools · Live
PX to REM Converter,
bidirectional, with a CSS cheat sheet.
Convert pixels to REM and REM to pixels in real time. Set your custom base font size, copy values as CSS, and use the reference table for the most common design-system measurements.
Pixels
px
REM
rem
Cheat sheet
CSS reference table
Click any row to load
| Pixels (px) | REM (base 16px) | Copy REM |
|---|---|---|
1px | 0.0625rem | |
2px | 0.125rem | |
4px | 0.25rem | |
6px | 0.375rem | |
8px | 0.5rem | |
10px | 0.625rem | |
12px | 0.75rem | |
14px | 0.875rem | |
base16px | 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 | |
80px | 5rem | |
96px | 6rem | |
128px | 8rem |
rem = px ÷ 16 · px = rem × 16 · Change base above to update the table.
Field guide
PX vs REM: why modern CSS prefers relative units.
What is a pixel (px)?
A CSS pixel is not necessarily a physical device pixel. On standard displays it maps to one device pixel, but on high-density (Retina/HiDPI) screens one CSS pixel maps to two or four physical pixels. This means a CSS pixel is a reference pixel — a relative unit that is designed to produce a consistent visual size across different screen densities.
Pixels are concrete and easy to reason about, which is why many designers specify values in pixels. The problem is that pixels are absolutein the context of the browser — they do not scale when the user changes their browser's default font size.
What is a REM?
REM stands for Root EM. It is a relative unit that is always relative to the font size of the root element — the <html> element. If html { font-size: 16px }, then 1rem = 16px, 1.5rem = 24px, and 0.75rem = 12px.
The crucial distinction from pixels: if the user changes their browser's default font size (a common accessibility setting, particularly for users with low vision), everything sized in REM scales proportionally. A user who sets their browser to 20px default will see your 1.5rem element at 30px instead of 24px — maintaining the proportional relationship with the rest of the typography.
The formula
The base font size is the value set on the <html> element. Most browsers default to 16px, and most websites leave this unchanged. However, some design systems set a different base (for example, 10px to make the mental arithmetic easier: 1.4rem = 14px).
If you set html { font-size: 62.5% }, the base becomes 10px (62.5% of the browser's 16px default), and conversions become straightforward: 14px → 1.4rem, 16px → 1.6rem. This is a common trick but has the downside of overriding the user's chosen browser font size preference — which partially defeats the accessibility purpose of using REM.
Why use REM instead of px?
- Accessibility: Users can zoom text or change their browser's default font size for readability. Elements sized in REM respect that choice; pixel-sized elements do not.
- Scalability: If your designer later decides the overall type scale should be slightly larger, changing one number on the
<html>element proportionally scales everything sized in REM across the entire page. - WCAG compliance: WCAG 1.4.4 requires that text can be resized up to 200% without loss of functionality. Elements sized in absolute pixels may not resize correctly with browser text-zoom settings.
- Design systems: Spacing and typography tokens in modern design systems (Tailwind, Material UI, Chakra UI) are defined in REM, making it the natural unit for component-based development.
EM vs REM: what's the difference?
EM is similar to REM but relative to the font size of the parent element, not the root. This makes EM more powerful for component-scoped scaling but much harder to reason about globally, because EM values compound through the DOM tree.
Example: if a <div> has font-size: 1.5emand contains a <p> with font-size: 1.5em, the paragraph's computed font size is 1.5 × 1.5 × 16px = 36px, not 24px. This compounding behaviour is why REM is generally preferred for font sizes and global spacing, while EM is used for padding and margin inside components where scaling relative to the component's own font size is intentional.
When to still use pixels
REM is not always the right choice. Pixels are appropriate for:
- Border widths:
border: 1px solidis almost universally correct. A 1rem border would be 16px — far too thick. Thin structural lines should always be in pixels. - Box shadows: Shadow spreads and blurs are often fine in pixels since they are decorative, not semantic. However, if you want shadows to scale with text size, REM is acceptable.
- Fixed-size UI elements: Icons rendered as SVGs at a fixed visual size, or UI elements that should never change regardless of text zoom (like a 1px horizontal rule).
- Media queries: CSS media queries with em units respond to the user's zoom level, while pixel-based media queries do not. Both approaches are used in practice; the choice depends on your responsive design strategy.
Tailwind CSS and REM
Tailwind CSS uses a 4px spacing scale by default, with all values expressed in REM. p-4 equals padding: 1rem (16px at base 16),text-lg equals font-size: 1.125rem (18px), andw-96 equals width: 24rem (384px). When working with Tailwind, understanding the REM ↔ px relationship helps you select the correct utility classes and write custom CSS that integrates cleanly with the existing scale.