Типографика для сайта

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

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

1. Шрифты для Web

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

Читаемость текста сильно зависит от шрифта, поэтому стоит уделить этому достаточно внимания.

Для полиграфии часто используют шрифты с засечками. Они визуально акцентируют направление движения глаз и облегчают чтение более длинных строк. Но на экране монитора мы ограничены размером пикселей. Если для полиграфии разрешение печати 300 точек на дюйм, то разрешение стандартного монитора (мы не берем в расчет retina-дисплеи у Apple) — 72 пикселя на дюйм. Для маленького размера шрифта засечки будут масштабироваться размером в пиксель и текст будет выглядеть не так хорошо, как нам хотелось бы. Поэтому часто шрифты с засечками (serif) используют для крупных заголовков, а шрифты без засечек (sans-serif) для основного текста. Это называется шрифтовая пара.

Таким образом, можно резюмировать:

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

2. Длина строки (количество символов в строке)

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

Считается, что для текста в одну колонку оптимальная длина строки от 45 до 75 символов (включая пробелы). Я рекомендую верстать строки 60 - 65 символов с пробелами.

Для нескольких колонок оптимальная длина строки будет в диапазоне 40 - 50 символов.

Исходя из длины строки подбирается размера шрифта. Я не рекомендую делать его меньше 12px для основного текста

3. Междустрочный интервал (интерлиньяж)

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

В CSS междустрочный интервал задается свойством line-height. Оптимальным можно считать множитель 1.5 - 1.7 от базового размера шрифта. То есть если текст имеет размер 14px, то задав line-height: 1.7; мы получим интерлиньяж около 24px.

Если много ресурсов, где можно поэкспериментировать с этими параметрами. Я рекомендую следующие:

• pearsonified.com/typography/
• type-scale.com/

4. Разбивайте текст на блоки

Текст удобнее читать, если он разбит на смысловые блоки. В этом нам помогут заголовки (h1 - h6) и параграфы (тег p). Между блоками должны быть отступы. Я не рекомендую задавать верхний отступ. Пусть у блока всегда задается только отступ снизу. Отступ можно задать размером равным интерлиньяжу. Это улучшит вертикальный ритм текста.