November 9, 2012 at 01:25Why em?
- 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.
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:
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 .
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.
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+).
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.
Communications
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+).