Веб-Типографика и Читаемость: Практическое Руководство

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

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

Чёткий масштаб из трёх-четырёх уровней (заголовок, подзаголовок, основной текст, мелкая заметка) работает лучше, чем пять-шесть едва отличающихся друг от друга размеров; он даёт и согласованность, и понятное правило для разработчика. Каждая ступень масштаба должна быть заметно крупнее или мельче предыдущей; слишком близкие размеры, например 16px и 17px, визуально не считываются и лишь добавляют путаницу.

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

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

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

• Заголовки и основной текст просматриваются заранее на реальном русском тексте
• Буквы ж, щ, ъ, ы, э проверяются в нескольких размерах
• Полужирное начертание проверяется на тех же символах
• Читаемость при маленьком мобильном размере тестируется отдельно

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

В традиционной настройке каждое начертание шрифта (тонкое, обычное, жирное) — отдельный файл; переменный шрифт (variable font) несёт все начертания в одном файле, и браузер генерирует нужное начертание именно из него. Это означает одну загрузку вместо пяти-шести.

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

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

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

Эта настройка касается не только таблиц; та же разница видна везде, где числа сравниваются рядом друг с другом — в прайс-листе, в отображении даты и времени.