EM to PX Converter: Convert Font Units Instantly

The convert of px to em works like this, as one promises, it is a real tool, that switches between pixels and em-values, two units, that you will use often while you write CSS-code. It counts quickly and cares about the math, so you do not need to. Whether you use Windows, Mac or Linux.

That does not matter. Chrome, Firefox, Edge Safari. Everything works well.

Easy way to convert px and em

The program simply works in your browser.

Here the key point about convert between em and px: you need to know what is your basic font size. In web design this base usually sits on the html- or body element. The most many browsers come with default value of 16 px, although users can change that in their settings, or you can set it with your CSS.

Convert pixels to em-units comes down to one easy step. One first finds out how much one em really means. Normally 16 px.

Later one divides the pixel value by that number. So, if you have 32 px and one em maches 16 px, result 2 em. The reverse math is also easy.

Want to go of em to pixels? Multiply the em-value by your base. Two em with 16 px base?

It makes 32 px.

Various tools offer different features. Some allow to switch between four main CSS-units for font size: px, em, pt and percentages. Others add a custom parent font size, quick links for fast searches and live calculators.

Some even make a whole convert table, when you enter your body font size in pixels.

Start to use such tools is really easy. Type your px-value, press enter or click button, and their it is, your em-number. Many tools work in both directions.

Put em-value in one box and watch, as the matching pixel value appears in the other, without any button click.

But here where it gets interesting: pixels and em-units are not really same kind of unit. Convert between them not always is simple. Consider a case, where your main title is set to 200-percent font size.

With default 16 px that means, that one em could be 32 px for that title.

Em-units are relative to any parent element, in which they are nested. In complex design with nested em-units everything soon becomes hard, each em counts based on the font size of its own parent. The most many developers fix that, setting basic font size on the html- or body element, so each em-calculation has firm base.

Em-units work well for flexibility, but in practice you often mix px and em together, to get the wanted control. What method best works? Use px for elements, that never should change size.

Borders, shadows, such things. Use em, when you want, that something grows with its parent. And use rem forconsistent design, where everything adapts to the root font size.