Почему em?

Это перевод заметки Криса Койера Why Ems? ^[1] на css-tricks.com.

Я долгое время применял px для установки font-size, из-за чего размер шрифта не мог меняться в Internet Explorer 6-8. Переход на em имеет ряд преимуществ, и в этой статье они детально рассмотрены.

Изменение размеров шрифтов на разных экранах

Это основная проблема «пиксельных» размеров. К примеру, в CSS-стилях сайта font-size разных элементов типографики задан 50 раз  в пикселях. В этом случае, используя media queries для масштабирования, придется настраивать каждый из этих 50 font-size. Однако если задавать размеры в em, то потребуется внести изменения только в теге body и свойство будет наследоваться:

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

Разные пиксели

Значение px — это не то же самое, что физический пиксель экрана. Подробнее о разнице написано в статье CSS px is an Angular Measurement ^[2].

Относительные отступы

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

Связи

Вообще, если все размеры в CSS задавать в em — font-size, margin, padding, то между дизайном и типографикой будут более гибкие связи — станет гораздо проще вносить правки без ущерба внешнему виду.

Ложка дегтя

Все же у em есть несколько неприятных недостатков, например «каскадность»: если задать элементам обычного списка (li) font-size: 1.1em, то дочерние (вложенные) элементы будут суммировать это значение. Решить проблему можно применением li li { font-size: 1em; }, однако это очень муторно. Тут может помочь назначение размеров шрифта в rem ^[3], однако не все браузеры поддерживают этот способ (IE 9+).

Автор: grokru

Источник ^[4]