x
 
Тёма
7 июня 2012

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

Не могли бы вы разжевать этот момент? В каких единицах стоит задавать размеры шрифта?



Указывайте размер шрифта и межстрочный интервал в пикселях.

Да, пиксели несовершенны уже потому, что на бумаге я могу задать кегль 7,5 пункта, а на экране нет. Хотя у дробных значений есть физический смысл и применение, не очень ясно, что такое дробный пиксель, да и в реальных браузерах они не отображаются.

Но тем не менее, пиксели безопасно использовать, целые значения везде работают и будут работать даже после исчезновения физического пикселя, глобальной ретинизации всех экранов, что ясно из определения пикселя.

При указании шрифта в пикселях нет проблем с наследованием, что важно при вёрстке независимыми блоками. Не нужно постоянно включать калькулятор, просто пишете:

P {
  font-size: 13px;
  line-height: 18px;
}

вместо:

P {
  font-size: .81em; /* 13/16 */
  line-height: 1.38; /* 18/13 */
}

Интерлиньяж в пикселях решает проблемы «прыгающей» строки, когда нужно сверстать в линию элементы разной высоты и кегля.

Один из недостатоков пикселей — немасштабируемость шрифтов в ИЕ 6 — отлично вписывается в концепцию грациозной деградации.

Я скептически отношусь к новомодному способу указывать размер шрифта в ремах (rem, root em), тех же емах, но избавленных от наследования. Пиксели всё равно придётся указать для обратной совместимости:

H1 {
  font-size: 18px;
  font-size: 1.13rem;
}
P {
  font-size: 13px;
  font-size: .81rem;
}

А чтобы избавиться от калькулятора ещё и изменить базовый размер шрифта, это лукавство:

BODY {
  font-size: 62.5%;
}
H1 {
  font-size: 18px;
  font-size: 1.8rem;
}
P {
  font-size: 13px;
  font-size: 1.3rem;
}

Кроме rem, в разработке ещё две новые единицы — vh и vw, которые позволят указывать размеры в зависимости от окна браузера. Это решит многие проблемы адаптивной вёрстки.

Используйте пиксели, но не забывайте совсем про емы, они полезны в универсальных типографских классах, когда контекст важен. Например, капитель для текста любого кегля:

.smallcapitals {
  font-size: .88em;
  letter-spacing: .15em;
  margin-right: -.15em;
}

Или полупробел:

.halfspace {
  font-size: .5em;
  line-height: 1;
}

Кстати, когда я использовал емы и проценты, иногда нарочно использовал пиксели, чтобы запретить ИЕ масштабировать текст в некоторых элементах, например, с фиксированной графической подложкой.


P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Александр Лунев
7 июня 2012

Всегда указывал размеры в пикселях, но недавно мне понадобилось увеличивать шрифты на всей странице при определенном размере окна и на помощь мне пришли em. Увеличил базовый размер и всё остальное тоже подтянулось.

Егор Стремоусов
7 июня 2012

К выбору между пикселями и еэмами стоит подходить более комплексно, как к одной из частей общей архитектуры клиентского кода. В этом смысле совет Артёма об преимущественном использовании пикселей без учета контекста решаемых задач мне кажется не совсем корректным и даже пагубным для начинающих.

А для того, чтобы не открывать постоянно калькулятор, я советую технологам использовать онлайн-утилиту для генерации CSS-кода вертикального ритма: http://drewish.com/tools/vertical-rhythm

Илья Страйков
7 июня 2012

Егор, как раз начинающие и должны учиться на пикселях. Нечего забивать мозг разной ересью.

Алексей Рытов
7 июня 2012

Какой-то странный довод. Калькулятора бояться — в лес не ходить. Пиксели часто зло и имеют кучу проблем. А борьба с прыгающей строкой через задание высоты в пикселях — суть хардкод. Мое предложение — базовый шрифт в пикселях, остальное в процентах от него, все отступы — в em.

Роман Парпалак
7 июня 2012

Нужно помнить о том, что настоящие размеры единиц измерения в разных браузерах могут по-разному зависеть от размера шрифта в операционной системе.

Например, если в Виндоус 7 увеличить системный шрифт, то величина единиц em и px не меняется в Хроме и ФФ, но увеличивается в ИЕ 8. В Опере наблюдается промежуточная картина: em увеличивается, а px — нет.

Денис Попов
7 июня 2012

Роман, конечно же, размер пикселя не должен меняться при изменении размера системного шрифта. На то он и пиксель.

То, что не меняется размер эма в «Хроме» и «Фаерфоксе», означает, что эти браузеры решили не привязывать свой базовый шрифт к системному шрифту. Это решение может быть спорным, может быть оправданным, но в любом случае имеет право на существование.

Ростислав Чебыкин
9 июня 2012

Одна из проблем веб‑технологий — в том, что неопытные деятели пользуются устаревшими приёмами, не зная о том, что они устаревшие.

Сейчас, в 2012 году, ничто не мешает задавать размер шрифта в пикселах. Вреда от этого нет, одна только польза.

Много лет назад у этой практики была куча недостатков, о которых подробно рассказывали в книгах и статьях той поры. А кое‑кто до сих пор читает те книги и статьи и не подозревает, что они давно не актуальны.

Эд Бонд
22 июня 2012

Ростислав, то-есть по вашему эта статья (в особенности раздел про размер шрифта) более не актуальна?
http://www.alistapart.com/articles/fluidgrids


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

EM или REM? 6 Можно ли достичь эффекта переливания без встраивания видео на сайт? 1




Недавно всплыло

2 Давайте соберём в одном посте студии и фрилансеров, которые работают по принципам ФФФ 45 Как вы верифицируете оценку сроков от сотрудника? 1 Как вы проверяете соответствие вёрстки макету 2