Px to Em Converter
Convert between pixels (px) and em/rem CSS units. Calculate em, rem, points, and percentages based on any base font size for responsive web design.
Px to Em Converter
Calculator
Adjust values & calculateEnter your values below. Every result is computed in your browser โ no data is sent to any server.
Formula: Em = Pixels / Base Font Size | Rem = Pixels / 16 | Points = Pixels x 0.75
Worked example โ 24px = 1.5em = 1.5rem = 18pt = 150%
Formula
Em = Pixels / Base Font Size | Rem = Pixels / 16 | Points = Pixels x 0.75
Em is calculated by dividing the pixel value by the parent element font size. Rem always uses the root font size (default 16px). Points equal pixels multiplied by 0.75 (since 1pt = 1/72 inch and 1px = 1/96 inch at standard resolution). Percentage equals (pixels / base) x 100.
Worked Examples
Example 1: Converting Heading Size to Em
Problem:A heading is 24px with a base font size of 16px. What is the em value?
Solution:Em = pixels / base font size Em = 24 / 16 = 1.5 em Rem = 24 / 16 = 1.5 rem Points = 24 x 0.75 = 18 pt Percent = (24 / 16) x 100 = 150%
Result:24px = 1.5em = 1.5rem = 18pt = 150%
Example 2: Converting Em to Pixels
Problem:A margin is set to 2.5em with a parent font size of 14px. What is the pixel value?
Solution:Pixels = em x base font size Pixels = 2.5 x 14 = 35px Rem = 35 / 16 = 2.1875 rem Points = 35 x 0.75 = 26.25 pt
Result:2.5em at 14px base = 35px = 2.1875rem = 26.25pt
Frequently Asked Questions
What is the difference between px, em, and rem in CSS?
Pixels (px) are absolute units that correspond to a fixed number of device pixels on screen. Em is a relative unit based on the font size of the parent element, meaning 1em equals the computed font size of the current element. Rem (root em) is relative to the root HTML element font size, typically 16px by default. Using em and rem makes designs more flexible and accessible because text and spacing scale proportionally when users change their browser font size settings.
Why should I use em or rem instead of pixels?
Using em and rem units improves accessibility and responsive design. When users increase their browser default font size for readability, pixel-based layouts remain fixed while em/rem-based layouts scale proportionally. This is especially important for visually impaired users who rely on larger text. Additionally, rem-based designs are easier to maintain because changing the root font size scales the entire layout proportionally. The WCAG accessibility guidelines recommend using relative units for text sizing.
When should I use em versus rem?
Use rem for most sizing and spacing to maintain consistency across your entire layout, since rem always references the root font size (typically 16px). Use em when you want a component to scale relative to its own font size, such as padding and margins within a button that should grow proportionally with its text size. Em is also useful for nested components where you intentionally want compounding sizes. As a general rule, rem for global consistency and em for component-level proportional scaling.
What is the default base font size in browsers?
The default base font size in virtually all modern web browsers is 16 pixels. This means 1rem = 16px by default. Users can change this in their browser settings, which is why using relative units matters for accessibility. Some developers set the root font size to 62.5% (10px) to make rem calculations easier: 1.6rem = 16px, 2rem = 20px, and so on. However, this technique requires resetting body text to 1.6rem to maintain the expected default appearance.
Why does the same em value look like a different pixel size on different elements of my page?
Em is relative to the font size of the element it is applied to, not to a single fixed page-wide value, so nested elements compound. If a parent div has font-size: 1.5em (24px, assuming a 16px root) and a child span inside it also uses padding: 1em, that padding computes to 24px, not 16px, because it inherits the parent's computed font size rather than the root's. This compounding is the most common source of unexpected spacing bugs when using em for padding or margin inside deeply nested components. Rem avoids this entirely because it always references the root html element's font size regardless of nesting depth, which is why most component libraries default to rem for spacing and reserve em for typography that should intentionally scale with its immediate container.
What are the ch and ex units and when are they better than em?
The ch unit is the advance width of the zero glyph in the current font, and ex is the height of a lowercase x, so both track the actual typeface rather than the declared font size. They shine for measure control, since setting a paragraph max-width around 60ch keeps line length near the comfortable reading range whatever font is loaded. Em cannot do that, because two fonts at the same em size can differ widely in glyph width and x height.
Why does em behave differently for padding and margin than for font-size?
On the font-size property em refers to the parent computed font size, but on any other property it refers to the element own computed font size. A button with font-size 20px and padding 0.5em therefore gets 10px of padding, and if the font size later changes the padding scales with it automatically. That self referential behaviour makes em the natural unit for button padding, icon sizing and gaps that should stay proportional to their text.
What is the difference between rem and the newer viewport and container relative units?
Rem is fixed to the root font size, so it respects user text preferences but ignores available space. Viewport units such as vw scale with the window, and container query units scale with a designated ancestor, which lets a component adapt to the space it occupies rather than to the whole screen. Many type scales combine them through clamp, using a rem based minimum and maximum with a fluid middle term so text never falls below a readable size.
Why should I avoid setting the root font size to a fixed pixel value?
Declaring html font-size in pixels overrides the browser default that reflects a user chosen text size, so readers who raised it for accessibility get no benefit and rem stops being a user scalable unit. Leaving the root at its default, normally 16px, or expressing it as a percentage keeps that preference intact while still giving predictable arithmetic, since this converter divides by that base whichever value it takes.
How do em and rem interact with media queries and breakpoints?
Inside a media query, em and rem both resolve against the initial font size rather than the root element declared value, so the two behave identically there and a page level font-size change cannot shift the breakpoints. Expressing breakpoints in em rather than pixels means they respond to a user increased default text size, letting a layout switch to a narrower arrangement when type is enlarged rather than only when the window shrinks.
References
Reviewed for accuracy by Manoj Kumar, Mathematics Educator ยท Editorial policy
Related Calculators
๐งฎTorque Unit Converter
Calculate torque unit converter with inputs, formulas, and instant results.
๐งฎElectrical Resistance Converter (ฮฉ, kฮฉ, Mฮฉ)
Calculate electrical resistance unit converter with inputs, formulas, and instant results.
๐งฎTime Unit Converter
Calculate time unit converter with inputs, formulas, and instant results.
๐งฎArea Converter
Calculate area converter with inputs, formulas, and instant results.
๐งฎAresto Hectares Converter
Calculate aresto hectares converter with inputs, formulas, and instant results.
๐งฎCentimeter to Inch Converter
Calculate centimeter to inch converter with inputs, formulas, and instant results.
๐งฎChain to Meter Converter
Calculate chain to meter converter with inputs, formulas, and instant results.
๐งฎDecimeter to Meter Converter
Calculate decimeterto meter converter with inputs, formulas, and instant results.