Типографика в вебе

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

Немного терминологии

Оптимизируем типографику

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

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

Следим за длиной строки. Выбирая ширину текста, следует ориентироваться не на дизайн, а на понятность и четкость написанного. Если строка слишком короткая, читатель будет часто менять фокус, что собьет его с ритма. Если строка, наоборот, чересчур длинная — глазам придется слишком долго фокусироваться на написанном. Оптимальная длина строки текста для сайта — 50−60 символов вместе с пробелами. Допустимо значение в 75 символов. Что касается смартфонов, типографы рекомендуют придерживаться объема 30−40 знаков в одной строке.

Выбираем гарнитуру. При выборе гарнитуры текста стоит помнить, что пользователь может заходить на ваш сайт с разных устройств. Текст должен быть читабельным в любом размере. Убедитесь, что гарнитура легко читается даже на самых маленьких экранах. Старайтесь свести на минимум использование сложных курсивных шрифтов, таких как Vivaldi. Пусть они и красивы, но часто сложночитаемы для большинства пользователей. И обращайте внимание на четкость букв, в особенности если верстаете текст на латинице. В некоторых шрифтах разные буквы могут быть очень похожи. Проще всего проверить четкость шрифта, написав буквы «I» и «L» рядом — например, в слове Illusion. Если слово читается, шрифт можно брать в работу.

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

Играем на контрастах. Не используйте одну и ту же цветовую гамму для оформления фона и цвета шрифта. Чем лучше виден текст, тем быстрее пользователи прочтут его и поймут написанное. Коэффициент контраста по отношению к фону в небольших текстах должен быть равен пропорции 4,5:1. Большие тексты (от 14 кегля полужирным шрифтом / от 18 кегля стандартным шрифтом) должны иметь коэффициент контраста по отношению к фону минимум 3:1.

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

И напоследок

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

Подготовила Полина Весна
Share дополнительных материалов с благодарностью у: topics, habr, uxplanet, quickandlazy, baymard

ПОЛЕЗНЫЕ МАТЕРИАЛЫ

Попробуй не заблудиться: подборка крупных карт метрополитена, которые можно рассматривать бесконечно

Сделали подборку из интересных и масштабных схем метро, которые являют собой яркий пример дизайнерского мастерства

«Дизайнер должен постоянно учиться, уметь адаптироваться, быстро осваиваться в изменяющейся среде»

Новый лидер Факультета дизайна Яша Файбисович рассказал нам о планах факультета, своем дизайнерском пути и о том, почему «пятерка» при оценке работы не так важна, как фидбэк

Творческий подход, или чего боятся и не знают многие

Дизайн-мышление в последнее время набирает все большую популярность при решении поставленных задач — начиная с обучения и заканчивая развитием крупного бизнеса. Много реальных примеров работы дизайн-мышления было описано и показано. Много известных брендов уже применили и применяют эту систему при разработке и продвижении своих продуктов и делятся своим опытом: Сбербанк, «Шоколадница», ВТБ, Netflix и другие.