4.3. Правила веб-типографики

Типографика играет ключевую роль в веб-дизайне, по статистике 95% содержимого сайтов составляет текстовый контент. Шрифтовое оформление управляет настроением и создает определенную атмосферу при прочтении текстового содержимого веб-страниц.

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

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

CSS-свойства для правильной веб-типографики

• Содержание:
• 1. Семейство шрифтов (свойство font-family)
• 2. Сочетание шрифтов с засечками и без засечек
• 3. Цвет шрифта (свойство color)
• 4. Размер шрифта (свойство font-size)
• 5. Выравнивание текста (свойство text-align)
• 6. Межбуквенный и межсимвольный интервал (свойства word-spacing и letter-spacing)
• 7. Межстрочный интервал (свойство line-height)
• 8. Длина строки
• 9. Начертание шрифта (свойство font-style)
• 10. Структура текста и визуальная иерархия
• 11. Безопасные шрифты

1. Семейство шрифтов (свойство font-family)

Подбор шрифта начинается с выбора гарнитуры шрифта.

Гарнитура — шрифт или несколько шрифтов, имеющих стилистическое единство начертания. Состоит из набора знаков (обычно — цифры, буквы, знаки пунктуации, спецсимволы, но может состоять так же исключительно из неалфавитных знаков). Например, гарнитура «Times New Roman» состоит из обычного, курсивного, полужирного и множества других шрифтов этого семейства.

Гарнитуры можно разделить на две основные категории: с засечками (антиква и брусковые шрифты) и без засечек (гротески).

Шрифты без засечек имеют простой и четкий внешний вид. Шрифты с засечками, напротив, придают более серьезный и официальный тон.

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

В каких случаях можно использовать несколько шрифтов:

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

Сервис TypeTester для подбора шрифта

2. Сочетание шрифтов с засечками и без засечек

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

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

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

3. Цвет шрифта (свойство color)

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

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

Теплый цвет активно привлекает внимание к тексту, делая его визуально большим по размеру, чем шрифт аналогичного размера холодных оттенков. Для небольших по размеру элементов текста подходят более яркие цвета, боковое содержимое страницы можно выделить при помощи цвета, который на 20–30% светлее цвета текста основного содержимого веб-страницы.

При выборе количества цветов текста предпочтительно ограничиться двумя достаточно контрастными цветами (не считая черного и белого цвета). Черный текст на белом фоне — это классика, достаточно контрастная.

4. Размер шрифта (свойство font-size)

Размер базового шрифта в браузере равен 16px, а размер заголовков устанавливается пропорционально размеру базового шрифта (h1 — 2em, h2 — 1.5em, h3 — 1.17em и т.д.).

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

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

Шрифты различных семейств одинакового размера также могут иметь разный фактический размер.

С ростом разрешения экранов и размеров мониторов необходимо пересмотреть привычный размер текста в 12–14px. Для обычного текста уже повсеместно применяется шрифт размером 14–18px. Задавая размер шрифта, нужно не забывать про адаптивность, т.е. размер шрифта должен изменяться в зависимости от размера экрана.

5. Выравнивание текста (свойство text-align)

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

6. Межбуквенный и межсимвольный интервал (свойства word-spacing и letter-spacing)

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

Шрифты с засечками смотрятся более выразительно при уменьшенном значении letter-spacing.

Чем меньше шрифт, тем дальше друг от друга должны стоять буквы, чем крупнее — тем плотнее должны быть расположены буквы.

7. Межстрочный интервал (свойство line-height)

Оптимальное значение межстрочного интервала в 1.4 — 1.6 раза больше размера шрифта.

Также, не делайте больших отступов между заголовками и связанным с ним абзацем.

8. Длина строки

В строке для сплошного чтения должно помещаться от 30 до 75 знаков (приблизительно 7-10 слов на одной строке). Чем шире строка текста, тем больше должен быть межстрочный интервал. Межстрочное расстояние не должно быть меньше пробела между словами.

9. Начертание шрифта (свойство font-style)

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

Свойство font-variant: small-caps; придает тексту типографскую изысканность, преобразуя текст таким образом, что все буквы отражаются малыми прописными. Данный прием подходит для небольших фрагментов текста.

10. Структура текста и визуальная иерархия

В структуре веб-страницы выделяют следующие объекты:

• Логотип / название сайта;
• Названия/заголовки;
• Заголовки второго плана;
• Основной текст;
• Навигацию;
• Гипертекстовые ссылки;
• Длинные цитаты;
• Боковые панели;
• Подписи/надписи в таблицах, рисунках.

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

В HTML существует шесть уровней заголовков, начиная с более важного <h1> и заканчивая менее значимым <h6>. Заголовок <h1> должен быть первым в структуре документа, а заголовки низших уровней должны идти за ним и детализировать информацию. Для выделения заголовков можно воспользоваться приемом выделения цветом части заголовка.

Для более легкого усвоения текст нужно разбивать на части и для каждого раздела выбрать заголовок соответствующего уровня. Чем выше уровень заголовка, тем значимее по содержанию должен быть раздел.

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

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

• Капитель;
• Курсив;
• Полужирное/жирное начертание;
• Размер;
• Цвет;
• Смена гарнитуры;
• Изменение положения знаков на полосе текста (верхний и нижний регистр, отступы);
• Выделение знаков при помощи графических элементов — указателей, рамок, иконок и т.п.

Слишком сильное выделение не только чрезмерно акцентирует внимание на каком-либо фрагменте, но и затрудняет чтение.

11. Безопасные шрифты

Windows fonts / Mac fonts / Font family

¹ Шрифты Georgia и Trebuchet MS поставляются вместе с Windows 2000/XP и включены в пакет шрифтов IE (да и вообще поставляются со многими приложениями от Microsoft), поэтому они установлены на многих компьютерах с ОС Windows 98.

⁶ Эти шрифты установливаются в Mac только при Classic-инсталляции