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

Look up common px to rem values at a 16px base—12px, 16px, 18px, 24px, 32px and more. Free CSS cheat sheet with links to each conversion page.

Rajkishor Sahu
By Rajkishor Sahu Software Engineer, Founder of Daily Calcs
· Published June 21, 2026 · Updated August 11, 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. For fixed lookups, open the dedicated pages: 16px to rem, 24px to rem, 32px to rem.

Last verified on: August 12, 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

Swipe to see all columns →

PixelsREMCommon usePage
10px0.625remFine print, captions10px to rem
12px0.75remSmall labels, footnotes12px to rem
14px0.875remSecondary body, form hints14px to rem
16px1remBody text default16px to rem
18px1.125remLarge body, lead paragraphs18px to rem
20px1.25remH6, small headings20px to rem
24px1.5remH5, section titles24px to rem
32px2remH4, page titles32px to rem
48px3remH2, hero subheads48px to rem
64px4remH1, display headings64px to rem

Spacing scale (4px grid)

Swipe to see all columns →

PixelsREMCommon usePage
4px0.25remTight padding, icon gaps—
8px0.5remInline spacing, small gaps8px to rem
12px0.75remComponent internal padding12px to rem
16px1remStandard padding unit16px to rem
24px1.5remSection padding24px to rem
32px2remLarge section gaps32px to rem
48px3remPage section margins48px to rem
64px4remHero vertical spacing64px to rem

Swipe to see all columns →

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

Swipe to see all columns →

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):

Swipe to see all columns →

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:

Swipe to see all columns →

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:

Swipe to see all columns →

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:

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?

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