Долгое время я задавал размер шрифта (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; }
}
Цитата
Каскадность
Тег использует не только те объявления, которые назначены непосредственно для него, но и собирает каскад стилей от вышестоящих родителей. Это и есть каскадность в CSS.
Все относительно
Писксели (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+.
Для общего развития:
Цитата
Плотность экрана - количество физических пикселей дисплей.
Цитата
CSS-пиксели - абстрактная величина, используется браузерами для отображения контента вне зависимости от типа экрана.