px to rem Converter

Convert px ↔ rem, em, vw, vh and pt instantly. Set your base font size for accurate results.

Two-way conversion | Instant results

The root html font-size used for rem calculation

px

Two-Way Converter

px
rem
em
—
relative to parent
pt
—
points (print)
vw
—
vh
—
Viewport:
px
px
CSS Snippet

Batch Converter

Paste multiple px values (one per line or comma-separated) to convert them all at once.

Common Sizes

px rem em / pt

Click any row to load value

Formulas

px → rem
rem = px ÷ base
rem → px
px = rem × base
px → pt
pt = px × 0.75
px → vw
vw = (px ÷ vp-width) × 100

Pro Tip

Set html { font-size: 62.5%; } in your CSS so 1rem = 10px — making mental math much easier.

Understanding CSS Units: px, rem, and em

A practical guide to choosing the right CSS unit for every situation

CSS offers a wide variety of length units, but px, rem, and em are by far the most commonly used in web development. Knowing when to use each unit — and how to convert between them — is a fundamental skill for building accessible, responsive interfaces.

Pixels (px) are absolute units: 24px is always 24px, regardless of any parent or root settings. While this predictability is useful for borders and fine details, it creates problems for accessibility. When a user increases their browser's default font size, pixel-based text and layouts do not scale with it.

px (Pixels)

Absolute unit. Always the same size. Best for borders, shadows, and fine details where you don't want scaling. Avoid for font sizes to ensure accessibility.

rem (Root Em)

Relative to the html element's font size. Consistent and predictable. Best choice for typography, spacing, and layout units in modern CSS.

em (Parent Em)

Relative to the parent element's font size. Useful for component-scoped scaling, but can cause compounding issues when nested deeply.

Why rem Matters for Accessibility

Scalable typography is a core web accessibility requirement

The WCAG 2.1 Success Criterion 1.4.4 (Resize Text) requires that text can be resized up to 200% without loss of content or functionality. Using rem units ensures your design respects and responds to users' font size preferences set in their browser.

Users with visual impairments often increase their browser's default font size. Websites built with px units ignore this preference entirely. Websites built with rem scale naturally with the user's choice.

Best Practices

  • Use rem for font sizes, margins, and padding
  • Use px for borders, outlines, and box-shadows
  • Never set html { font-size: 14px; } — use a percentage or leave it default
  • Use em for component-relative sizing like button padding
  • Use vw/vh for viewport-relative elements like hero sections

px to rem Reference Table (Base 16px)

Common pixel values and their rem equivalents at the browser default base font size

px rem pt Typical Use
8px 0.5rem 6pt Extra small text, captions
10px 0.625rem 7.5pt Small labels, badges
12px 0.75rem 9pt Small body text, helper text
14px 0.875rem 10.5pt Secondary body text
16px 1rem 12pt Base body text (browser default)
18px 1.125rem 13.5pt Large body text, lead text
20px 1.25rem 15pt Small headings, h6/h5
24px 1.5rem 18pt h4/h5 headings
28px 1.75rem 21pt h4 headings
32px 2rem 24pt h3 headings
36px 2.25rem 27pt h2 headings
48px 3rem 36pt h1 headings, hero titles
64px 4rem 48pt Display text, large heroes
96px 6rem 72pt Giant display text

Other CSS Length Units Explained

Beyond px and rem — understanding the full CSS unit toolkit

Viewport Units (vw, vh, vmin, vmax)

Relative to the browser viewport. 1vw = 1% of the viewport width, 1vh = 1% of the viewport height. Perfect for full-screen sections, responsive type scaling with clamp(), and viewport-proportional spacing.

em (Element Em)

Relative to the current element's font size (or the parent's font size when used in font-size). Useful for button padding that scales with its text size, and for self-contained component scaling.

Percentage (%)

Relative to the parent element's value for the same property. width: 50% is half the parent's width. For font-size, it's relative to the inherited font size. Excellent for fluid layouts.

pt, cm, mm, in (Absolute)

Physical print units. 1pt = 1/72 inch = 1.333px at 96dpi. Rarely used on screen, but useful for @media print stylesheets where physical dimensions matter for paper output.

Frequently Asked Questions

Common questions about px to rem conversion and CSS units

rem stands for "root em" and is relative to the root element's font size (usually the html element). If the root font size is 16px, then 1rem = 16px. rem units are preferred over px for accessibility because they respect the user's browser font size preferences.
rem units respect the user's browser font size settings, improving accessibility. When a user increases their default font size, rem-based layouts scale correctly while px-based layouts stay fixed. This is especially important for users with visual impairments who rely on larger text.
rem is always relative to the root (html) font size, making it consistent everywhere in your document. em is relative to the nearest parent element's font size, which can cause compounding issues when elements are nested. rem is more predictable and easier to work with in large projects.
The default font size in all major browsers (Chrome, Firefox, Safari, Edge) is 16px. This means 1rem = 16px by default. Many developers set html { font-size: 62.5%; } so that 1rem = 10px, which makes mental conversion much easier (e.g., 24px = 2.4rem instead of 1.5rem).
Yes. You can use rem for any CSS property that accepts length values: margin, padding, width, height, border-radius, gap, and more. Using rem consistently for spacing and sizing creates a harmonious, scalable design system that adapts to user preferences.