Developer Utilities · Free tool
PX to REM Converter
Convert between CSS pixels and rem/em at any base font-size. Includes when-to-use-which guidance.
Updated May 2026
16px in rem / em
1rem
1em
16rem in px
256px
rem vs em — quick rule
- rem is always relative to the
<html>root font-size. Same value everywhere. - em is relative to the parent's font-size, so it compounds in nested elements. Useful for spacing inside a component, dangerous for global type scales.
- Default to rem for most things; reach for em only when the value should scale with its container.
Found this useful?Email
Advertisement
What it does
Convert between CSS pixels and rem/em at any base font-size. Default 16px is the browser default; designers using the "html { font-size: 62.5% }" 10px trick can slide the base to match. Includes a quick rule for when to use rem vs em.
Embed this tool on your siteShow snippetHide
Paste this snippet into any page. Loads on-demand (lazy), no tracking scripts, and sized to most dashboards. Replace the height to fit your layout.
<iframe src="https://freetoolarena.com/embed/px-to-rem-converter" width="100%" height="720" frameborder="0" loading="lazy" title="PX to REM Converter" style="border:1px solid #e2e8f0;border-radius:12px;max-width:720px;"></iframe>How to use it
- Type a pixel value.
- Adjust the base font-size if your design system uses a custom one.
- Copy the rem or em value into your stylesheet.
Frequently asked questions
- Should I use rem or em?
- Default to rem for global scales (font-size, spacing tokens) — they're always relative to the root, no compounding. Use em for component-internal spacing where you want it to scale with the parent's font-size (typical in icon buttons that should match line-height).
- What's the 10px trick?
- Setting html { font-size: 62.5% } makes 1rem = 10px (10 ÷ 16 = 0.625). Designers like it because mental math is easier — 14px = 1.4rem. Slide the base to 10 in this tool to match.
Advertisement
Learn more
Guides about this topic
- Using Our Tools · GuideHow to generate QR codesMake a QR code for a URL, wifi, vCard, or plain text. What error-correction means, how big to print, how to test it.
- Using Our Tools · GuideHow to create a strong passwordThe entropy math, 2026 NIST rules, passphrases vs passwords, password managers, MFA and hardware keys, where passkeys fit, 5 mistakes that still lose accounts
- Developers & Technical · GuideHow to encode and decode Base64What Base64 is (not encryption), the 3-to-4 encoding mechanics, standard vs URL-safe vs MIME variants, 33% overhead, when to use it, common mistakes
- Design & Media · GuideHow to choose a color paletteHSL color theory, four palette schemes (monochromatic, analogous, complementary, triadic), the 60-30-10 rule, WCAG contrast, dark mode, and palette tools.
- Developers & Technical · GuideHow to use JWT tokens securelyJWT anatomy, HS256 vs RS256, the 'alg: none' attack, expiration strategy, storage (localStorage vs httpOnly cookies), revocation patterns, and claim validation.
- Design & Media · GuideHow to design a faviconThe sizes you actually need in 2026, design principles that survive 16×16 rendering, dark mode support, the HTML tags, web manifest, and testing.
Explore more developer utilities tools
- .htaccess GeneratorGenerate Apache .htaccess with HTTPS redirect, Gzip, caching, error pages, hotlink protection, 301 redirects.
- Color Palette ExtractorExtract dominant colors from any image. Histogram-based, runs in browser. Click swatches to copy hex.
- XML Sitemap GeneratorGenerate sitemap.xml from a URL list. Sets lastmod to today, applies priority and changefreq. Download or copy.
- JavaScript MinifierStrips comments and collapses whitespace from JS. For production minification, use terser or esbuild.
- HTML Table GeneratorInteractive HTML table builder. Click cells to edit. Toggle headers, stripes, borders. Inline-styled output for emails.
- CSS Button GeneratorVisual CSS button generator. Hover, active, and focus-visible states baked in. Tunable colors and sizing.