PX to REM Converter
Convert CSS pixel values to REM (root em) units and vice versa. Supports custom base font size, batch conversion, and Tailwind CSS class lookup.
px
Conversion Table (base: 16px)
| px | rem |
|---|---|
| 8 | 0.5rem |
| 10 | 0.625rem |
| 12 | 0.75rem |
| 14 | 0.875rem |
| 16 | 1rem |
| 18 | 1.125rem |
| 20 | 1.25rem |
| 24 | 1.5rem |
| 32 | 2rem |
| 48 | 3rem |
| 64 | 4rem |
| 96 | 6rem |
| 128 | 8rem |
| Tailwind | rem |
|---|---|
| text-xs | 0.75rem |
| text-sm | 0.875rem |
| text-base | 1rem |
| text-lg | 1.125rem |
| text-xl | 1.25rem |
| text-2xl | 1.5rem |
| text-3xl | 1.875rem |
| text-4xl | 2.25rem |
| text-5xl | 3rem |
| text-6xl | 3.75rem |
| p-1 | 0.25rem |
| p-2 | 0.5rem |
| p-3 | 0.75rem |
| p-4 | 1rem |
| p-5 | 1.25rem |
| p-6 | 1.5rem |
| p-8 | 2rem |
| p-10 | 2.5rem |
| p-12 | 3rem |
How to Use PX to REM Converter
- 1Enter a pixel or rem value to convert.
- 2Set your base font size (default 16px).
- 3View the conversion result instantly.
- 4See the full conversion table for common sizes.
Zenovay
Privacy-first analytics for your website
Understand your visitors without invasive tracking. GDPR compliant, lightweight, and powerful.
Related Tools
JSON Formatter & ValidatorFormat, validate, and beautify JSON data with syntax highlighting and error detection.
JWT DecoderDecode and inspect JWT tokens. View header, payload, and verify signatures.
Base64 Encode/DecodeEncode text to Base64 or decode Base64 back to text. Supports UTF-8 and binary data.
URL Encode/DecodeEncode or decode URL components. Handle special characters, query strings, and full URLs.
Frequently Asked Questions
What is the difference between px and rem?▾
px (pixels) is an absolute unit — 16px is always 16px regardless of user settings. rem (root em) is relative to the root element's font size (html element). Default browser root font size is 16px, so 1rem = 16px by default. If a user changes their browser font size (for accessibility), rem units scale accordingly but px units do not. This makes rem preferred for font sizes and spacing in accessible designs.
Why use rem instead of px?▾
rem respects user font-size preferences set in browser accessibility settings. Users with visual impairments may increase base font size to 20px or 24px — rem-based layouts scale correctly, px-based layouts do not. rem also makes scaling easier: change the root font-size and all rem values scale proportionally. WCAG 2.1 Success Criterion 1.4.4 (Resize text) recommends scalable units. Tailwind CSS uses rem for all size utilities.
How does Tailwind CSS handle rem?▾
Tailwind uses a base of 1rem = 16px by default. The 4px base unit: text-xs (12px = 0.75rem), text-sm (14px = 0.875rem), text-base (16px = 1rem), text-lg (18px = 1.125rem), text-xl (20px = 1.25rem), text-2xl (24px = 1.5rem). Spacing: p-4 = 1rem = 16px, p-8 = 2rem = 32px. To change the base: set html { font-size: 10px } and then 1rem = 10px (making 1rem = 10px is a common trick: 16px = 1.6rem).
What is the 62.5% trick?▾
Setting html { font-size: 62.5% } makes the root font size 62.5% of 16px = 10px. This means 1rem = 10px, simplifying mental math: 16px = 1.6rem, 24px = 2.4rem, 100px = 10rem. This makes rem as easy to use as px. Downside: you must remember to set body { font-size: 1.6rem } (16px for body text) since html is now 10px. Some teams avoid this because it overrides user font-size preferences (62.5% of the user's chosen size, not 16px).
When should I use em instead of rem?▾
em is relative to the parent element's font-size (not root). Use em for: component-level scaling (button padding scales with the button's font-size), media queries (em-based queries respect user font-size changes better than px queries), letter-spacing and line-height relative to the current element's font size. Avoid em for layout spacing where nested components could cause unexpected compound scaling. rem for global scale, em for component-relative values.