Px to Em Calculator

Created by Bogna Szyk
Reviewed by Jack Bowater
Last updated: Dec 02, 2020

CSS has four different units that can be used to denote the size of fonts (and other elements such as margins). The application and relationships between these units can be very confusing, so this article will help you understand the main differences between the units, while our px to em calculator will help you switch between them in no time. If you ever wondered how to convert em to px, or pt to px, or couldn't grasp what the CSS em unit actually means - keep reading to find out!

Px, em, pt and %

  • Pixels (px) are fixed-size units that correspond to the resolution of the screen - one pixel is the smallest "dot" that can be accurately displayed on the screen. Choosing this unit will result in a perfectly sharp and visible font on the screen, regardless what kind of display you will use. The only drawback is that fonts expressed in this units cannot scale (but it is possible to use the zoom feature of web browsers to enlarge the text).
  • Ems (em) are scalable units, used in digital media. One em corresponds to the height of the current font; for example, if the font used has a height of 12 pt, then 1 em = 12 pt. Ems are a popular unit because they are easy to understand, can be scaled if desired, and are mobile-device friendly. The main drawback of ems is the threat of cascading - because this unit is relative, changing the height of the "parent" text immediately resizes all other fonts.
  • Points (pt) are a unit for print CSS only. One point is equal to 1/72 inch, but only after printing. 1 pt will look differently across devices or web browsers, as it will depend on screen resolution. Points are not scalable and should be avoided in digital media.
  • Percentage (%) is very similar to the em unit. The main difference is that 1 em = 100%. This unit is perfectly scalable, allows for zooming in and out. Similarly to ems, they can cause cascading.

Conversion

Follow these simple steps to convert between CSS units quickly and effortlessly:

  1. Set a base value. By default, this is 16 px.
  2. Determine the size of your font in any of the units.
  3. The px to em calculator will find its equivalent in other units, according to these rules:
  • 1 point is equal to 0.75 pixel;
  • 1 em is equal to the size in pixels divided by the base value;
  • 1 em is equal to 100%.

Example: Converting pt to px, em and %

Let's assume that you want to convert 24 pt to px, assuming the base size of 16 px. You can find it in the following way:

  1. If 1 pt = 0.75 px, then 1 px = 1.33 pt. Hence, 24 pt is equivalent to 1.33 * 24 = 32 px.
  2. When finding the equivalent in ems, we need to divide the size in pixels by the base size: 32 px / 16 px = 2 em.
  3. As 1 em = 100%, 2 em = 200%.

Make sure to check out our aspect ratio calculator and ppi calculator as well!

Bogna Szyk
Base size
px
Object's size
px
Is the same as
em
Is the same as
pt
Is the same as
%
Check out 138 similar conversion calculators
AcreageAcres to hectares converterAcres to square feet converter… 135 more
People also viewed…

Billion to trillion converter

We designed this billion to trillion converter to help you to convert numbers from billions to trillions quickly and easily.

Black Friday

How to get best deals on Black Friday? The struggle is real, let us help you with this Black Friday calculator!

Katha to square feet converter

This katha to square feet converter allows you to quickly switch between these two units, taking into account various definitions of katha in different regions.

Plant spacing

Planning out your garden? Try the plant spacing calculator.
Omni Calculator
Copyright by Omni Calculator sp. z o.o.
Privacy policy & cookies
main background