px to em Converter

A px to em converter converts between pixel and em units in either direction, against a configurable base font size that defaults to 16 pixels, the value most browsers use by default. Input accepts decimals such as 14.5, fractions such as 3/4, and mixed numbers such as 1 1/2.

Conversion direction, px to em or em to px, sets which formula applies. Base font size should match the project's root font size, since every em value is relative to it. Em equals pixels divided by base font size for px to em; pixels equals em multiplied by base font size for em to px. Settings holds a step-by-step formula display that shows the full derivation of each conversion, and a quick conversion table lists common pixel-to-em mappings at the default 16px base size.

The body value also seeds a Typographic Hierarchy: a full heading scale, from Display through H1 to H6, plus body, caption, and micro sizes, reported in px, em, and rem with a suggested line-height for each. Eight modular scale ratios control how much each heading level jumps in size, from subtle Minor Second (1.067) up to dramatic Golden Ratio (1.618), with Minor Third, Major Third, and Perfect Fourth among the ratios in between. A complementary Spacing Scale, tokens named 4xs through 4xl, applies the same body-size relationship to margins, padding, and gap values so spacing stays proportional to the typography.

At the default 16px base font size, 14px converts to 0.875em (14 / 16), and 24px converts to 1.5em (24 / 16). Those two values match a common pairing of 14px body text with 24px headings.

Pixel to em conversion is essential for building responsive, accessible web interfaces. Em units scale relative to the parent font size, making them the basis for fluid typography and layout systems. Designers and developers benefit from confident work with relative CSS units alongside complementary type and spacing scales.

• Web Development: A design mockup specifying 14px body text and 24px headings converts to 0.875em and 1.5em respectively for a stylesheet with a 16px root font size (14/16 and 24/16).
• Responsive Design: Em-based media query breakpoints come from pixel values: 768px and 1024px viewport widths convert to em for CSS media queries that respect user font size preferences.
• Accessibility: Text that scales properly for users who increase their browser default font size depends on relative units; fixed pixel sizes converted to em support that scaling across an entire interface.
• Design Systems: A full typography scale follows from a body size and a modular ratio: the Typographic Hierarchy table gives Display, H1 through H6, body, caption, and micro sizes in px, em, and rem as ready-made design tokens.
• Type Scale Selection: Different modular ratios, Minor Third, Major Third, Perfect Fourth, and Golden Ratio among them, feel different in practice: each produces its own H1 through H6 sizes from the same body text choice, from subtle for editorial sites to dramatic for marketing pages.
• Spacing Systems: A harmonious spacing scale derives from the same body size that drives the type scale; the 4xs through 4xl tokens apply to margins, padding, and gap values so every layout decision stays proportional to the typography.
• Email Development: Pixel-based email designs translated into em units render more consistently across email clients that override base font sizes.
• Education: How relative CSS units work becomes concrete by comparing different base font sizes and watching how the em value changes; a step-by-step formula display shows the math behind each conversion.
• Legacy Code Migration: Older stylesheets using fixed pixel values refactor into modern em-based layouts one pixel value at a time, each converting to its em replacement for a given base size.