Why em?

Original author: Chris Coyier
  • Transfer
This is a translation of Chris Coyer's note Why Ems? at css-tricks.com.

I used px for a long time  to set the font-size, which is why the font size could not change in Internet Explorer 6-8. Switching to  em  has several advantages, and they are considered in detail in this article.

Resize fonts on different screens

This is the main problem of "pixel" sizes. For example, in the CSS styles of a site,  font-size of  different typography elements is set 50 times in pixels. In this case, using media queries to scale, you will have to configure each of these 50 font-size . However, if you set the dimensions in em , then you need to make changes only in the body tag and the property will be inherited:

body {
  font-size: x-large;
@media (max-width: 1000px) {
  body { font-size: large; }
@media (max-width: 500px) {
  body { font-size: medium; }

Different pixels

The px value is not the same as the physical pixel of the screen. Read more about the difference in the CSS px is an Angular Measurement article  .

Relative padding

Suppose that you need to use icon pictures in the text headers of the site, which must have certain indents for the correct display. You cannot use constructs like  padding-left: 20px because these 20 pixels are constant and will not change according to the font size. And if you specify the indentation in em , then they will become relative.


In general, if all CSS sizes are set in em - font-size, margin, padding, then there will be more flexible connections between design and typography - it will become much easier to make changes without affecting the appearance.

A spoon of tar

Nevertheless, em has some unpleasant drawbacks, for example, “cascading”: if you set the usual list elements to (li)  font-size: 1.1em , then the child (nested) elements will sum this value. You can solve the problem by using  li li {font-size: 1em; } , however it is very dreary. Assigning font sizes to rem can help here , but not all browsers support this method (IE 9+).

Also popular now: