Как играть со шрифтами и не проиграть: всё про шрифтовые пары

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

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

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

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

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

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

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

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

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

3. Рассчитать бюджет проекта. Если бюджет позволяет разработать уникальные шрифты или купить лицензии на уже существующие, лучше использовать этот вариант — он поможет проекту выделиться среди конкурентов. Если бюджета на шрифтовые решения нет, то нужно обращаться к бесплатным библиотекам, например, Google Fonts, MyFonts, категории «Бесплатные шрифты» у Paratype.

Можно использовать системные шрифты Windows и macOS, встроенные шрифтовые библиотеки на конструкторах сaйтов Tilda и Readymag.

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

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

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

Александра Королькова, арт-директор Paratype и автор книги «Живая типографика», советует отталкиваться от ограничений, которые стоят перед дизайнером:

● Мало места. Если площадь поверхности ограничена, лучше искать узкие шрифты или шрифты с короткими выносными элементами.

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

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

● Низкое разрешение, например, газеты или экраны с пикселями. Чтобы буквы были видны чётко, у шрифтов должен быть упрощённый рисунок, без изящных деталей, и большое межбуквенное расстояние. Хорошо будут смотреться шрифты, где строчные буквы выглядят крупно относительно прописных. Если подбирается гротескный шрифт, то контрастность, или отношение горизонтальных штрихов к вертикальным, должна быть 1:1. В случае с антиквой контраст нужен в соотношении 1:2.

● Длинный текст. Шрифтовые композиции для текстов большого объёма — это привычная антиква для кириллицы, гарнитуры «Обыкновенная», «Литературная», Newton, и готические шрифты для иностранных текстов.

● Незнакомые слова, например, промокоды, компьютерный код, географические названия. Для таких случаев в шрифтовом наборе нужно отслеживать разницу между похожими по форме знаками. Например, между 1 и l (англ. буква «эль»), 0 и О, I (англ. буква «ай») и l (англ. буква «эль»).

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

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

● Протестировать на носителе. Как выбранный шрифт будет смотреться на экранах с разными операционными системами и разрешениями. macOS сама растрирует шрифты для интерфейсов, благодаря встроенным в неё алгоритмам. Windows так не умеет. Большая часть экранов компьютеров и ноутбуков у пользователей от Windows с невысоким разрешением, поэтому тестирование для этой ОС обязательно.

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

Александра Королькова охарактеризовала основные шрифтовые категории с точки зрения эмоциональной составляющей:

● Узкий — интеллектуальный образ, собранный.
● Широкий — уверенный, нахальный, требующий внимания.
● Неконтрастный — практичный, спортивный, демократичный.
● Контрастный — изящный, благородный, дорогой.
● Округлый — мягкий, детский, съедобный, дружелюбный.
● Угловатый, геометрический — жёсткий, серьёзный, несъедобный.

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

Гарнитуры Manrope — это современная классика, особенно в сочетании Regular и Bold или Extra Bold.

Ещё одно интересное решение — Trocchi и Source Sans Pro. Есть умеренный контраст, который позволяет отделить заголовки и наборный текст.

Для проектов и заголовков на английском языке подойдёт гарнитура SAOL. Её можно соединить с Helvetica, Lato, Open Sans, Alegreya Sans, Georgia.

Шрифтовые пары из двух гарнитур для веб-дизайна — Oswald и Lato, Oswald и Open Sans, Oswald и Helvetica. Oswald лучше использовать как заголовочный, а не текстовый, и в проектах на латинице, потому что в кириллице есть недочёты в отображении букв.

Сочетание Playfair Display с PT Sans, Open Sans или Lato создаёт контрастную пару.