Pixels to EM Converter
Convert pixels to em units.
Web designers use em relative to the default font size (usually 16 px).
How the Math Works
The Pixels to EM Converter uses the fundamental relationship between absolute and relative CSS units: em = px ÷ base font size. An em is a relative unit equal to the computed font size of its ancestor element, while pixels are absolute units. When you divide pixels by the base font size (typically 16px in most browsers), you convert the fixed pixel value into a scalable relative unit. For example, 32px divided by 16px base font size equals 2em, meaning the element will be twice the width of the parent's font size.
Practical Applications
To use this calculator effectively in your web projects, first determine your CSS base font size, then input the pixel value you want to convert. If you're working with a 14px base font size and need to set a margin of 28px, dividing 28 by 14 gives you 2em. This conversion ensures your design scales properly across different devices and user settings. You can apply this when setting padding, margins, font sizes, or any spacing property that benefits from relative units rather than fixed pixels.
Day-to-Day Use
Understanding this conversion empowers you to create more accessible and responsive websites that adapt to user preferences. When users increase their browser's default font size for readability, your em-based measurements automatically scale with it, while pixel-based designs remain rigid and potentially break the layout. This means your website becomes more user-friendly for people with visual impairments or those using devices with different screen densities. Beyond web development, the concept of converting between absolute and relative units applies to other design fields where scalability and adaptability matter.
Worked example
16 px, base 16 → 1 em.
FAQ
rem?
rem is relative to the root element; em is relative to the parent.