Коммуникация играет жизненно важную роль в дизайне – необходимо установить четкую связь между веб-сайтом и пользователем и помочь посетителям сайта достичь своих целей. Когда мы говорим о коммуникации в контексте веб-дизайна, мы обычно имеем в виду текст. Типография играет важнейшую роль в этом процессе: более 95% информации в Интернете представлено в письменной форме. Хорошая типография делает чтение легким, а плохая – отпугивает пользователей.
Оптимизация типографики оптимизирует читабельность, доступность, удобство использования, общий графический баланс. Другими словами, оптимизация вашей типографии также оптимизирует ваш пользовательский интерфейс. В этой статье будет рассмотрен набор правил, которые помогут вам улучшить удобочитаемость вашего текстового содержимого.
1. Сохраняйте минимальное количество используемых шрифтов.
Использование более 3-х различных шрифтов делает сайт неструктурированным и непрофессиональным. Имейте в виду, что слишком большое количество размеров и стилей одновременно может испортить любой макет.
В общем, ограничьте количество семейств шрифтов до минимума (двух достаточно, одного часто достаточно) и придерживайтесь одинаковых на всем сайте. Если вы используете более одного шрифта, убедитесь, что семейства шрифтов дополняют друг друга в зависимости от ширины символов. Возьмите пример комбинаций шрифтов ниже.
Сочетание Джорджии и Верданы (слева) имеют сходные значения, что создает гармоничное сочетание. Сравните это с сочетанием Баскервиля и Импакта (справа), где тяжелый вес Импакта значительно затмевает его засечку.
2. Попробуйте использовать стандартные шрифты
Сервисы встраивания шрифтов (такие как Google Web Fonts или Typekit ) содержат много интересных шрифтов, которые могут придать вашим дизайнам что-то новое, свежее и неожиданное.
Они также очень просты в использовании. Взять, к примеру, Google:
- выберите любой шрифт, например Open Sans
- сгенерируйте код и вставьте его в < HTML> документа HTML
- выполнено!
Так что может пойти не так?
На самом деле, у этого подхода есть одна серьезная проблема - пользователи лучше знакомы со стандартными шрифтами и, таким образом, могут читать их быстрее.
Если ваш веб-сайт не нуждается в особом шрифте, например, для целей брендинга или для создания захватывающего впечатления, обычно лучше придерживаться системных шрифтов. Безопасной ставкой является использование системного шрифта: Arial, Calibri, Trebuchet и т.д. Имейте в виду, что хорошая типография привлекает читателя к контенту, а не к самому типу.
3. Предельная длина линии
Наличие правильного количества символов в каждой строке является ключом к удобочитаемости вашего текста. Это не должен быть ваш дизайн, который определяет ширину вашего текста, это также должно быть вопросом разборчивости.
У вас должно быть около 60 символов в строке, если вы хотите получить хороший показатель чтения.
В веб-дизайне вы можете достичь оптимального количества символов в строке, ограничивая ширину ваших текстовых блоков, используя em или пиксели.
4. Выберите шрифт, который хорошо работает в различных размерах
Пользователи будут получать доступ к вашему сайту с устройств с различными размерами экрана и разрешениями. Большинству пользовательских интерфейсов требуются текстовые элементы разных размеров (кнопки, метки полей, заголовки разделов и т.д.). Важно выбрать шрифт, который хорошо работает в разных размерах и весах, чтобы поддерживать удобочитаемость и удобство использования в любом размере.
Убедитесь, что выбранный вами шрифт читается на маленьких экранах! Старайтесь избегать шрифтов, которые используют рукописные шрифты, такие как Vivaldi (в приведенном ниже примере): хотя они красивы, их трудно читать.
5. Используйте шрифты с хорошо различаемыми буквами
Многие шрифты слишком легко путают похожие буквы, особенно с «i» и «L» (как показано на рисунке ниже), и с плохим межбуквенным интервалом, например, когда «r» и «n» выглядят как «м». Поэтому, выбирая свой тип, обязательно проверьте его в разных контекстах, чтобы убедиться, что он не вызовет проблем у ваших пользователей.
6. Избегайте всех заглавных букв
Текст заглавных букв — то есть текст со всеми заглавными буквами - это хорошо в условиях, которые не связаны с чтением (такие как аббревиатуры или логотипы), но когда ваше сообщение связано с чтением, не заставляйте своих пользователей читать весь текст заглавных букв. Печать с большой буквы значительно снижает скорость сканирования и чтения по сравнению со строчными буквами.
7. Не минимизируйте расстояние между линиями
В типографии у нас есть специальный термин для обозначения интервала между двумя строками текста - интерлиньяж (или высота строки). Увеличив интерлиньяж, вы увеличиваете вертикальное пустое пространство между строками текста, в целом улучшая читабельность текста в обмен на экранную недвижимость. Как правило, высота строки должна быть примерно на 30% больше высоты символа для хорошей читабельности.
Доказано, что правильное использование пробелов между абзацами увеличивает понимание текста до 20%, как указал Дмитрий Фадеев. Умение использовать пустое пространство заключается в предоставлении пользователям удобоваримого количества контента, а затем в удалении посторонних деталей.
8. Убедитесь, что у вас есть достаточный цветовой контраст
Не используйте одинаковые или похожие цвета для текста и фона. Чем лучше виден текст, тем быстрее пользователи могут его сканировать и читать. W3C рекомендует следующие коэффициенты контрастности для основного текста и текста изображения:
- Маленький текст должен иметь контрастность не менее 4,5: 1 на фоне.
- Большой текст (жирный шрифт 14 pt / обычный 18 pt и выше) должен иметь контрастность не менее 3: 1 на фоне.
После того, как вы сделали свой выбор цвета, абсолютно необходимо проверить его в реальных условиях на большинстве устройств. Если в каком-либо из тестов обнаружится проблема с чтением текста, вы можете быть уверены, что у ваших пользователей возникнет точно такая же проблема.
9. Избегайте окраски текста в красный или зеленый
Дальтонизм является распространенным заболеванием, особенно среди мужчин (8% мужчин являются дальтониками), поэтому рекомендуется использовать другие сигналы в дополнение к цвету, чтобы различать важную информацию. Кроме того, избегайте использования только красного и зеленого цветов для передачи информации, потому что красный и зеленый цвет слепоты является наиболее распространенной формой дальтонизма.
10. Избегайте использования мигающего текста
Содержимое, которое мигает или мерцает, может вызвать судороги у восприимчивых людей. Мало того, что это может вызвать судороги, но это может раздражать или отвлекать пользователей в целом.
Вывод
Типография-это большое дело. Правильный выбор типографики может придать вашему сайту ощущение свежести и полировки. С другой стороны, плохой выбор типографики отвлекает от содержания текста, увеличивая когнитивную нагрузку пользователя. Важно сделать типографику читабельной, понятной и разборчивой.