← Home

REM Calculator

Calculate rem values from pixels, pixels from rem, and convert entire CSS stylesheets. Adjust the root font size to match your project, view a dynamic reference table, and see EM equivalents — all instantly in your browser.

px
EM equivalent:1em(relative to parent, same value as rem when parent = root)

Quick Reference Table

PXREMUse Case
10px0.625remSmall captions
12px0.75remSmall text
14px0.875remBody text (small)
16px1remBody text (default)
18px1.125remLarge body text
20px1.25remH4 / lead
24px1.5remH3
28px1.75remH2 (small)
32px2remH2
36px2.25remH1 (small)
40px2.5remH1
48px3remDisplay
64px4remHero

Why Use REM?

  • •Accessibility: REM respects user browser font-size settings. If someone sets their default to 20px, rem-based layouts scale proportionally.
  • •Consistency: All rem values reference a single root, making global scaling easy (change :root font-size and everything adjusts).
  • •Responsive design: Combine rem with media queries to scale your entire UI by adjusting one value.
  • •Maintainability: Easier to reason about proportions when all sizes derive from one base.

Last updated: March 2026

How the REM Calculator Works

The REM calculator uses a simple formula: rem = px / root-font-size. Enter a value in either the PX or REM field and the other updates instantly. The root font size defaults to 16px (the browser standard) but can be changed to match your project's configuration. The quick reference table below the converter shows common sizes and updates dynamically when you adjust the root.

When to Use REM Units

REM units shine whenever you need scalable, accessible sizing. Use them for font sizes, padding, margins, max-widths, and gap values. This ensures your layout responds to user font-size preferences — critical for accessibility since roughly 26% of adults modify their browser's default font size. Keep px for elements that should remain pixel-perfect regardless of zoom, such as thin borders and box shadows.

Bulk CSS Conversion

The Bulk CSS Converter tab lets you paste an entire stylesheet and convert all px values to rem in one step. You can configure the number of decimal places (2, 3, or 4), skip values below a certain threshold (useful for preserving 1px borders), and toggle whether line-height values should be converted. The converted output includes a count of how many values were changed.

REM in CSS Frameworks

Most modern CSS frameworks use rem as their default unit. Tailwind CSS uses rem for its spacing scale (p-4 = 1rem), font sizes (text-base = 1rem), and nearly all other dimensional utilities. Bootstrap switched from px to rem starting in version 4. Material UI uses rem for its typography scale. Understanding the px-to-rem relationship helps you work more effectively with these tools and customize their design tokens.

Related Tools

PX to REM Converter

Convert pixels to rem units

JSON Formatter

Format and validate JSON

CSS Gradient Generator

Create CSS gradients visually

Color Picker

Pick and convert colors

Frequently Asked Questions

How do I calculate rem from pixels?+
Divide the pixel value by the root font size. With the default root of 16px: rem = px / 16. For example, 24px / 16 = 1.5rem. Use this calculator to do it instantly — type a pixel value and the rem equivalent appears in real time.
What is the root font size?+
The root font size is the font-size set on the <html> element. All modern browsers default to 16px. You can change it with CSS: html { font-size: 18px; }. Every rem value in your stylesheet is calculated relative to this root size.
How do I convert rem back to pixels?+
Multiply the rem value by the root font size: px = rem * root-font-size. With a 16px root, 1.5rem = 1.5 * 16 = 24px. This calculator handles both directions — type in either field.
What is the difference between rem and em?+
REM is always relative to the root (<html>) element's font size, making it consistent across your entire page. EM is relative to the parent element's font size, which means it can compound in nested elements. REM is generally preferred for predictable, maintainable layouts.
Can I convert an entire CSS file at once?+
Yes. Switch to the Bulk CSS Converter tab, paste your CSS, and all px values are converted to rem instantly. You can configure decimal places, skip values under a threshold, and toggle whether line-height values should be converted.
Should I use rem for everything in CSS?+
Use rem for font sizes, spacing (padding, margin), and layout dimensions that should scale with user preferences. Keep px for borders (1px solid), box shadows, and decorative elements that should remain fixed. This gives you the best balance of accessibility and visual consistency.