Размерность шрифтов

Описываются особенности единиц размерности шрифтов в Web документах.

Одним из неоднозначных вопросов верстки Web документов является выбор единицы выражения шрифтов. Наиболее часто для задания значения атрибуту font-size используют четыре единицы (есть еще одна, свеженькая, но о ней в конце):

 px – пиксель, 1px равен размеру наименьшей точки на устройстве отображения, поэтому зависит от используемого экрана;

pt – пункт, обычно используется при печати. 1pt равен 1 / 72 дюйма;

em –величина, кратная значению предыдущей величины шрифта;

% — процент, единица всем знакомая.

Какой из этих единиц лучше всего описывать величину шрифта? Попробуем разобраться, а пока заметим, что pt задает абсолютное значение размера шрифта, а em и % задаются относительно шрифта родительского элемента. Кстати будет упомянуть, что размер шрифта в редакторе MS Word задается в пунктах. Очень интересна в этой классификации единица px. При изменении масштаба отображения Web страницы в браузере она ведет себя как абсолютная величина, т.е. не изменяется, но если вы измените разрешение вашего монитора, изменится и величина одного пикселя, т.е. изменится величина шрифта. Т.о. размер шрифтов, выраженный в px, зависит от величины диагонали и разрешения экрана вашего устройства.

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

В левом столбике размер шрифта тега body равен 100%, в правом – 125%. Четко видно, что единицы px и pt не зависят от масштаба, чего не скажешь об относительных em и %.

Единица px применяется в верстке очень часто и успешно, что обусловлено простотой и наглядностью применения, но … Пользователи ранних версий Internet Explorer при записи размера шрифта в абсолютных пикселях не могли изменять размер текста, используя функцию браузера «Размер шрифта». В последних версиях IE включено масштабирование текста, которое увеличивает размер всего на странице — функция, которая доступна также в большинстве других браузеров. Это в определенной степени смягчило проблему.
Чтобы обойти проблему при масштабировании Web страницы, надо использовать относительные единицы, например, em. Но и здесь не обошлось без ложки дегтя. Дело в том, что единица em задает размер относительно величины шрифта своего родительского элемента, поэтому мы можем четко сказать, каким будет устанавливаемый шрифт по отношению к предыдущему значению. А чтобы определить численное значение этого размера, надо отслеживать всю цепочку изменений фонтов, начиная с корневого элемента верстки. Согласитесь, крайне неудобно.
Что касается задания размера шрифта через проценты, можно сказать, что далеко не все величины CSS могут быть выражены через них. Поэтому не случайно на сайте консорциума W3C http://www.w3.org/TR/CSS2/propidx.html в списке CSS правил выделена отдельная колонка, показывающая, какие свойства можно выражать в процентах.

Основываясь на приведенных данных можно сформулировать общие рекомендации, которые часто и предлагают на Web ресурсах – для отображения на мониторах желательно величину шрифта выражать относительными единицами, для печати же более предсказуемы абсолютные единицы.

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

В качестве бонуса за терпение предлагается таблица соответствия между упомянутыми единицами измерения шрифтов.