Почему em?

http://css-tricks.com/why-ems/
  • Перевод
Это перевод заметки Криса Койера Why Ems? на 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.

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


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

Связи


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

Ложка дегтя


Все же у em есть несколько неприятных недостатков, например «каскадность»: если задать элементам обычного списка (li) font-size: 1.1em, то дочерние (вложенные) элементы будут суммировать это значение. Решить проблему можно применением li li { font-size: 1em; }, однако это очень муторно. Тут может помочь назначение размеров шрифта в rem, однако не все браузеры поддерживают этот способ (IE 9+).
Поделиться публикацией
Комментарии 82
    0
    Тоже об этом задумываюсь, никак руки не дойдут поменять. При наличии огромного количества мобильных устройств с самыми разными разрешениями и плотностью пикселей это весьма актуально
      +2
      Мобильные устройства и пиксели прожуют и отмаштабируют, проблему с этим у ие 6-8
        +1
        А ещё покажут шрифт в размере 140%.
        • НЛО прилетело и опубликовало эту надпись здесь
            0
            Ага. Поднимите руку, кто его использовал.
              0
              А в чем проблема?
                0
                Мобильники увеличивают размер шрифта.
                +1
                Я. А что?
        +1
        Кто-то еще не использует em?
          0
          Человек ниже бросил ссылку на пост, которому четыре года. Уже тогда всем рекомендовали переходить на em/проценты.

          Сейчас есть такие вещи как fullhd и retina, html5 шагает по планете, а люди еще задают кегль в пикселях?
            +27
            А что плохого в том, что кто-то задаеет размер в пикселях для ретины? Пиксель CSS != пиксель экрана.
            +17
            хабрахабр?
              –11
              Хабр — проект старый. Возможно, не хотят переписывать (я не знаю, может причина и другая). Я говорил о новых проектах, которые делают с нуля.
                +22
                ну twitter bootstrap 2 тоже старый, по вашему, я так понимаю
                  –1
                  Логично. Вообще, странно. Техника старая, давно доказаны ее плюсы, а вебмастера используют пиксели.
                    0
                    Кодеры старой школы
              +7
              Забавно что сам сайт css-tricks.com сверстан с помощью px, хотя релиз последнего дизайна был в сентябре.

              Есть ли хорошие примеры сайтов с более-менее сложным дизайном, где отступы и шрифты заданы в em? Было бы любопытно посмотреть.
                –3
                the-pastry-box-project.net (первое, что пришло в голову).

                Вообще, мы используем отступы в em'ах, более того, размеры блоков, картинок и т.д. тоже в процентах/em'ах.
                  +4
                  Я не зря указал «более-менее сложным дизайном»: когда это пара колонок текста «выражаться» в em-ах достаточно просто.

                  А когда дизайн, где мы не можем масштабировать графику? Или интерфейс? Может быть, проект уровня zvooq.ru?
                  Или хотя бы проект с кастомными контролами, нестандартными тенями / градиентами вот этим всем, без чего современный сайт уже не может существовать?
                    +1
                    Сбегал на mediaqueri.es/popular/ за www.regent-college.edu/

                    Кстати, мне стало интересно, почему ничего сразу не пришло на ум. В большие проекты боятся внедрять необкатанные приемы? Хотя в то же время у меня уже давно сложилось представление об RWD как о стандарте де-факто в индустрии.
                      +1
                      Да, и mediaqueri.es — отличный шоукейс.
                • НЛО прилетело и опубликовало эту надпись здесь
                    –1
                    С em можно масштабировать элементы, не переписывая стили целиком. Я не о зуме.
                    • НЛО прилетело и опубликовало эту надпись здесь
                        0
                        Не, вы не правы. Они не заменяют друг друга, а дополняют.
                        • НЛО прилетело и опубликовало эту надпись здесь
                            0
                            Пожалуй, в течение недели напишу статью, и приведу, как пример, один из наших проектов. Там адаптивная сетка, почти все в em'ах (даже размеры блоков). И ничего, живем. IE 8 не поддерживаем принципиально, да. Других проблем нет. :)
                    0
                    Я!
                      0
                      Фейсбук например)
                      0
                      Давненько был интересный пост на эту тему: habrahabr.ru/post/42151/
                        +30
                        Если технология что-то упрощает — она приживается быстро.

                        C em я такого не наблюдаю. Сколько про них не пишут.

                          +5
                          Меня зачастую останавливает от использования em проблематичность сброса font-size: 0; для родителя inline-block элементов.
                          Я знаю, что есть альтернативы, но как-то привык к такому шаблону.
                            0
                            Плохая практика: задан минимальный размер шрифта (например в Опере) и всё, ломается.
                              0
                              Есть такое. А как лучше?
                                0
                                word-spacing:-.25em (значение в разных шрифтах может менятся) и специально для вебкита letter-spacing:-.25em?
                                  0
                                  (значение в разных шрифтах может менятся)

                                  Вот это меня как раз и смущало.
                                    0
                                    Если стандартные, то можно не парится. Заметно больше очко у Верданы и, разумеется, моноширинных шрифтов. Если сильно волнует, можно задать побольше (по модулю): нынешние браузеры не дают наложится инлайн-блокам, но я бы на всякий случай не стал.
                                    0
                                    Это при создании шрифта ширина пробела задается?
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                        +1
                                        Да, конечно. Обычно он равен 0,25 (одной четвёртой) кегля, но в Вердане, например, примерно 0,34 — это крупный шрифт. В моноширинных же шрифтах все символы должны быть одной ширины, в том числе пробел.
                                        • НЛО прилетело и опубликовало эту надпись здесь
                                            0
                                            Да ну, на Ариале те же 0,25, никогда проблем не было.
                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                0
                                                И правда.
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                          0
                                          Да чего-то не спешат с исправлением, с июля ничего не слышно. Впрочем там всё нормально по идее должно быть.
                                          • НЛО прилетело и опубликовало эту надпись здесь
                                              0
                                              Для того и letter-spacing, что он не применяет word-spacing для инлайн-блоков. А букв там нет, внутри же надо сбрасывать само собой.
                                              • НЛО прилетело и опубликовало эту надпись здесь
                                            0
                                            Использую такой шрифт давно и жутко доволен (вроде по вашей же наводке). А без пробелов по ширине не получится выровнять ведь.
                                            • НЛО прилетело и опубликовало эту надпись здесь
                                    0
                                    em не может упростить верстку фиксированного PSD-макета. Но если макет изначально проектируется независимым от пикселей — необходимость использования пикселей исчезает.

                                    Подход с фиксированным макетом пока еще не вымер и повсеместно применяется, отсюда и отсутствие популярности (востребованности) относительных величин при верстке.
                                      0
                                      Но сама по себе техника проста как два пальца. Мантра звучит так: target ÷ context = result
                                    +5
                                    Обращал внимание, что шаг, к примеру, 9px, 11px, 13px, 15px значительно лучше влияет на четкость (да и красивость) текста с Clear Type у некоторых шрифтов.
                                      –1
                                      Непонятно, в чём проблема, изложенная в последнем абзаце. Почему не задать размер шрифта у ul вместо li?
                                        +1
                                        ul в ul тоже вкладывается.

                                        Но можно конечно изловчиться указывая прямого наследника ">" но это и для li сработает
                                          0
                                          ul в ul, положим, не вкладывается, но я понимаю, что Вы имеете в виду. В любом случае, проблема в топике кажется либо раздутой, либо недоразъяснённой.
                                            0
                                            <ul>
                                                <li>li_1</li>
                                                <li>li_2
                                                    <ul>
                                                        <li>li_2_1</li>
                                                        <li>li_2_2</li>
                                                    </ul>
                                                </li>
                                                <li>li_3</li>
                                            </ul>
                                            
                                            <style>
                                                ul { font-size:2em; }
                                            </style>
                                            


                                            В топике говорится про то, что li_2_1 и li_2_2 будут иметь font-size 4em.

                                            Решается заданием font-size для родителя ul. А размер вложенных списков можно задавать через селектор ">". Так что да, это, конечно, это не проблема и не ложка дёгтя. Такое поведение свойственно не только em, а всем относительным размерам. И сложности может вызывать только у начинающих.
                                        –1
                                        А как же макет, по которому размер шрифта «вот здесь» должен быть 12px?
                                          0
                                          font-size: 62.5%; для html? Вы это имеете ввиду?
                                            –1
                                            Я про требования дизайнера, чтобы шрифт в какой-либо строке был именно такого размера.
                                            Так по многим пунктам, шрифт лишь один из примеров.
                                            0
                                            Пересчитать в em
                                              0
                                              body {
                                              font-size: 12px;
                                              }
                                              .vot-zdes {
                                              font-size: 1em;
                                              }
                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                  0
                                                  согласен) надо юзать rem'ы :)
                                              +1
                                              > В этом случае, используя media queries для масштабирования, придется настраивать каждый из этих 50 font-size

                                              Хорошо что уже давно есть LESS/SASS
                                                +1
                                                На стороне клиента пересобирать css? Не совсем понял как это поможет.
                                                  +1
                                                  Вы правы, не тот случай. Погорячился.
                                                    0
                                                    Зачем на стороне клиента? LESS существует и на бэкнде. Заводите переменную fontSize и все размеры указываете от него ( fontSize / 2 и т.д.)
                                                      0
                                                      Так тут весь смысл в том, что б при изменениях размера экрана (ресайзе) менять параметры в css. Зачем тут серверная сторона?
                                                        0
                                                        Так ведь и я говорю ) Прошу прощения за возможный неверный синтаксис.

                                                        @fontSize = 14;
                                                        
                                                        body {
                                                        font-size: @fontSize; }
                                                        
                                                        @media (max-width: 600px) {
                                                        body {
                                                        font-size: @fontSize / 2;
                                                        }
                                                        }
                                                        


                                                        Это LESS-файл ) Все те же плюшки, что и с em, но с пикселями )
                                                          0
                                                          И все равно в 50 местах придется написать @fontSize / 2. Почти тоже самое что 50 раз написать font-size: 14px; (мы не говорим сейчас о пользе препроцессоров).

                                                          Другое дело если бы можно было написать один раз
                                                          @media (max-width: 600px) {
                                                              @fontSize = 7;
                                                          }
                                                          
                                                            0
                                                            Так ведь и в em вам нужно будет писать font-size: .5em, в чем разница-то )

                                                            Все, я понял свою ошибку, приношу извинения )
                                                  +3
                                                  Вот из-за последней ложки дегктя, относительные единицы измерения очень трудно использовать на больших проектах и это перекрывает все их достоинства. Большим поклонником em-ов был Яндекс, но и они постепенно переходят на px, например, тут: habrahabr.ru/company/yandex/blog/149327/:
                                                  Практически на всех наших сервисах сейчас используется указание размеров в относительных процентах или тегах em, но в новом проекте мы решили отказаться от них в пользу пикселей. Аргументов у этого решения несколько. Во-первых, доля браузеров, которые не умеют масштабировать шрифты в пикселях, исчезающе мала. Во-вторых, размеры в абсолютных единицах исключают влияние контекста, а вёрстка абсолютно независимыми блоками — один из основных принципов БЭМ-методологии. Ну и в-третьих, страница результатов поиска должна нормально работать на тач-устройствах. Разрешение экрана на них часто заранее известно и строго фиксировано, а меняться может только его ориентация.

                                                  Относительные единицы измерения создают сильную связанность между блоками, а от сильной связанности, как известно, лучше избавляться.
                                                    +2
                                                    Мне почему-то казалось, что em — идеальная единица для определения ширины в первую очередь. Чем не угодил pt, не понимаю.
                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                        0
                                                        Но ведь он даёт то, чего хочет автор — отрыв от физических пикселей и учёт только угловых пунктов. Но измерять высоту шрифта в ширине буквы М — это как-то очень странно. Это понятно, когда вы хотите ограничить ширину текстового блока визуально легко воспринимаемым, и ставите ширину что-то вроде 40em (например). Там вне зависимости от размера шрифта блок будет восприниматься комфортно. Но тут-то?

                                                        Каскадность, как единственное отличие em от pt автору не нужно и мешает. Я вообще не понимаю, зачем ему em.
                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                            0
                                                            Ваш комментарий ценнее самой статьи :)
                                                      +4
                                                      Каскадность em вызывает больше проблем, чем решает их. Для мелких страниц оок, для больших и сложных — нет. Поэтому есть rem, а про em-ы надо знать и использовать только там, где каскадность действительно нужна. А статье из каменного века а-ля «ура! емы! всем юзать!» уже давно устарели.
                                                        0
                                                        А чем плохо использовать pt для установки размера шрифта?
                                                        • НЛО прилетело и опубликовало эту надпись здесь

                                                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                        Самое читаемое