Everyday

PX to REM Conversion Cheat Sheet — Common Pixel Values for Responsive CSS

Convert px to rem instantly with this 2026 cheat sheet. Covers 12px, 16px, 18px, 24px, and 32px at a 16px base. Free px-to-rem converter tool.

By Daily Calcs Team , Independent Editorial Research · Reviewed by Daily Calcs Editorial , Calculator Methodology Review · Published June 21, 2026 · 6 min read

Direct Answer

To convert pixels to rem, divide by the root font size (default 16px): rem = px ÷ 16. Common values: 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 24px = 1.5rem, 32px = 2rem. Rem units scale with user browser preferences, making them the accessibility-standard choice for typography and spacing in modern CSS.

Use the PX to REM Converter for any pixel value with a custom base font size.

Last verified on: June 22, 2026

Editorial note: This cheat sheet assumes a 16px root font size unless noted. Projects using 62.5% html font-size (10px base) require different mental math — use the converter with your actual base.

Research method: Conversions verified against W3C CSS Values and Units Module Level 3 and browser default style sheets, checked June 22, 2026.

The PX to REM Formula

rem = px / root font-size (px)

Default: rem = px / 16
Reverse: px = rem * 16

Example: 20px ÷ 16 = 1.25rem

Complete Cheat Sheet (16px Base)

Typography scale

PixelsREMCommon use
10px0.625remFine print, captions
12px0.75remSmall labels, footnotes
14px0.875remSecondary body, form hints
16px1remBody text default
18px1.125remLarge body, lead paragraphs
20px1.25remH6, small headings
24px1.5remH5, section titles
32px2remH4, page titles
48px3remH2, hero subheads
64px4remH1, display headings

Spacing scale (4px grid)

PixelsREMCommon use
4px0.25remTight padding, icon gaps
8px0.5remInline spacing, small gaps
12px0.75remComponent internal padding
16px1remStandard padding unit
24px1.5remSection padding
32px2remLarge section gaps
48px3remPage section margins
64px4remHero vertical spacing
Design specREM (16px base)CSS snippet
14px text0.875remfont-size: 0.875rem;
16px text1remfont-size: 1rem;
18px text1.125remfont-size: 1.125rem;
24px heading1.5remfont-size: 1.5rem;
8px gap0.5remgap: 0.5rem;
16px padding1rempadding: 1rem;
32px margin2remmargin-bottom: 2rem;

When to Use REM vs EM vs PX

UnitRelative toBest for
remRoot (html) sizeTypography, spacing, layout
emParent elementComponent-scoped scaling
pxFixed device pixelBorders (1px), shadows, fine lines

Use rem for anything that should respect user font-size preferences. Use px only where sub-pixel precision matters and accessibility scaling would break the design (hairline borders).

Custom Base Font Size

If your project sets html { font-size: 62.5%; } (10px base):

PixelsREM with 10px base
16px1.6rem
24px2.4rem
32px3.2rem

Always confirm your project’s root before converting from a design comp.

Worked Examples at Different Base Sizes

Design comps often arrive in px. Here is how common values convert at three common root settings:

Pixels16px base (default)10px base (62.5%)20px base (user pref.)
12px0.75rem1.2rem0.6rem
16px1rem1.6rem0.8rem
24px1.5rem2.4rem1.2rem
32px2rem3.2rem1.6rem

If your project uses html { font-size: 62.5%; }, divide px by 10 instead of 16. Always confirm in DevTools before shipping.

Tailwind CSS Quick Mapping

Tailwind’s default spacing scale uses rem under the hood. These are the most common class-to-pixel mappings at 16px root:

Tailwind classREM valuePixelsTypical use
text-xs0.75rem12pxCaptions, fine print
text-sm0.875rem14pxSecondary text, labels
text-base1rem16pxBody copy
text-lg1.125rem18pxLead paragraphs
text-xl1.25rem20pxSmall headings
text-2xl1.5rem24pxSection headings
p-41rem16pxCard padding
gap-61.5rem24pxGrid/flex gaps

Project Setup Checklist

Before converting a design system from px to rem:

  • Confirm root font size in html { font-size } — default is 16px (100%)
  • Document the base in your design tokens or README
  • Convert typography scale first (most accessibility impact)
  • Convert spacing scale second (padding, margin, gap)
  • Keep 1px borders and hairlines in px — they should not scale
  • Test at 200% browser zoom to verify layout holds (WCAG 1.4.4)
  • Use per-value pages like 16px to REM for quick lookups

Official and Supporting Sources

Next Step

Open the PX to REM Converter, enter any pixel value, set your base font size, and copy the rem result directly into your CSS.

Frequently Asked Questions

How do you convert pixels to rem?

Divide the pixel value by the root font size (browser default is 16px). Formula: rem = px / base font size. Example: 24px ÷ 16px = 1.5rem. If you change the root to 10px for easier mental math, 24px becomes 2.4rem. Always confirm which base your project uses — design systems often document this in their typography scale. The rem unit is relative to the html element's font-size, not the parent element.

What is 16px in rem?

At the default 16px root font size, 16px equals exactly 1rem. This is the browser default for most user agents and the reference point for most px-to-rem cheat sheets. Body text at 1rem respects user browser font-size preferences, which is why rem is preferred over px for accessible typography. If a user sets their browser default to 20px, 1rem renders as 20px on screen.

Why use rem instead of px for CSS?

Rem units scale with the user's root font-size preference, improving accessibility for visually impaired users who enlarge default text. They also simplify responsive design — changing html { font-size } cascades proportionally through all rem-based sizing. Px units are fixed and ignore user preferences unless you use relative units. Most modern design systems use rem for spacing and typography, reserving px for borders and shadows.

What is the most common px to rem conversion base?

16px is the universal default — set by all major browsers and used in the W3C reference pixel definition. Many teams temporarily set html { font-size: 62.5% } (making 1rem = 10px) for easier mental math, then use rem values like 1.6rem for 16px equivalent. Others keep 100% (16px) and memorize common conversions. Our cheat sheet uses 16px base unless noted.

How do I convert rem back to pixels?

Multiply rem by the root font size: px = rem * base. At 16px base, 1.5rem = 24px and 0.875rem = 14px. The PX to REM Converter on Daily Calcs supports bidirectional conversion — enter rem to get px or px to get rem with a custom base font size. This is useful when inspecting a design comp in px and writing CSS in rem.

px vs rem: Which should you use for CSS typography?

Use rem for font sizes, spacing, and layout rhythm so text scales with the user's root font-size preference — important for accessibility. Use px for hairline borders, shadows, and fixed bitmap dimensions where scaling would break the design. Most design systems set body text at 1rem (16px default) and headings at 1.5rem to 3rem. The cheat sheet below assumes 16px root unless noted.

What px values should I memorize for rem conversion?

At 16px base, memorize these: 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem, 64px = 4rem. These cover 90% of typography and spacing decisions in web UI. For spacing scales (4px, 8px, 16px, 24px, 32px), divide by 16: 8px = 0.5rem, 4px = 0.25rem.

Try the calculator

PX to REM Converter

Open

Related guides