What is the difference between px, em, and rem in CSS?

px (pixels) is an absolute unit that always renders at the same physical size regardless of context. em is a relative unit scaled to the font size of the element's parent: if a parent has font-size 16px, then 1.5em in a child equals 24px. rem (root em) is also relative but always scales to the root element (html) font size, which browsers default to 16px. Because rem ignores nesting, it is more predictable than em for layout and typography across complex page structures.

Why do browsers default to 16px?

The default root font size of 16px is a convention set by browser vendors and formalised in the CSS specification. It dates to early typographic standards where 16px was considered a comfortable reading size on typical monitor resolutions. You can override it by setting font-size on the html element (for example, html { font-size: 18px; }), which then changes the scale of all rem values across your page.

Should I use em or rem for responsive design?

rem is generally preferred for font sizes and spacing in modern responsive design because it scales predictably from a single root value. A user increasing their browser base font size will see all rem-based layouts scale correctly. em is useful for component-relative sizing, for example setting padding as a fraction of the component's own font size so spacing scales naturally with the text. Many design systems use rem for global rhythm and em for local component relationships.

CSS Unit Converter: px, em, rem

Convert between CSS pixels (px), em, and rem units instantly. Enter a value in any unit and see all three results calculated in real time. Set your root font size and parent element font size to match your project's context.

Calculate.co.nz is proud to be partnered with Health Based Building, a leader in sustainable and health-conscious building innovation. With over a century of experience, they develop high-performance systems like Foreverbreathe Specification, Magnum Board, and Foreverbreathe Paints to support energy-efficient, non-toxic living environments. Their commitment to healthier homes aligns with our belief that informed choices lead to better outcomes for Kiwi households.

Calculate.co.nz partner: Health Based Building

Standard CSS specification Based on the CSS Values and Units Module Level 4 (W3C). No browser-specific assumptions.

1. Font Size Context

Root font size (html element, browser default is 16px)

Parent element font size (for em conversions)

Common root size preset

2. Enter a Value to Convert

Pixels (px)

Em (relative to parent font size)

Rem (relative to root font size)

rem

Edit any field to convert from that unit. Other fields update automatically.

Converted Values

Pixels (px)
24
Absolute pixels

1.5

Relative to parent

Rem

1.5

Relative to root

Common Size Reference Table

px	rem (root: 16px)	em (parent: 16px)	Common use

Conversion Formulas Applied

Root font size16px

Parent font size16px

px to rempx / root

px to empx / parent

rem to pxrem * root

em to pxem * parent

em to remem * parent / root

Worked Example

Input24px

Root size16px

Parent size16px

Result in px24px

Result in em1.5em

Result in rem1.5rem

Note: em and rem values differ when your parent font size differs from your root font size.

Understanding CSS Units: px, em, and rem

CSS offers two broad categories of length units: absolute and relative. Pixels (px) are absolute. They represent a fixed size on the screen and do not change with surrounding context. Em and rem are both relative units, but they reference different things.

How em Works

The em unit is relative to the font size of the current element's parent. If a <div> has font-size: 20px, then 1.5em inside that div equals 30px. The key challenge with em is compounding: if you nest elements that each use em, the effective pixel size can grow unexpectedly because each level multiplies from its parent.

Formula: em = px / parent font size and px = em * parent font size

How rem Works

The rem unit (root em) always refers to the font size of the root <html> element. Because it ignores nesting, it is easier to reason about across a complex component tree. The browser default root font size is 16px, so 1rem = 16px unless you override it.

Formula: rem = px / root font size and px = rem * root font size

The 62.5% Trick

A popular pattern sets html { font-size: 62.5%; } so that the root becomes 10px (62.5% of the browser default 16px). This makes mental arithmetic simple: 1.6rem = 16px, 2.4rem = 24px, and so on. The trade-off is that you must override the base for accessibility reasons, since some browser accessibility settings that increase the default font size will be overridden by a hard percentage set on the root. Use the 10px preset in this converter to see conversions at that scale.

When to Use Each Unit

Unit	Best for	Avoid when
`px`	Borders, shadows, fine details that should not scale	Font sizes and spacing that should respect user preferences
`em`	Component-relative spacing (padding proportional to the component's text)	Global layout spacing where compounding becomes confusing
`rem`	Font sizes, global spacing, layout rhythm	When you need spacing tied to the local font size of a component

Accessibility Considerations

Users can set their browser's default font size to accommodate vision needs. If your stylesheet uses rem or em for font sizes, those sizes will scale with the user's preference. If you use px exclusively, your text will not scale, which can make the page inaccessible. The Web Content Accessibility Guidelines (WCAG) 2.1 require text to be resizable up to 200% without loss of content, and using relative units is the most reliable way to meet that standard.

Related Calculators

Essential Calculators: full collection of digital and utility tools.
Aspect Ratio Calculator: scale width and height while maintaining proportions.
Base64 Encoder / Decoder: encode or decode strings for web use.
Bandwidth Calculator: estimate file transfer times and data usage.
IP Subnet Calculator (CIDR): calculate network addresses and host ranges.

Sources and method: CSS Values and Units Module Level 4 (W3C, www.w3.org/TR/css-values-4). MDN Web Docs on CSS length units (developer.mozilla.org/en-US/docs/Web/CSS/length). Formulas applied: rem = px / root size; em = px / parent size; px = rem * root size; px = em * parent size; em to rem = em * parent size / root size.

This converter calculates CSS unit relationships based on the root and parent font sizes you specify. Actual rendered sizes depend on your browser, operating system, and any font-size overrides in your CSS cascade.