Convert between px, rem, and em CSS units
| PX | REM | PT |
|---|
Convert between px, rem, and em CSS units. Set your base font size and get instant conversions with a reference table. Essential for responsive web design. Runs entirely in your browser.
Converting between pixels and rem units is one of the most frequent tasks in modern CSS development. Rem (root em) units are relative to the root font size (default 16px in all browsers), making them responsive and accessible — they scale when users change their browser font size. Pixels are absolute and don't scale. Modern best practice is to use rem for typography, spacing, and breakpoints while keeping px for borders, shadows, and fixed decorative elements. This converter handles both directions and supports custom base sizes for projects using html { font-size: 62.5% } (where 1rem = 10px) or other custom bases.
Rem respects user font-size preferences (accessibility), scales consistently across components, and makes responsive design easier. Users who set larger default fonts (low vision, high-DPI) benefit from rem-based layouts.
16px in all major browsers. So 1rem = 16px, 0.875rem = 14px, 1.5rem = 24px. The 62.5% trick (html { font-size: 62.5% }) makes 1rem = 10px for easier mental math.
No — use rem for text sizes, spacing, margins, padding, and breakpoints. Use px for borders (1px border), box shadows, and tiny fixed details. Some developers use em for component-internal spacing.
Setting html { font-size: 62.5% } makes 1rem = 10px (easy math: 14px = 1.4rem). Downside: you must set body font-size back to 1.6rem and all third-party components may need adjustments.
Rem is always relative to the root (html) element — predictable everywhere. Em is relative to the parent element's font size — compounds with nesting (nested 1.5em × 1.5em = 2.25em of root). Rem is generally preferred.