Шрифтовые пары: критерии подбора, онлайн-сервисы и лучшие комбинации шрифтовых пар

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

Основы типографики

Для начала давайте познакомимся с терминами, которые помогут сориентироваться в теме:

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

Пример разных начертаний шрифта

• Засечки — короткие штрихи на концах букв.

Пример шрифта с засечками

• Апертура — открытость букв. 

Взгляните на букву С. Если она больше похожа на полукруг, апертура большая, если она почти замкнутая, апертура маленькая.

Буквы с разной апертурой

Это не просто термины, а основные характеристики, которые стоит учитывать при составлении шрифтовых пар.

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

Серифные (serif). Такие шрифты еще называют антиква. Их легко узнать по небольшим засечкам на концах букв.

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

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

На сайте The Next Rembrandt использованы шрифты с засечками

К серифам относятся:

• Times New Roman
• Georgia
• Cambria
• Verdena
• Playfair Display

Без засечек (sans-serif). Эти шрифты также известны как гротески. Они довольно универсальны, поскольку смотрятся минималистично и современно. Однако считаются менее читабельными, чем антиква. По этой причине их используют в основном для заголовков.

На сайте проекта KOTI Sleepover заголовки написаны гротеском

К шрифтам без засечек относятся:

• Arial
• Helvetica
• Tahoma
• Roboto
• Open Sans

Рукописные (handwritten). Это шрифты, которые имитируют текст, написанный от руки. 

Согласно исследованию, они помогают сделать продукт или бренд более «человечным» и увеличить продажи гедонистических товаров и услуг. Например, еды, одежды и товаров для дома.

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

Пример использования рукописного шрифта на лендинге Yummy Ice

К рукописным шрифтам относятся: 

• Bad Script
• Caravan
• Carolina
• Celestina
• Magnolia Script

Моноширинные (monospace). Это шрифты, в которых каждая буква занимает одинаковое количество места в строке. Они легко читаются и хорошо смотрятся в небольших текстовых блоках.

Традиционно моноширинные шрифты применяют в программировании для написания кода. Из-за ассоциации с IT-сферой их часто используют для оформления сайтов digital-проектов. 

Пример моноширинного шрифта на сайте Evolve Wealth

К моноширинным шрифтам относятся:

• Courier New
• Halvar
• Lucida Console
• Monaco
• PT Mono

Что такое шрифтовые пары

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

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

Шрифтовые пары выполняют на сайте сразу несколько важных функций:

• Структурируют информацию. Обычно текстовый блок состоит из заголовка, который передает главную мысль, и небольшого абзаца, который ее раскрывает. Заголовок выделяют более крупным кеглем или жирным начертанием, чтобы сделать его заметнее. Ознакомившись с ним, человек принимает решение: читать текст, расположенный ниже, или нет. С помощью заголовков посетители могут легко ориентироваться в контенте, размещенном на сайте. Чтобы найти нужный раздел, пользователям достаточно быстро пробежать страницу глазами.
• Управляют вниманием пользователей. Шрифтовые пары используются для того, чтобы привлечь внимание посетителей к ключевым фразам. С их помощью можно выделить важную информацию, например, УТП (уникальное торговое предложение). 
• Задают тематику и настроение. Каждый шрифт обладает своим характером и вызывает разные ассоциации. Например, одни смотрятся романтично и отлично подходят для цветочных интернет-магазинов, а другие выглядят динамично — то, что нужно для сайтов фитнес-центров.
• Украшают сайт. Шрифты являются важным элементом дизайна. Они должны гармонировать с фотографиями и иллюстрациями, соответствовать цветовой гамме проекта. С помощью шрифтов можно разнообразить оформление и сделать проект более ярким и запоминающимся.

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

Критерии подбора шрифтовых пар

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

Правило контрастов

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

Пример сочетания антиквы и гротеска на сайте Adjuvant Capital

Можно поставить в пару шрифты с разной высотой или шириной букв. Такое сочетание поможет сделать текст более экспрессивным и эмоциональным.

Пример сочетания шрифтов разной ширины на сайте Van Holtz Co

Правило подобия

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

Пример использования одного шрифта с разными начертаниями — шаблон «Итальянская пицца» в конструкторе Craftum

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

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

Пример сочетания 2-х гротескных шрифтов на сайте Rijksmuseum

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

• Рукописные — романтика, дети, элегантность.
• Антиквы — традиции, доверие.
• Узкие (Myriad Pro, Oswald, Compact) — собранность, интеллект.
• Широкие (Syne Extra, Space Grotesk, Gotham Book) — уверенность, спокойствие, размеренность.
• Плавные (Comfortaa, Ossem Rounded, Souvenir) — дружба, дети, забота.
• Угловатые (Saira, Velta, AC Line) — энергия, успех.
• Геометрические (Bicubik, Modernia, Fractul) — технологии.

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

Еще один важный нюанс при выборе шрифтовой пары для сайта — это бюджет проекта. Если на создание сайта выделено достаточно средств, можно разработать для бренда уникальный шрифт или купить лицензию на уже существующий. Если бюджет ограничен, можно подобрать что-то в бесплатной библиотеке шрифтов, например, AllFont.ru или MyFonts (сервис не работает в России без VPN).

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

Особенности подбора шрифтовых пар в кириллице

Большинство дизайнеров хотя бы раз сталкивались с ситуацией:

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

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

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

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

Самая известная панграмма: «Съешь еще этих мягких французских булок, да выпей же чаю». Больше примеров можно найти в статье «Панграммы» от Артемия Лебедева.

Где можно скачать удачные шрифтовые пары? Кириллица широко представлена в библиотеках Google Fonts и ParaType. Также красивый кириллический шрифт можно найти в тематических телеграм-каналах. Например, «Бесплатные шрифты».

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

Блок для редактирования текста в конструкторе Craftum

Лучшие шрифтовые пары

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

Bebas Neue и Open Sans

Bebas Neue легко узнать по узким и высоким буквам. Его можно использовать для заголовков, а также с целью выделить информацию о скидках и акциях, времени или месте проведения мероприятия. 

Open Sans гармонирует с Bebas Neue за счет букв, слегка вытянутых по высоте. Он легко читается благодаря простым линиям и часто используется для основного текста.

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

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

Логотип компании Netflix написан шрифтом Bebas Neue

Yeseva One и Noto Sans

Название шрифта Yeseva One происходит от фразы «да, Ева». Он смотрится мягко и женственно за счет плавных изгибов и засечек. Подходит для заголовков на сайтах студий красоты, SPA-салонов, магазинов женской одежды и косметики. Шрифт Noto Sans его отлично уравновешивает за счет более прямых линий и отсутствия засечек.

Montserrat и Georgia

 

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

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

Bangers и Contrail One

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

Contrail One — более нейтральный шрифт, которым можно написать основной текст. За счет небольшого наклона букв и закругленных углов он хорошо сочетается с Bangers.

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

NY Irvin и Adobe Caslon

NY Irvin разрабатывался специально для газеты New York Times. Он отражает дух эпохи Возрождения. Шрифт Adobe Caslon, в свою очередь, был создан еще в 1722 году и активно использовался в Британской империи. С тех пор он несколько раз видоизменялся, но сохранил дух того времени и впитал в себя сдержанность, характерную для англичан.

Такая шрифтовая пара отлично подойдет для оформления исторических проектов и сайтов музеев.

Ошибки при выборе шрифтовых пар 

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

Ошибка №1. Слишком много шрифтов

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

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

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

Ошибка №2. Выбор шрифтовой пары не соответствует бренду

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

Шрифт Papyrus

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

Ошибка №3. Шрифты слишком нейтральные

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

Как избежать такой ситуации? Для заголовков используйте более жирное начертание или больший размер букв, чем у основного текста.

Ошибка №4. Шрифты слишком экспрессивные

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

Старайтесь находить баланс. Выберите один необычный шрифт и уравновесьте его более нейтральным.

Не сказать, что образ A$AP Rocky на Met Gala 2023 был нейтральным, но в какой-то мере «успокаивал» лук Рианны.
Источник: Spletnik

Ошибка №5. Шрифты слишком креативные

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

Карамель или каратель? Источник: Pikabu

Онлайн-сервисы для подбора шрифтовых пар

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

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

Интерфейс программы Fontjoy

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

Сервис Mixfont показывает, как шрифтовая пара будет смотреться на сайте

Fontpair. Программа использует шрифты только из бесплатной библиотеки Google Fonts. Готовые комбинации здесь встроены в макеты веб-страниц — вы можете оценить, как они будут смотреться на сайтах с разной тематикой, в разных блоках и в разной цветовой гамме.

Примеры сайтов с разными шрифтовыми парами из каталога сервиса Fontpair

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

Эта карточка сообщает, что шрифт Poppins отлично подходит для стартапов

Typespiration. Еще один инструмент, который работает на основе Google Fonts. Программа помогает подбирать шрифтовые пары и подходящие для них цветовые схемы. 

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

Интерфейс сервиса Typesiration

Fonts In Use. Все шрифты в этом сервисе разбиты по категориям. Например, искусство, дети, спорт, технологии, музыка и многие другие. Можно настроить поиск по формату использования шрифта: для сайта, рекламного баннера, афиши и так далее.

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

Интерфейс программы Fonts In Use

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

Сервис удобен для тех, кто работает в программах Photoshop или Illustrator. Он позволяет интегрировать любой из 20 000 шрифтов во все приложения семейства Adobe за один клик.

Наборы шрифтов в Adobe Fonts

Typotheque. Генератор подбирает пары на основе выбранных вами характеристик. Вы можете задать язык текста, цель шрифта, пропорции, настроение и другие параметры. Также можно указать стиль, например, сериф, гротеск или моноширинный.

Интерфейс сервиса Typotheque. Чтобы выбрать шрифт, можно указать, какие он должен вызывать чувства

Заключение

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

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

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