Типографика на сайте – это не просто выбор шрифта, а набор правил оформления текста. Они основаны на том, как пользователь воспринимает текст на сайте, чтобы для этого не пришлось прикладывать усилия. Грамотная типографика решает задачи композиции и айдентики бренда, сохраняя его характер. С помощью карточек объясняем, почему это важно.
У меня уже есть шрифт в бренд-буке. Зачем мне что-то еще?
Шрифты, заданные в брендбуке, подходят для печатных материалов, но не для текста интернете. Большинство брендовых шрифтов можно использовать только в заголовках. Для корректного отображения в браузере и удобства чтения используются системные шрифты Arial, Georgia, Verdana.
Также важен и цвет шрифта, это дополнительный параметр, появившийся именно в диджитал-среде. Чтобы приблизить диджитал-типографику к реальному читательскому опыту, обычно делают облегченную версию, например, в монохроме. Черный цвет сложно получить на мониторе, и он слишком контрастный по отношению к фону, что может вызвать дискомфорт. Тогда шрифт делается не черным, а, например, темно-синим.
Грамотная типографика на сайте выражает индивидуальность продукта, становится частью коммуникации и пользовательского интерфейса.
С чего начать?
Начните с двух основных принципов типографики – удобочитаемости и характера. Графический и веб-дизайнер Руниу Ксия (Runyu Xia) в своей статье «Что начинающий дизайнер должен знать о типографике» рассказывает, как эффективнее донести информацию до аудитории. Удобочитаемость во многом формируется благодаря принципу контраста, который складывается из многих аспектов, включая размер, вес, цвет шрифта. Ключевую информацию мы выносим вперед. Например, если нам нужно выделить заголовок, мы можем усилить контраст либо выделив заголовок, либо «размыв» вид всего остального. Нечеткая иерархия разрушит читательский опыт и будет отвлекать внимание аудитории.
Второй важный фактор при создании типографики – это характер, который касается в основном внешнего вида шрифта. Выбор «правильного» шрифта может вывести всю типографику на новый уровень и делает весь стиль консистентным. Для элегантного и люксового бренда можно выбрать шрифт с засечками, а для компании, которая занимается технологиями, больше подойдет шрифт без засечек.
Все понятно, и где брать шрифты?
Если вы хотите добавить в свой дизайн что-то более необычное, чем Roboto и Arial, можно обратиться к сервисам со шрифтами, таким как Google Web Fonts или Typekit. Главное сфокусироваться на том, чтобы максимально понятно и точно донести информацию до аудитории, поэтому здесь удобочитаемость становится критической точкой для типографики.
Я выбрал шрифт, что дальше?
Подбор шрифта – это только часть работы. Важно то, как его использовать. Верная направленность, расстояние между словами и буквами, цвета помогает улучшить удобочитаемость.
Все начинается с бренд-шрифта, на котором строится айдентика бренда. Основной шрифт уже обычно имеет характер, поэтому дополнительный шрифт для сайта должен быть комплементарным, чтобы не возник конфликт. При выборе подходящего шрифта важна кроссбраузерность, а соотношения интерильяжа и кегля обычно уже известны.
Правила, рассчитанные для книг 200–300 лет назад перекочевали в диджитал, а для всех новых шрифтов существуют веб-версии. В библиотеке можно найти и необычный шрифт, его цена будет зависеть от объема и популярности сайта.
А что со смартфонами?
Все зависит от того, откуда на ваш сайт приходят клиенты. Если кроме десктопа и смартфона нужен планшет, под каждое разрешение мы подбираем уникальный размер и соотношение кегля и интерлиньяжа. Базовый стиль (гарнитура, стиль, интерлиньяж) для каждого из разрешений корректируется исходя из задач сайта и бизнеса. Все элементы интерфейса – заголовки, подписи на кнопках, меню должны легко адаптироваться под все устройства размеры экранов и, поэтому важно выбрать ту гарнитуру, которая будет хорошо выглядеть, и оставаться читабельной в любом размере.
На что еще ориентироваться при выборе шрифта?
В типографике тоже есть тренды. На 2018 год команда журнала для дизайнеров и разработчиков Awwwards выделяет жирный шрифт с засечками, иллюстрированные и 3D-шрифты, а также обрезанные и обработанные гарнитуры с анимированными и более «живыми» буквами.
Общий тренд в дизайне — это минимализм, использование меньшего количества цветов, акцентов, меньший размер логотипов. Сейчас роль шрифта для айдентики бренда выросла, он стал вторым по значимости элементом после логотипа. Цвета, логотип и прочие атрибуты бренда в гармонии и создают уникальную дизайн-систему.
На тренды в типографике повлияла диджитал-трансформация: у шрифтов, раньше существовавших только оффлайн, появляются веб-версии, у которых нет понятия начертания. Они адаптируются уже не под сетку, а под пиксель и могут меняться в очень широких пределах, не затрагивая расстояния между буквами и словами. С таких адаптивных шрифтов начинается история веб-шрифтов, которые не смогут попасть на бумагу никогда.
Как еще быстро улучшить типографику?
Проработка заголовков. Если речь идет не о СМИ, где публикуются новости и лонгриды, наборный текст будет менее важен, чем заголовки, по которым должен кликнуть пользователь. Для этого выбирается шрифт с большим контрастом между заголовком и наборным текстом. Для сайта нужно 4 типа заголовков по высоте от h1 до h4. При подборе эти стили тестируются между собой на разных блоках (промо, информационные, анонсы статьей). Получаются наметки системы, которую мы потом тестируем и при необходимости корректируем.
C помощью контента. В работе над макетом дизайнерам и верстальщика не всегда удается сразу использовать финальный текст, поэтому приходится вставлять «рыбу». Для русскоязычных сайтов мы рекомендуем генерировать текст на кириллице, а не использовать Lorem ipsum, поскольку кириллица более размашистая и менее аккуратная, а текст латиницей не даст реального представления о том, как на странице будет выглядеть финальный контент.
А покажете, как это работает?
У нашего агентства есть отточенный процесс работы. Все начинаем с бренд-шрифта, к которому мы подбираем комплементарный шрифт. Здесь главные критерии – это его кроссбраузерность, адаптивность и читаемость. Дальше для бренд-шрифта и комплементарного шрифта подбираются стили, а для каждого стиля индивидуальный интерлиньяж и кегль. Так складывается система типографики. Потом выбранные стили вписываются в структурную сетку сайта и тестируются.
У нас стояла нетривиальная задача для проекта Альфа-Тревел – это сервис покупки путешествий за мили. У этого сайта две равнозначные функции: с одной стороны, это модный промосайт с крупной типографикой, которая должна кричать о продукте, а с другой – сервис, заточенный на конверсию. Помимо функциональности сервис Альфа Тревел должен быть по стилю ассоциироваться с родительской компанией — Альфа-Банком. Поэтому для заголовков мы использовали основной шрифт Альфа-Банка. Основной шрифт бренда ультрасовременный, у него тонкие начертания, как у шрифта Apple. Нам удалось объединить эти черты в адаптивной типографике и соблюсти принцип удобочитаемости.
Заключение
Типографика для сайта должна в равной степени учитывать особенности бренда и удобство пользователя. В первую очередь для большинства брендов и СМИ в фокусе удобочитаемость, чтобы глаза не уставали от чтения лонгридов, пользователь не отвлекался и взгляд правильно переходил со строки на строку. В результате пользователь проецирует свой опыт использования сайта на бренд в целом.