What is a rem in CSS?

The rem (root em) is a relative CSS length unit based on the root element's font size, usually the html element. 1 rem equals the root font size. If the root is 16 pixels, then 1 rem equals 16 pixels.

How do you convert rems to pixels?

To convert rems to pixels, multiply the rem value by the root font size in pixels: px = rem × base. For example, with a 16 px base, 1.5 rem equals 24 px. To go from pixels to rem, divide by the base: rem = px ÷ base.

Why is 16 px often used as the default base font size?

Most browsers use 16 pixels as the default font size for body text. Using 1 rem = 16 px keeps text legible and aligns with user accessibility settings. Designers can still scale the root size globally when needed.

Should I use rem or px in modern responsive design?

Rem units are generally recommended for typographic scales, spacing and layout because they respect user font-size preferences and allow for easier global scaling. Pixels can still be useful for fine-grained control in icons, borders or other fixed-size UI details.

What happens if I change the root font size?

Changing the root font size, for example via html { font-size: 18px; }, scales every rem-based value across the site. Text, padding and margins defined in rem automatically become larger or smaller while preserving their proportions.

Rems to Pixels Converter – REM ↔ PX with Custom Root Font Size

Understanding rems and pixels in modern CSS

The rem (root em) unit is one of the most useful tools for building scalable, accessible interfaces. Unlike em, which is relative to the font-size of the current element, rem is always relative to the root element (html) font-size.

Most browsers ship with html { font-size: 16px; }. If you do not override this value, then:

1 rem = 16 px
0.875 rem ≈ 14 px
1.5 rem = 24 px
2 rem = 32 px

Core formulas used by this converter

Given base font size B in pixels:

px = rem × B

rem = px ÷ B

Example (B = 16): 1.5 rem × 16 = 24 px. Conversely, 24 px ÷ 16 = 1.5 rem.

Why many teams prefer rem for type and spacing

When you size text, margins and paddings in rem units, your layout responds cleanly to user font-size preferences and global scaling:

Changing html { font-size } scales the entire typographic system.
Users who prefer larger basal text (e.g., 18 px instead of 16 px) see all rem-based elements scale up accordingly.
Design tokens become easier: you can define a scale like 0.75, 0.875, 1, 1.125, 1.25, 1.5, 2 rem and never think in pixels.

The “62.5% trick” and when to use it

Some codebases set html { font-size: 62.5%; }, which turns 16 px × 0.625 into 10 px. This means:

1 rem = 10 px
1.6 rem = 16 px
2.4 rem = 24 px

This mapping makes mental math convenient (1 rem = 10 px), but it can also conflict with user font-size expectations. Many teams now prefer to keep the root at 16 px and work directly with a rem-based type scale.

FAQ: rems, pixels and this converter

Is using pixels always “bad” for accessibility?

Not necessarily. Pixels are perfectly valid for small details such as borders, icons or shadows. The key is to avoid hard-coding everything in pixels, especially large blocks of text, because this can make it harder for users to scale content comfortably.

How do media queries interact with rem?

Media queries operate in CSS pixels (or other viewport units), independent of rem. A common pattern is to define breakpoints in px (e.g. 768 px, 1024 px) and use rem inside each breakpoint for typography and spacing.

How does this tool differ from simple one-direction calculators?

This calculator:

Supports bidirectional conversion (REM → PX and PX → REM).
Lets you change the base font size at any time.
Shows a live CSS snippet you can copy into your stylesheet or design system.
Updates a quick reference table to keep mental models aligned with your chosen scale.

Rems to Pixels Converter (REM ↔ PX)

REM ↔ PX with custom base font size

Common REM → PX conversions (based on current base)