Важность типографики
в веб-дизайне
Веб-интерфейсы оказывают огромное влияние на нашу жизнь. При взаимодействии с интерфейсом мы окружены типографикой, и наш опыт определяют слова и смыслы, которые мы читаем. В одной из своих статей Оливер Райхенштейн подтверждает важность типографики на сайтах следующим утверждением:
Веб-дизайн — это на 95% типографика.
Очень важно знать, как работает типографика, потому что это один из самых важных инструментов донесения чётких и эффективных сообщений. С помощью типографики можно привлечь и расположить людей, передать характеристики бренда. Цель этой статьи — помочь владельцам сайтов понять, как работать с типографикой, чтобы создавать отличные интерфейсы.
Типографика, бренд и пользователи
Когда пользователь взаимодействует с интерфейсом, он фактически взаимодействует с брендом. Чтобы оптимизировать взаимодействие с пользователем, шрифты должны соответствовать тону и голосу бренда. MailChimp является одним из лучших примеров, иллюстрирующих эту концепцию. Они выбрали для заголовков шрифт под названием «Cooper light». Этот шрифт имеет индивидуальность и передает дружественный посыл, заявленный брендом.
Люди приходят на сайт не для того, чтобы наслаждаться дизайном, а чтобы читать контент. Поэтому важно при выборе шрифта понимать, что должен чувствовать пользователь. Хотите ли вы, чтобы они чувствовали себя расслабленными, счастливыми или взволнованными? Когда вы выбираете шрифт, начните с составления списка слов, которые напоминают голос вашего бренда. Это поможет вам описать чувства и настроения, которые вы хотите отразить, с помощью шрифтов для текстов в вашем дизайне. Понимая взаимосвязь между типографикой, пользователями и брендом, вы сможете с выбрать лучший шрифт, который поможет вашему сайту достичь своей цели.
Выбор правильного шрифта
Чтобы выбрать правильный шрифт, важно учитывать контекст и назначение шрифта в интерфейсе. На сайте обычно используют 2-3 разных шрифта. Шрифты нужно подбирать в зависимости от типа текста (заголовок, основной текст, ссылки, призыв к действию). Выбирать шрифт стоит, учитывая оптимизацию для разных устройств: если шрифт будет слишком мелкий или сложный, возможно, его будет трудно читать с мобильных устройств.
Для поиска шрифтов можно изучить Google Font или Adobe Fonts (Typekit). Обе платформы предоставляют выбор высококачественных шрифтов. Стоит избегать использование шрифтов от бесплатных или неизвестных ресурсов, так как часто они плохо протестированы. При работе с типографикой, есть два основных принципа, которые нужно знать, чтобы сделать контент доступным: читабельность и разборчивость. И это не одно и то же.
Разборчивость — это когда читатель различает буквы при чтении. Вот факторы, которые способствуют разборчивости шрифта:
Отображение шрифтов
«Дисплейными шрифтами» называют те шрифты, которые предназначены для использования в большом размере. Они идеально подходят для заголовков, так как они чёткие, заметные и выделяются. Однако эти шрифты менее читабельны при меньшем размере и не должны использоваться для основного текста. Пример такого шрифта — «BEBAS NEUE».
Шрифты с засечками и без засечек
В интернете мы в основном работаем с двумя группами шрифтов: с засечками и без засечек. Традиционно, шрифты с засечками всегда были более разборчивыми и часто использовались для длинных текстов. Сейчас дизайнеры предпочитают использовать шрифты с засечками для основного текста и без засечек — для заголовков. Попробуйте несколько комбинаций и оцените, что работает лучше для вашего дизайна.
X-height
X-height (или х-высота) — важная характеристика, которую необходимо учитывать при оценке шрифта. Шрифты с большей х-высотой лучше всего подходят для основного текста. Чем выше х-высота, тем более разборчивым будет шрифт. Это важное правило, которое следует помнить.
Читабельность
Тот факт, что шрифт разборчивый, не означает, что он читабелен. Читабельность — это уровень понимания и визуального комфорта, когда кто-то читает текст. Если вы стали восхищаться шрифтом вместо чтения текста, скорее всего, этот шрифт не читается. Вот два примера, чтобы раскрыть этот тезис:
Высота линии
Высота линии — это пространство между строчками в блоке текста. Идеального расстояния здесь не существует, потому что каждый шрифт отличается. Тем не менее, хорошая отправная точка находится между 1,2 и 1,8. Небольшая высота строки может затруднить чтение текста, поскольку строки будут расположены слишком близко друг к другу.
Межстрочный интервал
Межстрочный интервал — это расстояние между абзацами. Всегда сохраняйте интервал между абзацами от 0,75 до 1,25.
Размер
Размер имеет значение при работе с типографикой. Вы должны быть уверенными, что контент доступен для чтения людьми всех возрастов. Наименьший размер — 16px или 1em. Шрифт должен быть достаточно большим, чтобы его было удобно читать. При просмотре веб-сайта люди могут быть заняты или спешить, поэтому важно, чтобы контент был понятным.
Ширина абзацев
Другая практика, которая улучшает читабельность — не размещать текст слишком широко, чтобы он был не на весь экран. Если строка слишком длинная, это вызывает усталость у пользователя и рассеивает внимание. Установите длину строки максимум от 40 до 70 символов.
Иерархия и контраст
Хорошая контрастность текста важна для удобства чтения. Это важный принцип, который нужно понимать при создании контента сайта. Так же текст лучше делить на блоки, чтобы улучшить восприятие пользователями.
Заключение
Как только вы поймете эти принципы и освоите типографику для веб-ресурсов, ваш дизайн станет более эффективным и привлекательным, поскольку типографика — это контент, а контент — это UX. Обязательно помните, что главная цель — не сделать сайт красивым, а сделать его удобным для пользователей. Текст должен направлять читателя на совершение целевых действий.
По мотивам статьи: Medium