Pixel to REM Converter
Convert between px and rem/em. Set your root font size, get an instant conversion table for all common sizes.
px
Convert
px
rem
Conversion Table (root = 16px)
| px | rem | em | pt | |
|---|---|---|---|---|
| 4 | 0.25rem | 0.25em | 3pt | |
| 8 | 0.5rem | 0.5em | 6pt | |
| 10 | 0.625rem | 0.625em | 7.5pt | |
| 12 | 0.75rem | 0.75em | 9pt | |
| 14 | 0.875rem | 0.875em | 10.5pt | |
| 16 | 1rem | 1em | 12pt | |
| 18 | 1.125rem | 1.125em | 13.5pt | |
| 20 | 1.25rem | 1.25em | 15pt | |
| 24 | 1.5rem | 1.5em | 18pt | |
| 28 | 1.75rem | 1.75em | 21pt | |
| 32 | 2rem | 2em | 24pt | |
| 36 | 2.25rem | 2.25em | 27pt | |
| 40 | 2.5rem | 2.5em | 30pt | |
| 48 | 3rem | 3em | 36pt | |
| 56 | 3.5rem | 3.5em | 42pt | |
| 64 | 4rem | 4em | 48pt | |
| 72 | 4.5rem | 4.5em | 54pt | |
| 80 | 5rem | 5em | 60pt | |
| 96 | 6rem | 6em | 72pt | |
| 112 | 7rem | 7em | 84pt | |
| 128 | 8rem | 8em | 96pt |
How to Use Pixel to REM Converter
- 1Set your root font size (default 16px).
- 2Enter a pixel value to convert to rem/em.
- 3View the full conversion table for common sizes.
- 4Copy any value directly from the table.
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, rem, and em?▾
px (pixels) is an absolute unit — 1px is always 1 device-independent pixel, regardless of context. rem (root em) is relative to the root element (<html>) font size. If the root is 16px, then 1rem = 16px, 2rem = 32px. em is relative to the current element's font size — if a div has font-size: 20px, then 1em = 20px within that div. rem is preferred for layout because it is consistent; em is preferred for typography within components that need to scale with their own font size.
Why use rem instead of px?▾
rem units respect user browser font-size preferences. When a user increases their browser base font size for accessibility, rem-based layouts scale proportionally. px-based layouts do not. Additionally, rem simplifies design system math — if your design scale is based on 4px (0.25rem) or 8px (0.5rem) increments, rem values translate directly. Tailwind CSS uses rem for all spacing and typography (text-lg = 1.125rem = 18px at default 16px root).
What root font size should I use?▾
The browser default is 16px. Most design systems (Tailwind, Material UI, Bootstrap) are based on 16px. If you use 62.5% root font size (10px base — a common trick: html { font-size: 62.5% }), then 1rem = 10px, making the math simpler (e.g., 1.4rem = 14px). The 62.5% trick has accessibility implications — it overrides the user's browser font size preference for all rem calculations.
How do I convert viewport units (vw, vh)?▾
Viewport units (vw, vh, svh, dvh) are relative to the viewport size, not the font size. 1vw = 1% of viewport width. 1vh = 1% of viewport height. To convert: px value = (vw value / 100) × viewport width. Since viewport size varies, vw/vh cannot be expressed as a fixed px value — this converter focuses on font-relative units (px, rem, em).
What is the clamp() function for fluid typography?▾
clamp(min, preferred, max) creates a value that scales between a minimum and maximum. For fluid typography: font-size: clamp(1rem, 2.5vw, 2rem) — the font scales with viewport width but never smaller than 16px or larger than 32px. This replaces multiple breakpoints for typography. The "preferred" value is usually a vw-based expression: calc(1rem + 0.5vw) or similar.