CSS Unit Converter – px, rem, em, pt, %

Base font size (px)

Pixels (px)

Rem

Points (pt)

Percent (%)

Convert between CSS length units

Type a value into any field and the rest update instantly, all relative to the base font size you set (16px by default, which matches most browsers' default). This is the everyday tool for translating a design spec's pixel values into the rem-based sizing modern CSS favors for accessibility.

Why rem instead of px?

Pixel values are fixed and don't respond to a user's browser font-size preference, which matters for accessibility — someone who's increased their default text size for readability won't see any benefit from a 16px value. rem units scale relative to the root (html) element's font size, so they respect that preference automatically, which is why most modern CSS style guides recommend rem for font sizes and spacing.

The difference between rem and em

Both are relative units, but relative to different things. rem is always relative to the root element's font size, no matter how deeply nested the element is. em is relative to the current element's own font size (or its parent's, depending on the property), which means em values can compound unpredictably as you nest elements with different font sizes — a common source of confusing, hard-to-trace sizing bugs. This calculator treats both the same way for simplicity (relative to the base font size field), since in the very common case of a flat, non-nested-font-size context, they behave identically.

Frequently Asked Questions

px and pt are absolute units — they always represent the same physical size regardless of context. rem and em are relative units, defined specifically as a multiple of a font size, so their pixel equivalent changes when that base font size changes.

16px is the default font size in virtually every browser, which is why it's the standard base for rem/em conversions unless your project has explicitly set a different root font size.

This follows the standard CSS conversion ratio: 1 pixel equals 0.75 points (or equivalently, 1 point equals 1.333 pixels), a fixed relationship inherited from print typography conventions, independent of your base font size setting.

Both are relative units and behave similarly for simple cases, but rem is generally preferred in modern CSS because its behavior stays consistent and predictable regardless of nesting, while % can compound in confusing ways similar to em.