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

Методика тестирования

Тестовый документ содержит две колонки: основная слева и дополнительная справа. Текст написан шрифтом 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. Отсчитывая от 16px по умолчанию, следующие стили должны дать желаемый размер текста:

.bodytext p {
    font-size:0.875em; /* 16x.875=14 */
}
.sidenote {
    font-size:0.75em; /* 16x0.75=12 */
}

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

Размер текста body в процентах.

А исправить ситуацию с искажением размера текста в IE6 и IE7 можно, используя проценты. Поэтому, оставив em при указании размеров текста в контенте, были протестированы следующие стили:

body {
    font-size:100%;
}
.bodytext p {
    font-size:0.875em;
}
.sidenote {
    font-size:0.75em;
}

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

Настройка высоты строки в пикселях - шаг 4

В статье о веб-типографике "Setting Type on the Web to a Baseline Grid" (A List Apart, апрель 2007) подчеркивается, что хорошая типографика требует вертикальной сетки, то есть твердый вертикальный ритм, достигнутый с постоянной, взвешенной высотой строки - line-height. Ключевой момент заключается в постоянной высоте строки независимой от размера текста.

В нашем примере подходящая высота строки - line-height: 18px, что и добавляется для body следующим образом:

body {
    font-size:100%;
    line-height:18px;
}
.bodytext p {
    font-size:0.875em;
}
.sidenote {
    font-size:0.75em;
}

Результаты показывают, что высота строки 18px наследуется всем текстом на странице - текст в правой колонке привязан к той же вертикальной сетке, что и основной слева. Применение единиц измерения (в данном случае пикселей) при настройке высоты строки представляет ценность из-за наследования ее значения по всей странице. При использовании значения line-height: 18px без единиц измерения наследуется его множитель, что нарушает привязку строк к вертикальной сетке.

К сожалению, результаты показывают, что line-height: 18px не масштабируется в IE6 и IE7, при изменении размеров текста остается постоянной.

Настройка высоты строки в em - шаг 5

Когда с применением пикселей получилось, мы обратились к em. Повторение логики дает нам следующие стили:

body {
    font-size:100%;
    line-height:1.125em; /* 16×1.125=18 */
}
.bodytext p {
    font-size:0.875em;
}
.sidenote {
    font-size:0.75em;
}

Полученные результаты свидетельствуют о последовательно изменяющемся размере текста и высоте строки во всех браузерах. Прекрасно. ?ли почти так.

Проблема monospace в Safari - шаг 6

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

Можно решить, что проблемы моноширинного текста в Safari - это мелочь, с которой вы и ваши читатели могут жить, а также Safari 3 встроен OS X Leopard и последнее обновление Tiger, и проблема в скором времени практически исчезает. Для тех же, кого это сильно беспокоит и кто не может ждать, альтернативным решением является указать размер шрифта текста в пикселях для Safari.

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

Результаты показывают - теперь нормально меняется размер текста и высота строки во всех браузерах, включая моноширинный текст в Safari2.

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

Заключение

Наша задача была найти способ установить размер текста, который позволяет сохранить точный контроль над типографикой, а пользователям без ущерба корректировать его размер при чтении. Мы протестировали различные моменты в наиболее распространенных браузерах. ?зменением размеров текста и высоты строки в em, с процентами, указанными для body (и необязательное замечание для Safari2), было показано, как сделать масштабируемым текст во всех браузерах, используемых сегодня.

Дополнение

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

Richard Rutter, How to Size Text in CSS.