Как установить размер текста в CSS

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

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

Тестовый документ содержит две колонки: основная слева и дополнительная справа. Текст написан шрифтом 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 игнорировать разметку ниже).


<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]-->

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

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

Заключение

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

Дополнение

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

Richard Rutter, How to Size Text in CSS.

 



Много комментариев (32) к “Как установить размер текста в CSS”

  1. Nikita :

    В принципе, не хитро, но полезно. Спасибо.
    А вообще IE6 надо искоренять.


  2. vah :

    Результаты показывают, что высота строки 18px наследуется всем текстом на странице – текст в правой колонке привязан

    Здесь ошибочка в ссылке. должно быть http://www.alistapart.com/d/howtosizetextincss/ss-test-4.html


  3. Sam Dark :

    Полезно. Спасибо.


  4. Максим Покровский :

    Результаты показывают, что высота строки 18px…

    Ссылка на “результаты показывают” битая. Нужно http://www.alistapart.com/d/howtosizetextincss/ss-test-4.html


  5. Баранов Андрей :

    Промахнулся, поправил, спасибо.


  6. lusever :

    line-height:1.125em; тоже само что и line-height:1.125;


  7. Тормоз :

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

    xx-small, x-small, small, medium, large, x-large, xx-large.


  8. Морвин :

    Ух ты, спасибо, познавательно!


  9. Delta :

    Спасибо, довольно таки важная для меня информация


  10. пафос :

    Очень информативно, спасибо!


  11. сонник юлия :

    Очень полезная статья, юлагодарю!


  12. Ник :

    Спасибо за статью


  13. oqbo :

    Спасибо. Ваша статья мне помогла в решении проблем с ИЕ!


  14. rafis :

    Вот несколько практических правил по выбору шрифта,которые можно применять не боясь критики опытных гуру.
    Шрифты с заческами, такие как Times New Roman,хороши для Web- сайтов с серьезным содержанием обязательно для русского языка с форматированием по ширине с выключкой, величина 8 –12 pt ,не путать с пикселями, все данные задаются в CSS, избегаая страшного тега FONT
    Шрифты без засечек, такие как Tahoma, Arial, лучше подойдут для Web – сайтов с легким игривым содержанием.
    Шрифты с засечками и стандартными размерами делают большие фрагменты текста удобными для чтения.
    Широкие гарнитуры, такие как Verdana или Georgia, лучше использовать для малых размеров шрифта. При больших размерах шрифта эти гарнитуры выглядят чрезмерно большими.
    Шрифты без засечек обычно чаще, чем шрифты с засечками, используют для заголовков
    и больше ничего ненадо выдумывать


  15. Клевый сеошник :

    Спасибо за статью. Полезно для мозга моего =)


  16. disturbia :

    Спасибо, помогло


  17. Олег :

    Спс за полезную информацыю


  18. Sanekton :

    И не лень писать же, пасибо :)


  19. Serch :

    помогайте людям как сейчас это сделали и добро к вам вернется в тройном размере. милые мои славные друзья:-) свидетель иеговы


  20. Красноярск :

    Эксплорер вообще надо уничтожить.


  21. фотогений :

    ну пока вот так…
    спасибо Вам, что вы в поиске)
    надобятся такие труды)


  22. Дмитрий Неверов :

    Хорошо расписали всё ясно и понятно


  23. btl :

    Да теперь многое стало понятно. Спасибо!


  24. Библиотека :

    Спасибо, хорошо расписано, исправил на сайте.


  25. Сон :

    Спасибо за статью, пригодилось.


  26. Я детектор лжи :

    вот на этом сайте я попарился с размерами,
    в итоге помогла эта статья


  27. Свобода слова :

    Интересный вариант. Нужно будет попробовать. Сенкс.


  28. Stas :

    Отказался от этих игрушек, когда однажды попался на таком моменте:
    вы видели ЧТО происходит с размерами(как следствие блоками и отступами) в IE, когда включен крупный режим просмотра текста(не 96точек на “, а более, 130 например)? Верстка ВСЯ летит коту под хвост.


  29. Степан :

    Спасибо большое за мануал! а то весь инет перерыл, и только тут наткнулся…


  30. Бодя :

    Сенкс за инфу, почерпнул для себя


  31. Фуэль :

    Даже книгу по ксс покупать не надо – зашел к вам и все прочел :)


  32. CooLer :

    Это точно. На этом блоге найдешь ответ на любой вопрос этой тематики.



22 queries 0.263 seconds.