PX to REM & EM Converter
Convert pixel values to REM and EM for responsive CSS web design. Configurable root base font size (default 16px) with instant bidirectional calculation.
Standard browser default is 16px (1rem = 16px).
Based on 16px root base
Ready-to-Use CSS Declarations
font-size: 1rem; /* 16px */margin: 1rem;padding: 1rem;width: 1rem;height: 1rem;gap: 1rem;Standard PX to REM & Tailwind Scale Reference Table
Calculated dynamically for base 16px root font size.
| Pixels (PX) | REM (Root 16px) | EM Equivalent | Tailwind CSS Class | Common Usage | Action |
|---|---|---|---|---|---|
| 4px | 0.25rem | 0.25em | text-[4px] / p-1 | Borders, micro spacers | |
| 8px | 0.5rem | 0.5em | text-xs / p-2 | Small badges, icons | |
| 10px | 0.625rem | 0.625em | text-[10px] / p-2.5 | Footnotes, captions | |
| 12px | 0.75rem | 0.75em | text-xs / p-3 | Secondary text, tags | |
| 14px | 0.875rem | 0.875em | text-sm / p-3.5 | Compact body, forms | |
| 16px | 1rem | 1em | text-base / p-4 | Default root body font | |
| 18px | 1.125rem | 1.125em | text-lg / p-4.5 | Subheadings, lead text | |
| 20px | 1.25rem | 1.25em | text-xl / p-5 | Card titles, h4 | |
| 24px | 1.5rem | 1.5em | text-2xl / p-6 | Section headings, h3 | |
| 28px | 1.75rem | 1.75em | text-[28px] / p-7 | Major headers | |
| 32px | 2rem | 2em | text-3xl / p-8 | Page titles, h2 | |
| 36px | 2.25rem | 2.25em | text-4xl / p-9 | Hero headers | |
| 40px | 2.5rem | 2.5em | text-[40px] / p-10 | Display text | |
| 48px | 3rem | 3em | text-5xl / p-12 | Large hero titles, h1 | |
| 56px | 3.5rem | 3.5em | text-[56px] / p-14 | Banner titles | |
| 64px | 4rem | 4em | text-6xl / p-16 | Giant typography | |
| 72px | 4.5rem | 4.5em | text-7xl / p-18 | Billboard numbers | |
| 96px | 6rem | 6em | text-8xl / p-24 | Massive branding display |
Display PX Size & Page Length Calculator Online
Inspect your device's current viewport display pixel dimensions, calculate document page lengths in CSS pixels, and measure with the interactive pixel ruler.
Step-by-Step Instructions
Set root base size
Set your root font-size (default is 16px).
Enter pixels or rem
Type your pixel value to get REM, or type REM to get pixels.
Copy CSS rule
Copy the computed rem value straight into your CSS or Tailwind stylesheet.
Key Features & Capabilities
- Bidirectional PX to REM and REM to PX calculation
- Customizable root font size (16px default, 10px, 14px, etc.)
- Computes EM units simultaneously
- Includes a quick reference cheat sheet for standard sizes (12px, 14px, 16px, 20px, 24px, 32px)
Frequently Asked Questions
What is the mathematical formula for converting pixels (px) to rem?
The formula is `rem = px / rootFontSize`. By default in modern web browsers, the root HTML font size is `16px`. Therefore, `24px / 16px = 1.5rem` and `32px / 16px = 2rem`. If your CSS sets `html { font-size: 62.5%; }`, the base font size becomes `10px`, making `16px = 1.6rem`.
Why should developers use rem instead of px for responsive web typography?
Using `rem` (root em) units allows font sizes and layout spacing to scale dynamically according to user browser accessibility preferences. When visually impaired users adjust their default browser font size from 16px to 24px, layouts built with `rem` scale proportionally, whereas hardcoded `px` values remain locked and fail accessibility audits (WCAG 2.1 Level AA).
What is the difference between rem and em in CSS?
`rem` is relative exclusively to the root `<html>` element's font size, providing predictable scaling across deeply nested components. In contrast, `em` is relative to its immediate parent element's font size, which can cause compound scaling issues when nested inside multiple sized parent elements.
How do I generate a full Tailwind CSS or CSS variable spacing scale from px?
You can configure a custom base root pixel value (e.g., 16px or 10px) in the tool settings, and it will compute equivalent CSS declarations, clamp() fluid typography formulas, and custom Tailwind spacing tokens for your theme configuration.
Related Utilities
Discover complementary online tools in the same workflow.
Aspect Ratio Calculator & Dimension Resizer (16:9, 9:16, 4:3, 1:1)
Calculate image and video aspect ratios, resize dimensions proportionally, simplify GCD ratios, and generate CSS aspect-ratio code.
Roman Numeral Converter - Arabic to Roman & Date Translator
Convert numbers to Roman numerals (with Vinculum overlines up to 3,999,999), decode Roman numerals, and translate dates into classical Latin numerals.
Conversion Calculator - Universal Unit Converter
Convert between standard and metric units for length, weight, area, volume, temperature, speed, digital storage, and pressure.
Unix Timestamp to Date Converter
Convert Unix epoch timestamps to human-readable dates (UTC, Local, ISO-8601) and vice versa.
Text to Binary, Hex, Octal Converter
Convert plain text to binary code (0s & 1s), Hexadecimal, Octal, and ASCII Decimal values.
Convert Text File to Excel - TXT to XLSX Converter
Convert plain text (.txt, .dat, .tsv, .log) into Microsoft Excel (.xlsx, .xls, .csv) spreadsheets with smart auto-column detection and live table preview.