Веб-разработчик, облачные технологии
25,7
рейтинг
13 октября 2008 в 07:14

Разработка → CSS Font-Size: em vs. px vs. pt vs. percent перевод

Одним из наиболее запутанных аспектов CSS является применение font-size атрибута для масштабирования текста. Используя CSS, вы можете изменить размер текста в браузере с помощью четырех разных единиц измерения. Какая из этих четырех единиц лучше всего подходит для веб? Это вопрос, который породил разнообразные дискуссии и критику. Поиск окончательного ответа затруднен, поскольку вопрос сам по себе сложный.

Знакомьтесь — единицы


1. «Ems» (em): «em» — это масштабируемая единица, которая используется в веб-документах. «em» равна текущему font-size, например, если font-size в документе 12pt, 1em равен 12pt. «em» масштабируема по своей природе, так 2em будет равен 24pt, 0.5em будет равна 6pt и т.д. Использование «em» становятся все более популярным в веб-документах из-за масштабируемости и возможности с пользой применять в мобильных устройствах.
2. Pixels (px): «px» имеют фиксированный размер единиц, которые используются на экранах (например, для чтения на экране компьютера). Один пиксель равен одной точки на экране компьютера (самый малый элемент разрешения вашего экрана). Многие веб-дизайнеры используют px в веб-документах в целях получения пиксель-идеального(pixel-perfect) представления своего сайта, отображаемого в браузере. Одна из проблем, с использованием px заключается в том, что эти единицы не позволяют изменять масштаб для слабовидящих читателей или мобильных устройств.
3. Points (pt): «pt», традиционно используются в печатных СМИ (все, что должно быть напечатано на бумаге, и т.д.). Один «pt» равен 1 / 72 дюйма. «pt», так же, как и «px», имеют фиксированный размер единицы и не могут масштабироваться.
4. Percents (%): Единицы измерения в % похожи на «em», за исключением нескольких принципиальных различий. Во-первых, текущий font-size равен 100% (т.е. 12pt = 100%). При использовании "%", ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя (accessibility).

Итак, в чем же разница?


Легко будет понять разницу между единицами font-size, когда вы увидите их в действии. Как правило, 1em = 12pt = 16px = 100%. При использовании этих размеров шрифта, давайте посмотрим, что происходит, когда вы увеличиваете базовый размер шрифта (с использованием CSS селектора body) от 100% до 120%.


Изменение Font-size от 100% до 120%.

Как вы можете видеть, «em» и "%" увеличили размер шрифта, в то время как «px» и «pt» этого не сделали. Установка абсолютного размера для вашего текста может быть простым делом, но гораздо лучше для ваших посетителей использовать масштабируемый текст, который может быть отображен на любом устройстве или любой машине. По этой причине, единицы «em» и "%" предпочтительнее в использовании для текста веб-документа.

«em» vs "%"


Мы выяснили что единицы «px» и «pt», не лучшим образом подходят для веб-документов, что заставляет нас использовать «em» и "%". В теории, единицы «em» и "%" являются идентичными, но на практике они имеют незначительные различия, которые важно учитывать.

В приведенном выше примере мы использовали в качестве базовой единицы font-size проценты (в тэге body). Если вы измените вашу базовую единицу font-size c "%" на «em» (то есть body {font-size: 1em;}), вы, должны бы не заметить разницы. Давайте посмотрим, что происходит, когда «1em» является нашей базовой единицей, и когда клиент меняет «Размер шрифта» в настройках своего браузера (такая возможность предусмотрена в во многих браузерах, например, Internet Explorer).


Размер шрифта, когда клиент изменяет размер текста в браузере.

Когда в браузере клиента размер текста установлен в «средней», то незаметно никакой разницы между «em» и "%". Однако, если параметр изменять, разница становится очень большой. При установке «Smallest» «em» гораздо меньше, чем "%", а при установке «Largest» наоборот «em» отображается гораздо большим, чем "%". И хотя многие утверждают, что единицы в «em» масштабируются так, как задумано, на практике текст в «em» масштабируется слишком резко, и при этом наименьший текст становится неразборчивым на некоторых машинах.

Вердикт


В теории, единицы «em» — это новый и предстоящий стандарт размера шрифта в Интернете, но на практике, единицы в "%" позволяют отображать текст для пользователей более последовательно и удобно. При смене параметров клиента, текст в "%" изменялся в разумных пропорциях, что позволяет дизайнерам сохранить читабельность, доступность, и дизайн.

Победитель: процент (%).
Перевод: Kyle Schaeffer
Владимир @XaocCPS
карма
776,6
рейтинг 25,7
Веб-разработчик, облачные технологии
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (136)

  • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      ребята, почитайте другие камменты этого тролля, это нечто
      похоже, виртуал чей-то :)
      • +5
        Мне кажется, что когда каммент набирает >= -20, юзера можно автоматом банить дней на 7 от написания камментов. Иначе какой смысл, -5 или -505, он всё равно продолжает гадить.
        • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          -20 — недобор. я бы банил на время комментаторов с -30 и более.
  • 0
    почему не учлись сложности при верстке хотя бы среднего макета?
    • –3
      это перевод, все вопросы к автору
      • +1
        Если вы переводите и размещаете на Хабре статьи, значит вы согласны с автором и сможете обосновать его точку зрения.
        • 0
          и поэтому я могу ответить почему автор что-то такое не учел в своей статье, что показалось одному из хабрапользователей на Хабре?
          • +3
            Так скажите, что автор этого не учел. Зачем отправлять к автору? Те кто читает перевод будет с иностранным автором говорить? Кто с ним будет говорить — тот прочитает оригинал. Вам не кажется?
            • –1
              я не могу судить учел что-то автор или нет
              я предложил перевод, не нравится — можно пройти мимо
    • 0
      Какие, например?
  • 0
    Очень полезная статья. Я только одного не понял, если по дефолту стоит 100% размер шрифта, то как это выглядит на практике? То есть, если я пишу 16px — то ясно что размер будет 16 пикселей, а если 100% — то это 100 процентов от чего? Поясните пожалуйста.
    • 0
      при 100% скорее всего будет 16px
    • +4
      от стиля по умолчанию в браузере, полагаю
    • +1
      «а если 100% — то это 100 процентов от...»

      … значения, указанного в настройках браузера.
    • 0
      если вы прописываете в body 100% то это будет сто процентов от настроек браузера, каждый пользователь может изменить это значение для конкретно своего браузера? как правило это 16px

      все последующие указания размера шрифта будут браться от значения body
    • +1
      Такой подход используется в Yahoo CSS framework
      Для body размер шрифта задаётся в PX, а для всех остальных элементов в % от базового размера, заданного в боди
      • +1
        Шрифт в експлорере 6 не меняется?
    • 0
      Умолчальные значения кегля шрифта у различных браузеров неодинаковы.
      • 0
        насколько я знаю, у тех, что анимают более 1% рынка — у всех — 16.
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            Эта разница была связана с особенностями рендеринга графического интерфейса в разных ОС.
        • 0
          Вы правы, у современных (после 2003 года) распространённых браузеров — 16. Первые публичные релизы Сафари имели умолчальный кегль в 14 пикселов.
  • –10
    В избранное.
    • +9
      это можно спокойно сделать и не комментируя, не засоряйте ленту :)

      XaocCPS, спасибо, внесли каплю ясности в мое понимание едениц измерения для верстки.
      Только вот не сильно хочется доверять браузеру выбирать «свой» размер базового шрифта.
      Да и тенденция сейчас такова, что браузеры при увеличении не высчитывают пиксели, а делают увеличение как через реальную лупу, это непременно произойдет и на мобильных браузерах, имхо, ждать не долго. Скоро над этим пониманием вообще никто задумываться не будет :)
      • +1
        ну ждите, я не против :)
        многие до сих пор поддерживают ie6, а вы чего-то нового ждете :)
        про ie8 и его масштабирование я чуть ниже отписал, не учитывать этот факт, имхо, нельзя
      • –4
        Зато хабраюзер, увидев мой комментарий, поймёт, что статья хорошая. =)
        • +3
          Хабраюзер поймёт что статья хорошая прочитав эту статью. А Вы начинаете чтение статей с комментариев? :)
      • 0
        Скоро или не скоро, над юзабилити надо думать сейчас прямо. Нет смысла делать сайт, который будет юзабелен тогда, когда все браузеры будут использовать лупу.
        • +1
          Ну и нельзя сказать, что за em-ами будущее…
          • +1
            За ними уже настоящее. Проценты и em — это все можно комбинировать как угодно, и не только для указания размеров шрифтов. В этом-то и есть вся прелесть em.
            • 0
              Вот именно. Я такой подход (em и %), использую уже 3 года, как и многие другие люди. Kyle Schaeffer как-то поздно опомнился, сдается мне.
  • 0
    Все современные браузеры умеют увеличивать шаблоны в пикселях, без каких-либо заморочек с емами и процентами. Так зачем усложнять себе жизнь и говорить, что «В теории, единицы «em» — это новый и предстоящий стандарт размера шрифта в Интернете»?
    • 0
      ie8 к примеру до сих пор при масштабировании текста поступает так как описано в статье и только функция Zoom у него работает на весь контент, что собственно и не удивительно.

      а за мобильные браузеры тоже поручитесь?
      • 0
        Никто не ставит емы только на текст, чтобы не поехала вёрстка емы так же ставятся на все размеры блоков, следовательно делают тот же зум, только через емы. Разница между один и тем же шаблоном в px и в em, к примеру в IE7, вообще не заметна при масштабировании. IE8 вообще недоделка и воспринимать её серьёзно пока ещё рано.
        На счёт мобильных браузеров, под них вообще отдельно верстать надо и я на их счёт вообще ничего не говорил.
    • +1
      Я бы предпочел, что бы браузеры не изменяли размер шрифта указанный в px и pt.
      Я бы сам хотел решать, масштабировать этот текст или нет. Эксплорер это позволяет, а ФФ2 масштабирует не зависимо от моего желания.

      • –1
        Ну и сидите на IE6. Кто Вам мешает? :)
      • +4
        Ты наверное сам никогда не пользовался функцией масштабирования по ее прямому назначению.
      • 0
        как раз наоборот, недостаток в том, что картинки бекграундов в px и при верстке в em(при свободном увеличении) сайт смотрится гармонично(как его рисовали в PS) ±4 px, дальше хуже, а при зуме все остается без каких-либо отклонений.
        • 0
          Вот поэтому я и хочу, что бы если указано в px или pt текст соответствовал бэкграунду. В IE это работает, в FF2 — нет.
          Про зум из оперы я ничего плохого не говорил.
        • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        К примеру, в ФФ3, в выпадающем меню Вид -> Масштаб уже есть галочка «Только текст». Что позволяет увеличивать его отдельно от дизайна.
        • 0
          Хотя, после проверки я выяснил, что он игнорирует указание размера в px…
    • 0
      затем, что статистика пользователей говорит нечто очень печальное о количнстве IE6, к сожалению.
  • +1
    Полезно. Но тока что проверил, Опера увеличила страничку вместе со шрифтами (шрифты заданы px).
    Оно того стоит?
    • +1
      Стоит.
      К сожалению, не все браузеры имеют правильно реализованное масштабирование страниц (взять, к примеру, IE6, которым, тоже к сожалению, пользуется немалый процент пользователей).
      А правильное мастшабирование страниц — одно из требований кроссбраузерного кода.

      Сам лично пользуюсь em-ами.
      • 0
        Хорошо, а есть ли смысл поддерживать пользователей IE6? Ведь уже давно появилась седьмая и даже бета восьмой версии. В таком случае у нас получается застой прогресса, а пользователи могут еще долго сидеть на шестой версии. Им же создают для этого все удобства. Да и компьтеры сейчас в основном с Вистой продают, а там ie7 по умолчанию.
        • 0
          есть. см. процентное соотношение IE6 на рынке.
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Все верно. Только вот именно «зум» (на мой взгляд) и нужно использовать. Причина уже называлась выше. При увелечении только шрифта есть большые шансы поломать весь дизайн.
  • +6
    я за em

    удобно при верстке основываться на размере шрифта в целом для отступов.
    • +1
      Особенно удобно верстать в em и одновременно бороться с 3px gap…
      • 0
        > и одновременно бороться с 3px gap

        О! Объясните, а как это помогает? Интересно.
  • –2
    Объясните мне, дураку. Пользователь будет лезть в css страницы и менять базовый размер? Причем тут em и масштабирование? pt Масштабируется любыми браузерами современными стандартными средствами. Я не стебаюсь, я правда себе уже голову сломал. Может, я чего-то недопонимаю? Как правильно пользоваться emами?
    • +1
      В главном меню браузеров, почти всех, есть пункт «размер шрифта», в котором его можно увеличить или уменьшить
      • 0
        Понял, но фишку эту только в ие нашел. В остальных браузерах только масштаб увидел.
        • 0
          Кстати, спасибо огромное за разъяснение :)
        • 0
          в остальных — зум различной степени адекватности, что, на мой взгляд, куда лучше :)
  • –1
    я за px + zoom аля opera
    • +1
      а товарищ заминусовавший пусть объяснит как нормально масштабировтаь элементы дизайна (фоновые картинки и прочее) под увеличенный текст ;)
      • +2
        поддерживаю! высота шрифта в процентах — нет слов, это очень хорошо, но как быть с элементами интерфейса, которые могут и не вместить уеличившийся шрифт? что толку увеличить шрифт и наблюдать как из меню вылезают буквы, как фарш из мясорубки? или как панели превращются в непонятную кашу?
        • 0
          >но как быть с элементами интерфейса, которые могут и не вместить уеличившийся шрифт?
          В 90% случаев наличие таких критических элементов определяются фантазиями дизайнера. Может быть начать с этого?
          • 0
            т. е. по вашему главное маштабируемость для плоховидящих, а не дизайн? :)
            • 0
              Дизайн не несет «главной» смысловой нагрузки, главное все таки контент. Правильно?
              Дизайн сайта не должен масштабироваться — только текст.

              П. С.: У меня отличное зрение, но иногда, читая большую статью, мне приятнее откинуться в кресло и читать не находясь в непосредственной близости от монитора, для этого я увеличиваю шрифт и читаю, а вот увеличенные элементы дизайна в этот момент, мне совсем не нужны.
              • 0
                Как тогда ставить «плюсы» и «минусы» комментариям, если эти мелкие кнопки не видно со спинки стула?

                Все должно масштабироваться.
                • 0
                  вот и замаштабируй их любитель em ;)
                  • +1
                    SVG поможет отцу русской демократии :)
                    • 0
                      его тоже в em задавать?
                      Я то думал что оно больше zoom любит
                • 0
                  Для меня чтение статьи не заключается в ставке плюсов и минусов. Тут есть два ключевых слова «чтение» и «статьи», а не «оценивание» и «комментарии». Интернет блогами не ограничивается.

                  А если относительно хабра, то эти кнопочки оценки прекрасно видны, за счет контраста их цвета с остальными элементами.
          • 0
            Вы предлагаете переучивать всех дизайнеров и ограничить их полёт фантазии? Чтобы и в так практически однообразном по стилевому оформлению интеренету, осталось пару стандартных шаблонов, которые просто было бы верстать в em-ах?
            • +1
              а для вас важнее уникальный дизайн? по-моему важнее уникальный контент. в книгах только обложки отличаются, а внутри такое однообразие — белый фон и черный текст (ну, за редким исключением). это не контент должен приспосабливаться к дизайну, а совсем наоборот. дизайнеры должны научиться офрмлять контент так, чтобы он и смотрелся замечательно, и масштабировался без проблем, и не мешал
            • +1
              >и ограничить их полёт фантазии?
              Ограничения есть в любой дизайнерской сфере. Веб — не исключение. Искусство дизайнера оно в том и заключается, чтобы в жестких рамках технических ограничений найти нетривиальное и красивое решение.
        • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Лучше иметь возможность как-то масштпабировать шрифт, чем не иметь)) А то бывают «мастера» поставят 8 grc? и хоть щурься, хоть убейся((
        • 0
          *пикселей
  • +2
    Все хорошо, но вот разница в масштабировании «em» и "%" есть только в ie.
  • +1
    Percents (%): Единицы измерения в % похожи на «em», за исключением нескольких принципиальных различий. Во-первых, текущий font-size равен 100% (т. е. 12pt = 100%). При использовании "%", ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя (accessibility).

    «Во-первых» есть, а хотя бы «во-вторых» — нет.
    Абзац закончился.

    Одна из проблем, с использованием px заключается в том, что эти единицы не позволяют изменять масштаб для слабовидящих читателей или мобильных устройств.

    Это не так.
    Многие браузеры (Опера, например, или FF) масштабируют не замечая.
    • 0
      это все понятно, хоть и сквозь зубы, но мириться с присутствием семейства ИЕ нам приходиться.
    • 0
      нормальные браузеры, я бы сказал))
  • +4
    при вёрстке всегда задаю body (font-size: 62,5%) — теперь 1em равен 10px
    после этого работаю с элементами задавая размеры почти как в пикселях, например

    p ( font-size: 1.2em ) это тоже самое что и p ( font-size: 12px)

    для меня это достаточно удобно, и легче прикинуть какой размер будет нужен тому или иному элементу
    • 0
      А разве у всех браузеров в таблице по умолчанию font-size: 16px? А то я для перестраховки в px для body размер шрифта указываю.
      • 0
        тут немного про это
        www.webdesignoffice.us/blog/archives/106
        • 0
          Премного благодарен. Давно хотел получше разобраться с этим вопросом. Да все руки не доходили. А тут уже не отвертишься… и статью прислали. Осталось только прочитать. :)
      • 0
        нет, но font size: 100% = 16px если я не ошибаюсь
        читал об этом методе пару лет назад у западного css-гуру и этот метод мне очень понравился, я как раз был в поисках альтернативы пикселям, и не знал на чём остановится — em или процентах.
        • 0
          ага, вам уже дали ссылку выше ;)
    • 0
      А я всегда делаю html (font-size:100%), body (font-size:0.625em).

      Кстати при этом подходе в емах размеры можно указывать не только шрифтам, но и блокам, что дает возможность создания масштабируемых макетов.
    • –3
      Известная тема, но шрифт размером 10px нечитабельный. В результате приходится все равно масштабировать блоки по 1.2em, а потом внутри них давать размеры уменьшенных шрифтов, но уже с новыми масштабными коэффициентами.
      Пример с p ( font-size: 1.2em ) тоже, мягко говоря, не очень удачный. Потому как визуальные редакторы имеют обыкновение гадить. Например — окружать таблиыц в тег а внутри таблицы еще параграфов накидать. В результает получается ерунда. Можно конечно подтереть за визивигом, но иногда такая подчистка хуже мусора который визивиг вносит.
  • +3
    Автор темы — любитель холиваров.
    Он запостил заведомо халиварную тему, которой уже ни один год.
    Чего он этим добился? Сейчас две стороны «за px» и «за em» будут долго долго спорить минусуя друг друга.
    Пока что побеждают «em-щики» за счёт «авторитета» автора темы.
    • 0
      я запостил перевод статьи, которая мне понравилась
      предлагаю вам запостить топики по-лучше, хотя бы один

      предлагаю вам не посещать посты, которые вам не нравятся
      предлагаю вам не холиварить в принципе, как поступаю и я

      предлагаю к автору обращаться напрямую, а не через третье лицо
      • 0
        Спасибо, что загнали карму в минус, так что Ваше предложение о том, чтобы я запостил топик получше, я ещё долго не смогу воспринимать всерьёз, так как Вы сами же лишил меня этой возможности надолго.
        • –1
          Зато наверно будет возможность как следует обдумать свои мыслы)) и вычитать все неточности и спорные моменты
    • 0
      Em-щики побеждают за счет того, что это правильное решение.
      • +1
        Em-ы в данный момент это просто мода и отчасти дань IE6, без какой либо реальной пользы для пользователя современных браузеров, в которых есть зум.
        • –1
          Зум-браузеры в меньшинстве, дорогой. Забудь про них.
          • 0
            Супер заряженых не бывает, хватит жрать колеса, дорогой :)
      • 0
        В цитатник!111 :)
  • 0
    www.thenoodleincident.com/tutorials/box_lesson/font/index.html#screens

    Хорошая ссылка со сравнением четырёх разных методов задания размера текста и двумя сотнями скриншотов в разных браузерах.
    • +1
      боюсь смотреть 200 скриншотов :)
      расскажите что там в итоге
      • 0
        В итоге всё не так просто и выбирать решение нужно в зависимости от обстоятельств.
        В частности неплохой метод — устанавливать базовый размер шрифта для элемента body в процентах (от 60 до 90 и более, в зависимости от желаемого эффекта), а размер текста у элементов в em.
        Вот описание: www.thenoodleincident.com/tutorials/typography/incremental_differences.html
        • 0
          спасибо за ссылку, правда по упомянутой Opera 7 в статье понятно, что она несколько устарела
    • 0
      Хорошая, только древняя.
      • 0
        Да, сейчас заметил, что не обновляется.
        Но методы описаны адекватные.
  • 0
    не вижу ничего хорошего в емах. столько геморроя при вёрстке и учитывае наследования и только ради ие — уж увольте, он и так на одних костях держится.
    • +1
      Во-первых, не только ради IE :) есть еще мобильные устройства, на которых очень приятно смотреть сайты, с масштабируемыми единицами измерения (продвинутые мобильные браузеры я здесь не имею ввиду, которые тоже имеют клевый зум.).

      В идеале — не только шрифты должны иметь относительную размерность, но и все блоки и элементы на странице, у которых есть размерность. Да, это сложно, и иногда даже очень (особенно если делается что-то олдскульное табличное и т. д.), но существуют способы делать сайты интереснее, не основываясь на «табличной» сетке (здесь я имею ввиду не верстку таблицами, а модульную «сетку», которая, по-сути, является таблицей).

      Во-вторых — использовать em'ы так же просто, как и px, это дело привычки и опыта.

      З. Ы. Кстати, существует прекрасный инструмент для расчета соответствий px и em, при чем эта штука позволяет выстраивать наследование элементов — так что вы никогда не запутаетесь что, от чего зависит, и какой элемент от какого наследует размеры шрифта.
      • 0
        а чем плох масштаб в браузере? почему этим должны заниматься верстальщики, а не разработчики софта, ибо вещь это сугубо софтовая :)
        • +1
          Потому, что это — работа верстальщика — сверстать сайт качественно и доступно, а не разработчиков софта, которые однажды пошли на уступки хреновым верстальщикам (сделали браузеры более лояльными к коду) — и теперь мы видем полный бардак в этом плане (у каждого браузера «какое-то своё» понимание о стандартах). И появление «зума» в браузерах — это точно такие же уступки по отношению к разработчикам.

          Но не об этом речь. А о том, что, так называемая, «доступность» — это задача одновременно актуальная и для разработчиков софта, и для тех, кто делает, скажем, сайты. Так что если у вас есть возможность повлиять на это, используя существующие инструменты, почему бы это не сделать?

          Сложность — это не «отмазка». По вашей логике получается так, что людям которые пишут книги — не нужно в совершенстве знать грамматику и вообще правила языка — об этом, видите ли, должны позаботиться разработчики софта (я имею ввиду проверку правописания, которая сейчас даже в браузеры, встроена). И эта тенденция «подстраивания» софта, которая осуществляет «подмену» ценностей, честно говоря, ужасает. С одной стороны — да, все круто, «технологии в массы!» «доступность!», а с другой — сейчас вполне обычно, когда человек с высшим образованием, при написании электронных документов проверку правописания доверяет софту (читать, как «возлагает обязанности на софт»)… По-моему это негативная тенденция.

          P.S. Все выше — это моя точка зрения, которая может не совпадать с общепринятой.
  • +1
    Помоему статья давно не актуальна. Пока версии Эксплорера не «зумирующие», аналогично Фаерфоксу или Опере, и преволировалировали среди большой массы пользователей, приходилось выкручиватся с комбинацией ем и процентов (так как при использовании одной из величин шаг при увеличении шрифта был слишком большим). Сейчас слава богу ситуация не та. Поэтому правильно использовать каждую единицу по назначению. Пиксели для экрана, пункты для печати, ем там где нужна зависимость от пропорции строки (к примеру когда блок должен быть приблизительно равен 40 символам в ширину, а не фиксированому значению), а процент для гибкости в псолдеующей правке ЦСС (когда задается базис у боди того же а от него размеры уже наследуются, и при необходимости смены базиса для той же печатной версии, например, необходимо будет переопределить уже только базис а не все стили связаные с размером шрифта).

    Статья для спецов не интересна, а для тех кто только приступил к изучению данной темы будет даже вредна, так как сбить может с пути правильного.
  • +1
    Уже в комментариях проходила мысль, но продублирую — для CMS с визуальным редактором далеко не всегда хороши em и % — можно напороться на большие проблемы с наследованием. Либо надо ограничивать и редактор, и пользователей, чтобы ничего не испортили.
    Для верстки под мобильные можно использовать отдельный css, как и под версию для печати (pt). А вообще для широкоформатных мониторов будущее за функцией zoom броузеров — если дизайнер ограничил ширину блока, то при увеличении шрифта вам придется долго и нудно читать узкую полоску текста. С Zoom таких проблем нет.
    • 0
      согласен, почему-то ни слова про то, что % наследует значение родительского блока
  • 0
    Не поверите, но вот вчера встала проблема сделать текст масштабируемым, засыпал с этой мыслью, а тут ответ прям сразу, спасибо!
  • –5
    LOL
    Используя CSS, вы можете изменить размер текста в браузере с помощью четырех разных единиц измерения.
    дальше можно не читать. Автор — мегачайник, т. к. не знает про существование единицы ex.
    • 0
      а так же о pc, mm, cm, inch
      • 0
        я бы не стал говорить так категорично.
        действительно — единиц измерения много, но если решил написать будь добр, изучи тему.
        «масштабируемых» единиц измерения не так уж и много, в отличие от фиксированных.
    • +1
      Напишите свою статью, полную и интересную.
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Вы наверное сильно удивитесь, но 1.2em не равны 1.2ex и не равны 120%. Так как em и ex потому и являются «маштабируемые» единицы измерения (как сказано в статье), а точнее коэффициэнтом пропорции относительно габаритов шрифта. Еще точнее коэффициэнт пропорции относительно высоты букв в верхнем и нижнем регистре, следовательно и о соотношении между этими величинами можно говорить только в контексте определенного шрифта, так как соотношение между ними от шрифта к шрифту различные.
      • НЛО прилетело и опубликовало эту надпись здесь
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Все так и есть, о зависимости между em и ex, можно говорить лишь в контексте определенной гарнитуры.
  • +4
    Вложу в топик свои пять копеек :-)

    В большинстве браузеров кегль100% == 16px. При вычислении относительных величин, особенно при наследовании, есть нюансы:
    — IE округляет результат в большую сторону.
    — FF округляет результат в меньшую сторону.
    — Opera, округляя результат в меньшую сторону, получает значения в пикселах для родительского и дочернего объекта, после чего вычисляет итоговое значение.

    Пример: задавая значение 110% получаем:
    — IE: 18px
    — FF: 17px

    Для получения одинакового результата (18px) используем дробное значение в 112.5%.
  • 0
    Прощу прощения.
    Иногда встречается следующая конструкция:
    font: 100%/1.5em Georgia,Arial,Verdana;
    что есть "/" в данном случае, и 1.5em? Междустрочный интервал?

    • 0
      да, это сокращённая запись. понимают всё современные браузеры (ие6 так же, ниже — не знаю, да и не важно по сути)
      • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Пожелание всем верстальщикам: не пользуйтесь пикселями! Указывайте размеры в ем-ах (там, где надо ессно), чтоб ваш сайт масштабировался при смене шрифта!

    Спасибо, пользователь
  • 0
    А мне пункты нравятся… ничего лишнего не разъезжается.
  • 0
    По количеству комментов можно судить о том, что этот вопрос из серии «священных войн», «религиозных вопросов», имхо :)
  • 0
    Упрощая. Шрифт указывать в %, а масштабируемые отступы указывать в em?
  • 0
    Полезная статья, мне, многое прояснила!
  • 0
    Автор статьи, картинки в статье уже не грузятся :)
  • 0
    Новая ссылка на оригинал, с картинками. Также в обновленном посте есть небольшое обновление =)
  • 0
    image
    Никак не могу понять разницу между em и %, у меня в браузере все одинаково, если кому несложно поясните.
  • 0
    Спасибо за статью.
    Весьма интересно.

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