PX to REM Converter
PX / REM CONVERTER
| PX | REM | Tailwind Class |
|---|
PX to REM Conversion Matrix & Accessibility Guide
Converting fixed pixel (px) measurements to relative rem units is a core Web Content Accessibility Guidelines (WCAG) best practice. Relative rem units scale fluidly when users adjust default browser text size settings.
When to use this tool
- Convert pixel-based font sizes, padding, and margins from Figma specs into
remvalues - Calculate exact
remvalues for custom base font sizes (e.g. 14px, 16px, or 18px base) - Generate CSS custom property snippets for design system spacing tokens
- Reference common Tailwind CSS spacing step conversions (4px = 0.25rem, 16px = 1rem, 24px = 1.5rem)
Conversion formula
rem = target_pixels / base_font_size
px = target_rem * base_font_sizeRelated tools
Build responsive, fluid typography routines using our CSS Clamp Calculator, or verify text contrast against background surfaces using the Color Contrast Checker.
Frequently Asked Questions
Common questions about this tool.
What is the default base font size in browsers? ▼
The standard root font size in virtually all web browsers is 16px (1rem = 16px). Unless overridden by the user or CSS reset, 1rem equals 16px.
What is the difference between EM and REM in CSS? ▼
REM (Root EM) scales relative strictly to the root `<html>` font size, whereas EM scales relative to the immediate parent element's font size. Using REM prevents compounding font size inheritance bugs.
Why is using REM better for web accessibility than PX? ▼
Fixed `px` units override user browser preferences. When visually impaired users increase default font size in browser settings, hardcoded `px` text stays static. `rem` units scale proportionally to respect user preferences.
How do I convert PX to REM manually? ▼
Divide the pixel value by the root base font size: `rem = px / base`. For standard 16px base: `24px / 16 = 1.5rem`, `32px / 16 = 2rem`, `12px / 16 = 0.75rem`.
Can I set a custom base font size like 10px in CSS? ▼
Setting `html { font-size: 62.5%; }` sets the root base to 10px (10px / 16px = 62.5%), making 1.4rem = 14px and 2.4rem = 24px. However, modern Tailwind and CSS frameworks recommend leaving base at 16px for standard accessibility consistency.
Related Free Utilities
View all tools →ChatGPT Ad Blocker
Block ChatGPT upgrade banners, upsell promo cards, and partner app ads with a lightweight, privacy-first Manifest V3 Chrome extension.
JSON diff
JSON diff. Use this privacy-first json diff directly in your browser.
Base64 encoder
Base64 encoder. Use this privacy-first base64 encoder directly in your browser.
URL parser
URL parser. Use this privacy-first url parser directly in your browser.