Зачем использовать em в css

Долгое время я задавал размер шрифта (font-size) лишь в пикселях. Сейчас я полностью переключился на em. Мое сознание поменялось. Почему? Я наконец нашел весьма убедительные причины, которые я постараюсь изложить чуть ниже.

Вам не потребуется менять размер шрифта под разные размеры экрана

Один и тот же размер шрифта выглядит не одинаково хорошо на мобильных устройствах и больших мониторах. Текст должен быть немного больше на больших экранах. Скажем, вы изучаете свой файл стилей и находите 50 различных объявлений с font-size в пикселях.
Но предположим, вы поменяли все пиксели на em.
Теперь посредством медиа-запросов вам потребуется изменить размер шрифта лишь у одного тега body, чтобы откорректировать все 50 объявлений в документе (каскадность в действии).

CSS

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

Все относительно

Писксели (px) в CSS имеет мало общего с физическим пикселем на вашем экране.

Относительное пространство (отступы или padding)

Предположим, в своем дизайне вы используете небольшие изображения (иконки). Вы хотите поместить иконки в заголовки. Вы хотите, чтобы размер иконок был соизмерим с размером заголовков. Вы не можете назначить заголовку объявление padding-left: 20px, так как левый отступ всегда будет равен 20px в независимости от размера заголовка. Но если вы назначите заголовку левый отступ в em, то вы сможете регулировать отступ относительно размера шрифта заголовка.

Отношения

Если вы везде используете em, то вы можете использовать em и при регулировке отступов (padding) и полей (margin) для всего документа. Это значит что, если вы уменьшите шрифт у тега body, пространство вокруг сайта также уменьшится. Этим вы свяжете дизайн вашего сайта с типографикой, что в некотором роде облегчает общую настройку внешнего вида сайта.

Незначительные нюансы

Есть несколько неприятных моментов у em, связанные с каскадностью. Если вы для элемента списка назначите объявление font-size: 1.1em и затем создадите вложенный список, то у вложенного и последующих вложенных элементов списка будет расти размер шрифта. Вы можете исправить это, назначив li li { font-size: 1em; }, но такими правилами можно сломать голову. Вот где на помощь может придти rem, но это проблематично, так как поддержка реализована в браузерах начиная IE9+.

Для общего развития:

why-ems