Типографика для сайта
В первую очередь типографика, как и другие аспекты дизайна, должна быть направлена не для создания привлекательного внешнего вида, а на удобство. Пользователь должен прилагать минимум усилий для чтения. Текст должен быть достаточно контрастным по отношению к фону, достаточно крупным и легко читаемым.
Я постараюсь формализовать основные значения, отталкиваясь от которых можно улучшить читаемость текста на Вашем сайте.
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.
Если много ресурсов, где можно поэкспериментировать с этими параметрами. Я рекомендую следующие:
4. Разбивайте текст на блоки
Текст удобнее читать, если он разбит на смысловые блоки. В этом нам помогут заголовки (h1 - h6) и параграфы (тег p). Между блоками должны быть отступы. Я не рекомендую задавать верхний отступ. Пусть у блока всегда задается только отступ снизу. Отступ можно задать размером равным интерлиньяжу. Это улучшит вертикальный ритм текста.