Why em?

This is a translation of the note by Chris Koyer. 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 discussed in detail in this article.
')

Change font sizes on different screens

This is the main problem of “pixel” sizes. For example, in the CSS-style site font-size of different elements of typography set 50 times in pixels. In this case, using media queries for scaling, you will have to configure each of these 50 font-sizes . However, if you specify dimensions in em , then you will 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. For more information about the difference, see the CSS article is is Angular Measurement .

Relative indents

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

Connections

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

A spoon of tar

Nevertheless, em has several unpleasant flaws, for example, “cascade”: if you set the elements of a regular list (li) font-size: 1.1em , then the child (nested) elements will summarize this value. You can solve the problem by using li li {font-size: 1em; } however it is very dreary. Here you can help the appointment of font sizes in rem , but not all browsers support this method (IE 9+).