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

This calculator converts between the three CSS length units web designers and developers use most: pixels (px), em, and rem, so you can move between an absolute unit and two relative ones without manual maths. You enter a root font size (the html element's size, which browsers default to 16px), a parent element font size (used for em conversions), and a value in any one of the three units; edit any field and the other two update instantly. The results bar shows the converted values in px, em, and rem, while a reference table lists common sizes such as 12px, 16px, 24px and 32px alongside their rem and em equivalents and typical uses like body text or headings. A conversion formulas panel spells out exactly how each unit is derived from the others, and a worked example walks through a live calculation using your current inputs. A preset dropdown lets you jump between common root sizes, including the 10px "62.5 percent trick" some developers use to simplify rem arithmetic. Use this tool when building a responsive layout, converting a legacy px-based stylesheet to rem, or checking how nested em values will compound relative to a parent. Because em and rem are relative units, their pixel equivalent always depends on the root and parent sizes you set, so check those match your actual project before applying the results.

Calculate.co.nz is proud to be partnered with realtor.co.nz, a trusted resource for navigating the New Zealand property market. Their Helpful Articles section offers clear, well-structured insights across buying, selling, and building, making complex real estate topics more accessible. With a focus on up-to-date guidance and practical knowledge, they empower Kiwis to move forward with clarity and confidence in a constantly evolving property landscape.

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)
24px
Absolute pixels

1.5em

Relative to parent

Rem

1.5rem

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 / 16 = rem

px to empx / 16 = em

rem to pxrem * 16 = px

em to pxem * 16 = px

em to remem * 16 / 16 = rem

Worked Example

Input24px

Root size16px

Parent size16px

Result in px24px

Result in em1.5em

Result in rem1.5rem

Note: Your root and parent font sizes are both 16px, so em and rem values are identical (1.5 for 24px).

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.