Типографика: 7 идей для ваших проектов

Продуманная типографика играет ключевую роль в том, как будет представлен ваш бренд и сообщение.

Исследования показывают, что шрифты влияют на наши эмоции, на то, насколько хорошо мы запоминаем информацию, и даже на то, как мы ощущаем вкус определенных продуктов. 

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

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

Но на первом месте читабельность, и лишь потом брендинг. Вы не сможете привлечь клиентов, если они не поймут, что вы предлагаете.

3 способа повысить читабельность цифрового текста

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

Когда вы верстаете текст для людей, которые быстро его сканируют, читабельность имеет первостепенное значение. Понятный разборчивый шрифт улучшает опыт пользователей (UX) — именно поэтому типографика является одним из фундаментальных элементов визуального дизайна.

Вот несколько советов, которые помогут сделать текст на вашем сайте более читабельным.

1. Выберите разборчивый шрифт и настройте его, чтобы повысить читабельность

Разборчивость — характеристика дизайна шрифта. Это высота и ширина символов (или глифов), начертание (нормальное, полужирное, сверхтонкое) и другие особенности формы букв, например, засечки — дополнительные выступы на концах букв в таких шрифтах, как Times New Roman и Georgia.

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

Чтобы добиться максимальной разборчивости, выбирайте шрифты с большими интервалами между буквами (кернинг) и избегайте использования тонких и ультратонких начертаний в основном тексте. Хотя шрифты с засечками изначально были разработаны для повышения читабельности печатных текстов, шрифты без засечек, такие как Verdana и Helvetica, выглядят более разборчивыми на экране.

Читабельность — это то, как расположен шрифт на странице. На нее влияют размер шрифта, длина и высота строки, цветовой контраст и регистр (верхний или нижний).

Чтобы максимально повысить читабельность основных абзацев, выбирайте умеренный размер шрифта и обеспечьте высокий цветовой контраст между текстом и фоном. Установите длину строки в районе 50-75 символов, а межстрочное расстояние — 120-145% от размера шрифта. Избегайте использования заглавных букв, так как такой подход фактически стирает различия между символами, и читателю может показаться, что вы кричите на него. 

2. Оптимизируйте текст для разных устройств

Экраны компьютеров гораздо больше экранов мобильных устройств, как и расстояние до глаз пользователя, поэтому для них подходят более крупные шрифты. Старайтесь использовать шрифт размером 16-20px на компьютерах и 12-16px на мобильных устройствах для основного текста.

Отзывчивый дизайн позволяет работать с относительными размерами шрифта (em), а не с абсолютными (пиксели). В этом случае вы можете быть уверены, что ваш текст останется читабельным на всех устройствах. 

3. Проектируйте с учетом доступности

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

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

Типографика в веб-дизайне: 7 идей

Ориентируйтесь на эти примеры хорошей типографики, когда будете экспериментировать с оформлением текста в своем следующем проекте.

1. Заявите о себе, разместив выразительный текст на первом экране

Хотя текстовые веб-сайты в наши дни встречаются нечасто, первые экраны с текстом становятся все более популярными.

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

На сайте компании Ordinary Folk, специализирующейся на дизайне и анимации, предпочтение отдается одному шрифту без засечек в обычном начертании и черно-белой цветовой палитре. Такой минималистичный старт действует как стакан воды перед дегустацией: когда посетители прокручивают страницу вниз и видят яркие цветные изображения в разделе "Лучшие проекты", оттенки кажутся еще более живыми и впечатляющими.

2. Оживите интерфейс при помощи заливки текста

Текстовая заливка, которая позволяет разместить внутри букв градиент или изображение, является одним из наиболее заметных и интересных приемов в веб-дизайне.

SuperFlow — стартап, который выпустил плагин, позволяющий дизайнерам эффективно взаимодействовать и быстро тестировать идеи. Слово "iterate" (работать итерациями) выделяется градиентной заливкой — это позволяет с первых секунд привлечь внимание посетителей к тому термину, который лучше всего доносит ценность продукта до аудитории.

Южноафриканская Illustrated Creative Studio, специализирующаяся на дизайне, моушн-графике и иллюстрациях, демонстрирует свой оригинальный, живой стиль, выбрав в качестве заливки для каждой букве в слове “creative” то или иное изображение.

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

Жирный Mango Grotesque и курсивный Winlove были выбраны для заголовков, полужирный Montserrat для меню и кнопок, а обычный Montserrat для основного текста, что в совокупности создает приятный эклектичный эффект.

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

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

3. Комбинируйте разные шрифты для расстановки акцентов

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

На сайте креативной студии Noow Design нас встречает сочетание двух шрифтов: гротеска Mabry и элегантного шрифта с засечками Ivy Presto Display. Такое решение поддерживает визуальный интерес, обеспечивая при этом высокую читаемость основной части текста (Mabry) и выделение ключевых слов (Ivy Presto Display). 

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

4. Попробуйте моноширинный шрифт

Большинство шрифтов "пропорциональны" — их буквы имеют разную ширину. В моноширинных же шрифтах, таких как Courier и Lucida Console, ширина всех букв является одинаковой. 

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

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

Архитектурное бюро Contekst использует шрифт GT America Mono и негативное пространство, чтобы придать своему сайту бруталистский вид и сделать отсылку к своей специализации. Дизайнер Phil Bastiaans не только хотел, чтобы люди прочувствовали бренд, он позаботился и о читабельности, выбрав для текста, набранного прописными буквами, моноширинный шрифт.

5. Выделяйте слова при помощи подчеркиваний и других эффектов

Подчеркивания и другие акценты могут привлечь внимание посетителей к определенным словам (пример, созданный в Webflow).

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

Кроме того, дизайнер использует шрифт нестандартным способом: текст "Planting the places where great teams thrive" (наполняем растениями места, где процветают классные команды) вращается по окружности на первом экране. Это усиливает бренд, а желтый цвет шрифта объединяет его с подчеркиваниями.

6. Отважьтесь быть не таким, как все

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

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

Подкаст Call on Courage посвящен пугающим переменам в карьере, восстановлению после тяжелой болезни и другим способам начать жизнь с чистого листа. Пузырьковый шрифт Ziclets придает сайту доброжелательность, особенно в сочетании с улыбающимися лицами ведущей и гостей подкаста на фоне. 

Кроме того, дизайнер сайта Rachael выбрала забавные эмодзи для обозначения файлов cookie, поиска и гамбургер-меню. Благодаря им интерфейс выглядит еще более привлекательным.

7. Добавьте анимированный текст

Анимированные надписи добавляют сайту игривости. Вариантов множество — появление текста, интерактивные анимации, анимированный текст с градиентом, который меняет цвет с течением времени и т.д.

Дизайнер сайта Clagru Piano Service Roland Aichhorn добавил на главную страницу 2 забавные текстовые анимации: по центру буквы заголовка "piano service" разъезжаются и снова собираются вместе, а в правом верхнем углу в тех же словах отдельные буквы перемещаются вниз и вверх, как будто кто-то нажимает на клавиши пианино.

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

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