| Unit | Formula |
|---|---|
| rem | px ÷ base |
| em | px ÷ parent |
| vw | px ÷ vp-width × 100 |
| vh | px ÷ vp-height × 100 |
| pt | px × 0.75 |
| pc | px ÷ 16 |
| cm | px × 0.026458 |
| mm | px × 0.26458 |
| in | px × 0.010417 |
| px | rem (÷16) | pt |
|---|
PX to REM Converter converts pixel values to REM (root em) units and vice versa. Enter a pixel value and the root font size (default 16px) to get the REM equivalent — or enter REM values to get pixels. It includes a conversion table for common pixel values, supports bulk conversion of multiple values, and explains the practical differences between px, rem, and em in CSS typography and layout.
REM (root em) is a CSS unit relative to the root element's (html) font size. If the root font size is 16px (browser default), then 1rem = 16px, 1.5rem = 24px, 0.875rem = 14px. Unlike px (fixed), rem scales with the user's browser font size preference — if a user sets their browser font to 20px, 1rem = 20px on your site, improving accessibility. Using rem for font sizes and em for component-relative spacing is a common accessibility-first CSS architecture.
The difference between rem and em: rem is always relative to the root (html) element's font size — it doesn't compound. em is relative to the nearest parent element's font size — it compounds. A parent at 1.5em with a child at 1.5em results in 2.25× the root font size for the child. This compounding makes em tricky to use for font sizes but useful for component-specific spacing that should scale with the component's font.
Convert design system tokens
Result: 16px base: 12px=0.75rem, 14px=0.875rem, 16px=1rem, 18px=1.125rem, 24px=1.5rem, 32px=2rem
Convert a design mockup value
Result: Base 16px: 28px headline → 28÷16 = 1.75rem
Base font 20px project
Result: If html{font-size:20px}: 1rem=20px, so 16px=0.8rem, 24px=1.2rem
Why should I use rem instead of px for font sizes?
Accessibility: users can set their preferred browser font size (typically 16px but some set 20px or larger). px ignores the user's preference — a 14px font stays 14px. rem respects it — 0.875rem scales to 17.5px when the user prefers 20px base. The WCAG accessibility guidelines require that text can be resized up to 200% without loss of functionality — using rem helps achieve this. Use px only for things that should never scale (borders, specific pixel-perfect measurements).
What is the difference between rem, em, and %?
rem: relative to the root (html) font size — doesn't compound, predictable. em: relative to the nearest parent's font size — compounds. 1.5em in a 1.5em parent = 2.25× root. Useful for padding/margin that scales with the element's font. %: relative to the parent's equivalent property — 50% width = 50% of parent's width, 50% font-size = 50% of parent's font-size. Use rem for font-size, em for padding/margin, % for layout widths.
How do I set up a rem base in my project?
Set the html font size: html { font-size: 16px; } — or use 62.5% for easy 10px-base math: html { font-size: 62.5%; } makes 1rem = 10px (1.6rem = 16px, 2.4rem = 24px). Many designers prefer the 62.5% trick because it makes the math intuitive. However, it requires compensating with body { font-size: 1.6rem; } to restore the default body font size. Pure 16px base is more straightforward even if the division is less round.
What is the CSS clamp() function for responsive typography?
clamp(min, preferred, max) creates fluid typography that scales between a minimum and maximum value. Example: font-size: clamp(1rem, 2.5vw, 2rem) — the font is at least 1rem (16px), scales with viewport width at 2.5vw, and never exceeds 2rem (32px). This eliminates the need for media query breakpoints for font sizes. The preferred value uses viewport units (vw) for fluid scaling. calc() can add a fixed offset: clamp(1rem, 1rem + 1vw, 1.5rem).
Should I convert all px values to rem?
Not necessarily. Best practice: font-size, line-height, and some spacing (padding, margin) → use rem for accessibility. Border widths, shadows, specific pixel-perfect measurements → px is fine. Media query breakpoints → use em or rem (not px) because media queries check against the user's root font size, not the browser's pixel density. Layout widths → use %, fr (grid), or vw/vh. The goal is that text-related sizes scale with user preferences.