Способы установки размера шрифтов в CSS

Версия для печати

В прошлом году или около того наконец-то появился интерес к проблеме оформления текста в среде Веб, и теперь во многих статьях и на форумах обсуждают предложенные методы и теории. Часто в конце концов преобладающей становится идея о том, что хорошее оформление требует тщательного контроля размера шрифта и высоты строки. Но ведь это же Веб: среда, где читатель может иметь такой же контроль, что и дизайнер — и результатом должно быть то, что текст в Веб, хотя и по воли дизайнера, должен быть гибок в различных браузерах и ОС.

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

Мы достигнем нашей цели традиционным методом проб и ошибок. Согласно новаторской работе Оуэна Бригса образца 2002-го года, я создал набор примеров для исследования, состоящий из 6 шагов и 161 скриншота. Ну так что, начнем?

Тестовый набор

Для тестирования использовалась разметка, состоящая из двух колонок — основной колонки слева и врезки справа. Был выбран шрифт Arial с целью соответствия различным операционным системам и платформам.

Тестирование проводилось на браузерах: Safari 2, Firefox 2 и Opera 9.5α на Mac OS X Tiger, а также Internet Explorer 6 (IE6) и Internet Explorer 7 (IE7) на Windows XP со сглаживанием шрифтов ClearType. Ясно, что это не исчерпывающий список браузеров, операционных систем и средств визуализации, но они сегодня соответствует потребностям большинства пользователей.

Каждый из браузеров и ОС был запущен с настройками по умолчанию. На каждом шаге проверялось то, как браузер отображает маленький, средний, большой и огромный размеры шрифта, что соответствует 90%, 100%, 110% и 120% увеличения текста в тех браузерах, где эта возможность существует.

Исходный пример

Сначала нужно было удостовериться в том, что все браузеры настроены одинаково. В исходном примере видно, что размер текста по умолчанию в каждом из браузеров равен 16px и текст везде масштабирован одинаково. Это условие выполняется, если не применены никакие стили (отличные от стилей для браузеров по умолчанию).

Размер текста в пикселях — шаг 1

Размер текста по умолчанию в исходном примере — хорошая отправная точка, но для большинства людей (дизайнеров, заказчиков и их клиентов) 16px слишком много для текста по умолчанию. В нашем примере размер основного текста был уменьшен до 14px, а текста во врезке до 12px. На первом шаге мы всего лишь задали размер текста в пикселях:

.bodytext p {
    font-size:14px;
}

.sidenote {
    font-size:12px;
}

В результате Safari и Firefox по-прежнему позволяют масштабировать текст, тогда как IE6 и IE7 — нет. Размер текста в Opera и IE7 можно изменить, используя инструмент масштабирования страницы, который увеличивает как текст, так и изображения — то есть масштабирует страницу целиком.

Размер текста в em — шаг 2

Хотя доля браузеров, которым пользователи отдают предпочтение, различна для каждого отдельно взятого сайта, можно с уверенностью сказать, что IE6 пока используется большинством людей. Таким образом, устанавливая размер текста в пикселях, мы не даем многим людям возможности его масштабировать. Ещё один аргумент — от пользователей IE7, у которых также не будет возможности изменить размер шрифта без использования инструмента масштабирования.

Следующая единица измерения шрифта — em. Em — это действительно типографская единица, рекомендуемая W3C и сравнимая по точности задания размера с ключевыми словами. Исходя из размера текста по умолчанию, мы можем придать тексту желаемые размеры:

.bodytext p {
  font-size:0.875em; /* 16x0.875=14 */
}

.sidenote {
  font-size:0.75em; /* 16x0.75=12 */
}	

По результатам видно, что размер текста при стандартных настройках браузеров соответствует размеру, заданному в пикселях. Эти результаты также служат доказательством того, что текст, указанный в em, может легко масштабироваться в любом из браузеров. Однако IE6 и IE7, хотя и приемлемо, но всё-таки преувеличивают размеры текста при его масштабировании.

Основной текст, указанный в процентах — шаг 3

Решением проблемы неправильного масштабирования текста в IE6 и IE7 является установка величины шрифта тега body в процентах. Так что, оставив em для остального содержимого, протестируем следующие стили:

body {
    font-size:100%;
}

.bodytext p {
    font-size:0.875em;
}

.sidenote {
    font-size:0.75em;
}

По результату видно, что различия между IE6, IE7 и остальными браузерами стали менее выраженными. Теперь все браузеры отображают и масштабируют текст одинаково.

Установка высоты строки в пикселях — шаг 4

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

Для нашего примера подходящая высота строки — 18px. Применим эти параметры к основному тексту:

body {
    font-size:100%;
    line-height:18px;
}

.bodytext p {
    font-size:0.875em;
}

.sidenote {
    font-size:0.75em;
}

По результату видно, что высота строки в 18px наследуется всеми элементами на странице — заметим также, что текст врезки имеет такую же высоту строки, что и текст основной колонки. После определения единиц размера (в нашем случае px) для высоты строки, это значение наследуется всеми элементами страницы. Если мы определили высоту строки без единиц измерения, — этот коэффициент наследуется всеми элементами, но будет пропорционален размеру шрифта каждого из элементов, таким образом, нарушая вертикальную согласованность.

К сожалению, результаты говорят нам о том, что высота строки в 18px не масштабируется в IE6 и IE7, в то время как размер шрифта изменяется, и при увеличении масштаба — строки ужасно прижимаются друг к другу.

Установка высоты строки в em — шаг 5

Если с пикселями не не получилось — будем использовать em. Изменим высоту строки в наших стилях:

body {
    font-size:100%;
    line-height:1.125em; /* 16x1.125=18 */
}

.bodytext p {
    font-size:0.875em;
}

.sidenote {
    font-size:0.75em;
}

В результате получим правильное, пропорциональное увеличение размера шрифта и высоты строки во всех браузерах. Превосходно. Ну или почти превосходно.

Проблема с моноширинными шрифтами в Safari — шаг 6

Вы, наверное, заметили небольшую проблему в Safari: моноширинный шрифт основного текста отображается по-разному. Для текста в пикселях Safari верно отображает моноширинный шрифт такого же размера, как и пропорциональный шрифт, окружающий его. Если текст указан в em, то Safari отображает моноширинный текст намного меньше окружающего его текста. Различия появляются вследствие разного размера шрифта по умолчанию для пропорционального (16px) и моноширинного шрифта (13px). В Safari 3a на OS X такой проблемы не существует.

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

Добавим условный комментарий в наши стили, для того чтобы установить размер в пикселях для всех браузеров, кроме IE6 и IE7 (конструкция [if !IE] заставляет IE/Win игнорировать заключенную в комментарии разметку).

<style type="text/css">
body {
    font-size:100%;
    line-height:1.125em;
}

.bodytext p {
    font-size:0.875em;
}

.sidenote {
    font-size:0.75em;
}
</style>

<!--[if !IE]>-->

<style type="text/css">
body {
    font-size:16px;
}
</style>

<!--<[endif]-->

По результату видно, что теперь шрифт во всех браузерах выглядит одинаково, включая и моноширинный текст в Safari 2.

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

Заключение

Нашей целью был поиск способа задания параметров текста, который бы позволил дизайнерам сохранить тщательный контроль над его оформлением, не жертвуя при этом возможностями пользователя по настройке текста. Мы протестировали различные единицы измерения в популярных браузерах. Указывая величину шрифта и высоту строки в em, с процентными значениями для элемента body (и с дополнительным условием для Safari) было показано, как придать тексту аккуратность и чёткость, при этом оставляя возможность его масштабирования. Эти методы вы можете с уверенностью положить в свой багаж знаний и использовать в качестве одного из лучших способов по установке параметров текста в CSS, который удовлетворяет как дизайнерам, так и пользователям сайтов.

Приложение

Единицы em могут стать слишком мудреными для вычисления, особенно если имеется много вложенных элементов — становится трудно вычислять размеры в em. Однако, удачно комментируя свои таблицы стилей, вы значительно упростите эту задачу. Этот более сложный пример и присоединенная к нему таблица стилей показывают, как задавать размер вложенным элементам, используя body в качестве отправной точки.