PX to REM Converter

PX to REM conversion table

Reference table at the default base font size of 16px. Use the tool above to generate values for any custom base.

How to convert px to rem

The formula is straightforward: divide the pixel value by the root font size.

rem = px ÷ base-font-size

Examples (base = 16px):
  24px ÷ 16 = 1.5rem
  14px ÷ 16 = 0.875rem
  32px ÷ 16 = 2rem

The default browser root font size is 16px. Unless you or a framework explicitly changes html { font-size }, this is the base you should use. The tool above defaults to 16px and lets you change it to match your project.

The 62.5% trick — setting html { font-size: 62.5%; } — makes 1rem equal 10px, simplifying mental math (1.6rem = 16px, 2.4rem = 24px). Use the 10 base preset to see this scale. Bear in mind that this can interfere with user-agent stylesheets and third-party component styles, so use it carefully.

Why use rem instead of px?

The fundamental reason is accessibility. When a user changes their browser's default font size (Settings → Appearance → Font size), that change only affects elements sized in relative units like rem. Elements sized in px remain fixed regardless of user preferences.

For users who rely on larger text — including people with low vision, dyslexia, or cognitive differences — a site that ignores their font settings creates a real barrier. Building layouts and typography in rem means your design scales correctly from 12px to 24px base without a single media query.

Beyond accessibility, rem simplifies responsive design. Instead of writing separate @media breakpoints to scale text at different viewport widths, a single root font size adjustment can reflow your entire typographic scale. Many design systems (including Material Design and Tailwind CSS) use rem throughout for this reason.

px is still appropriate for: borders and outlines (1px hairlines), box shadows, fixed icon sizes where you want identical visual output regardless of user zoom, and some media query thresholds tied to physical device widths.

PX vs REM vs EM — which to use?

All three units are valid CSS; the choice depends on what the value should be relative to.

• px — absolute. Always the same physical size. Use for borders, shadows, and fixed elements where you explicitly do not want scaling.
• rem — relative to the root (html) font size. Consistent across the entire page. Best for typography, spacing, and layout dimensions that should scale with user preferences.
• em — relative to the parent element's font size. Compounds when nested: 1em inside a 2em container equals 32px at root 16px. Useful for component-internal spacing that should scale with the component's own font size (e.g., button padding that stays proportional to button text).

A practical rule: use rem for layout and global typography, em for spacing within a component that has its own font-size, and px only for fixed visual elements where scaling would break the design.

Bulk conversion

Paste a CSS block in the bulk-mode textarea. Every NNpx value (where NN is any number) gets replaced with the rem equivalent. The regex (-?\d*\.?\d+)\s*px\b is intentionally precise to avoid mangling values inside selectors or in 0px hacks. This is useful when migrating a legacy stylesheet from pixel-based values to rem.

FAQ

What is the px to rem formula?

Divide the pixel value by your root font size: rem = px ÷ base. At the default 16px base, 24px becomes 1.5rem. You can set any base in the tool above — common values are 16 (browser default), 10 (62.5% trick), and 18 (larger default).

How many px is 1 rem?

At the browser default, 1rem equals 16px. If you or your framework sets a different root font size (for example, html { font-size: 18px; }), then 1rem equals 18px on that page. Always match the base in the converter to your actual CSS root font size.

What about media query px values?

Bulk mode converts all px values, including those inside @media queries. Some teams keep media queries in px (because they correspond to physical device widths) and only convert layout px to rem. Manually edit the bulk output if that's your preference.

Why does converting 17px give 1.0625rem?

17 ÷ 16 = 1.0625. Tools rounding to 2 decimals would show 1.06rem (which is actually 16.96px). This converter keeps 4 decimal places to avoid accumulated rounding drift across a stylesheet.

Does rem work in all browsers?

Yes. The rem unit has had full cross-browser support since 2013 (IE9+). There are no compatibility concerns for modern development — use it freely.

Related CSS tools

• Color Picker — Pick colors, convert hex/RGB/HSL/OKLCH, and check WCAG contrast.
• Flexbox Generator — Visual CSS Flexbox playground. Live preview + copyable CSS. Control direction, wrap, justify, align, gap. Example child layouts.
• CSS Grid Generator — Visual CSS Grid layout builder. Configure columns, rows, gaps, and named areas. Live preview with copyable CSS output.
• Box Shadow Generator — Visual CSS box-shadow builder. Control offset, blur, spread, color, inset. Multi-layer shadows. Live preview + copyable CSS.

Related articles

• 5 min readCSS Design Tokens — Define Spacing, Colors, and Typography with Custom PropertiesCSS design tokens store reusable values as custom properties (CSS variables). Learn how to define rem-based spacing and type scales, organize tokens by category, and share...
• 4 min readFont Size Accessibility — Minimum Sizes, User Zoom, and WCAG RequirementsWCAG 2.1 doesn't mandate a specific minimum font size, but best practice is 16px body text with relative units (rem/em) so text scales with user preferences. Learn accessible...
• 4 min readTailwind CSS Font Sizes and REM — How Tailwind Handles Typography UnitsTailwind CSS uses rem for all font sizes with a 16px base. Learn Tailwind's text-* classes, how to customize the type scale, use arbitrary rem values, and configure a custom...
• 5 min readFluid Typography with CSS clamp() — Scale Fonts Without Media QueriesCSS clamp() creates fluid typography that scales smoothly between minimum and maximum font sizes without media queries. Here's how to write fluid type scales, calculate clamp()...
• 5 min readCSS Units Guide — px, em, rem, vw, vh, and When to Use EachCSS has absolute units (px), relative to font-size (em, rem), viewport units (vw, vh, dvh), and container query units (cqw). Here's when to use each unit and common patterns...
• 4 min readPX to REM Conversion — Formula, Table, and CSS Custom PropertiesConvert pixel values to rem using the formula rem = px / base-font-size. Includes a quick reference table for common values, the 62.5% root font-size trick, and how to use CSS...

Part of Frontend & Design tools.

Written by Mian Ali Khalid. Last updated 2026-05-12.