📐 Converters

CSS px to em Converter

Converts pixels to em and back against the parent font size, 16px by default: 24px is 1.5em. Unlike rem, the base is the parent element, not :root.

Parent font-size (px)

Pixels em

Diferente de rem (sempre relativo ao :root), em é relativo ao pai imediato.

px, em, and the sum that shifts with the parent

The difference between px and em is not one of unit, it is one of reference. A pixel is an absolute value in CSS. An em equals the parent element's font-size — or the element's own, when applied to properties other than font-size. Since browsers start at 16px by default, 1em usually works out to 16px at the root, but one container with a different font size is enough to make the same declaration render at another size.

Here you set the reference font-size and convert in both directions: type the pixel value to see how many em it represents, or the reverse. With the base at 16, 24px becomes 1.5em and 0.875em becomes 14px. Switch the base to 20 and those same 24px are worth 1.2em — which is exactly the effect that catches people out when components are nested.

It is worth separating em from rem. A rem always looks at the document root, ignoring parents, so it never compounds: two levels of 0.9em multiply out to 0.81, whereas two levels of 0.9rem stay at 0.9. The rule of thumb that avoids headaches is to use rem for font sizes and general spacing, and reserve em for things that should scale with the component's own text, such as button padding.

Frequently asked questions

Should I really avoid px for font-size?

The old worry was that px ignored the browser's font-size setting. That has changed: current browsers apply page zoom to px normally. What still holds is that someone who set a larger default font in their browser preferences is served by rem and not by px — an accessibility argument that remains valid.

Why did my 1em come out at an unexpected size?

Almost always because the reference is not what you pictured. An em inside an element whose parent already shrank the font starts from that reduced value, not from 16px. Inspect the element and read the parent's computed font-size — that number is the base to enter here.

Where does pt fit in?

pt is a print unit: 1pt equals 1/72 of an inch, and in CSS 1pt corresponds to roughly 1.333px. It makes sense in a print stylesheet; on screen, px, rem and em describe what happens far better.

Related Tools

🔄

SCSS to CSS Converter

Strips simple SCSS features (variable declarations and // comments) producing an approximate CSS for inspection.

🔄

CSS to LESS Converter

Convert CSS stylesheets to LESS syntax, turning custom properties (--var) into @variables. Modernize your CSS and copy the ready-to-use code.

🔄

CSS to SASS Converter

Convert plain CSS to the indented SASS syntax, without braces or semicolons. Paste your CSS and copy the SASS to modernize your project styling.

🔄

CSS to SCSS Converter

Adapts CSS to SCSS preserving rules and turning CSS custom properties into SCSS variables when detected.

🔄

LESS to CSS Converter

Strips LESS @variables and // comments producing approximate CSS suitable for visual checking.

📏

CSS px ↔ rem Converter

Convert between px and rem in CSS with a configurable root font base (default 16px). Essential for responsive, accessible layouts with scalable typography.