Pixel (Web) to Rem Conversion Table
| Pixel (Web) (px) | Rem (rem) | Reference Benchmark | Formula Step |
|---|---|---|---|
| 8 px | 0.5 rem | Micro-badge, mobile status tag, and fine print footnote | 8 × 0.0625 = 0.5 rem |
| 10 px | 0.625 rem | Legal copyright disclaimer and dense tabular metadata | 10 × 0.0625 = 0.63 rem |
| 12 px | 0.75 rem | Secondary UI navigation label and form field helper caption | 12 × 0.0625 = 0.75 rem |
| 14 px | 0.875 rem | Standard mobile body text, form input, and compact button | 14 × 0.0625 = 0.88 rem |
| 16 px | 1 rem | Universal web browser root font baseline (1rem default) | 16 × 0.0625 = 1 rem |
| 18 px | 1.125 rem | Subheading, article lead paragraph, and callout banner | 18 × 0.0625 = 1.13 rem |
| 20 px | 1.25 rem | Card component header, modal title, and tablet subsection | 20 × 0.0625 = 1.25 rem |
| 24 px | 1.5 rem | Section headline (H3), brand logo text, and featured stat | 24 × 0.0625 = 1.5 rem |
| 28 px | 1.75 rem | Prominent section title and tablet landing hero banner | 28 × 0.0625 = 1.75 rem |
| 32 px | 2 rem | Major subsection headline (H2) and standard blog article title | 32 × 0.0625 = 2 rem |
| 36 px | 2.25 rem | Feature hero headline and landing page call-to-action title | 36 × 0.0625 = 2.25 rem |
| 40 px | 2.5 rem | Marketing banner display headline and large metric counter | 40 × 0.0625 = 2.5 rem |
| 48 px | 3 rem | Primary page headline (H1) and desktop hero display type | 48 × 0.0625 = 3 rem |
| 64 px | 4 rem | High-impact landing hero headline and exhibition display | 64 × 0.0625 = 4 rem |
| 72 px | 4.5 rem | One-inch physical print headline and poster display title | 72 × 0.0625 = 4.5 rem |
| 96 px | 6 rem | Giant billboard digital display typography and lead graphic | 96 × 0.0625 = 6 rem |
Pixel (Web) to Rem Formula & Unit Definitions
The conversion ratio between Pixel and Rem is defined as 0.062500 rem per 1 px. Multiplying any value in pixels by this factor produces its exact equivalent in rems.
Quick Estimation: Divide pixels by 16 to get rems assuming standard browser root font size. For example, 24 px ÷ 16 = 1.5 rem.
Pixel (px)
Source Standard- CSS Reference Pixel (1/96 Inch)
- Defined by W3C CSS specifications as the visual angle of one pixel on a 96 DPI display at arm’s length (1 px = 0.75 pt).
- The foundational absolute unit for digital screens, UI design systems, CSS layouts, and raster graphic production.
Rem (rem)
Target Standard- Root-Relative Typographic Scale Unit
- Defined in CSS3 as relative strictly to the font-size of the root <html> element (1 rem = 16 px by default browser baseline).
- The industry-standard choice for modern responsive design systems, accessible fluid typography, and Tailwind CSS.
Frequently Asked Questions
Q.How do you convert pixels to rems accurately?
Multiply your Pixel measurement by 0.0625 (or apply ÷ 16). For example, 16 px converts to 1 rem instantly.
Q.What is the exact mathematical ratio between Pixel and Rem?
One Pixel equals exactly 0.062500 Rems based on standard 96 DPI screen resolution and 16px root font baselines.
Q.What is the difference between Pixel and Rem?
Pixel (px) is a css reference pixel (1/96 inch), while Rem (rem) is a root-relative typographic scale unit.