Шрифтовые пары: устройство, методы подбора и удачные примеры

Шрифтовые пары: устройство, методы подбора и удачные примеры

Рассказываем, как создавать красивые и понятные тексты для постов, сторис и веб-страниц.

Содержание:

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

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

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

В шрифтовых парах один шрифт считается главным, а второй – дополнительным. Например, на сайте Apple шрифт SF Pro Display используется для заголовков, а основной текст набирается в SF Pro Text.

Шрифтовые пары: устройство, методы подбора и удачные примеры
Шрифтовая пара SF Pro Display и SF Pro Text на сайте Apple

Зачем нужны шрифтовые пары:

  • Управление вниманием. Разница между шрифтами позволяет разделить текст по смыслам, выделить главное и «спрятать» неважное.
  • Создание настроения. Контрастные шрифты умеют рассказывать историю и вызывать у людей эмоции, могут создать настрой и определенные ожидания.
  • Эстетика. Некоторые декоративные шрифты могут быть броскими и яркими, привлекающими внимание.

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

Как устроены шрифты

Все шрифты делятся на семейства или гарнитуры (typeface). Например, Roboto и Roboto Slab, PT Sans и PT Serif – это шрифты одной гарнитуры. Их объединяют общие характеристики графики и принципы отрисовки.

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

Среди гарнитур существует несколько основных стилей:

  • шрифты с засечками – антиква;
  • шрифты без засечек – рубленые, гротескные;
  • декоративные – акцидентные;
  • рукописные – письменные.
Шрифтовые пары: устройство, методы подбора и удачные примеры
Стили шрифтов

Сами стили предполагают различные способы начертания (font) – это градации от тонкого до жирного, с курсивом и без него.

Шрифтовые пары: устройство, методы подбора и удачные примеры
У Roboto большое количество вариантов с разными наклоном и начертанием

Шрифт можно условно разделить на 3 составляющие: каркас, насыщенность и декор.

Каркас. База, которая определяет пропорцию и форму шрифта. Например, у Rockwell каркас прописной буквы сложнее, чем у Questrial, но заглавные визуально отличаются только засечками. В декоративном шрифте Sacramento каркас принципиально иной – вытянутый и как-будто сделанный вручную.

Шрифтовые пары: устройство, методы подбора и удачные примеры
Примеры шрифтов с разными каркасами

Насыщенность. Это толщина каркаса. У некоторых шрифтов ее можно менять. Например, у Roboto девять стандартных способов начертания, а у Times New Roman – всего два. Некоторые шрифты, например Forum, изначально имеют только одну насыщенность.

Шрифтовые пары: устройство, методы подбора и удачные примеры
Начертания шрифта

Декор (аксессуар). Дополнительные элементы, которые дополняют шрифт: завитки, узоры, засечки. Существует мнение, что читать текст, который состоит из букв с засечками проще, чем без них. Но, судя по научному исследованию, это не совсем так – лучшего всего воспринимается простой Arial.

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

Читайте также: Как сделать красивый шрифт в Инстаграме*: полезные сайты и приложения.

Базовые правила подбора хорошей шрифтовой пары

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

Принцип контраста. Шрифт с засечками хорошо смотрится рядом со шрифтом без, жирные буквы – с тонкими, крупный шрифт – с мелким. Декоративные шрифты хорошо создают настроение – используя их с нейтральными (Arial, Helvetica), можно расставить акценты и привлечь внимание.

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

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

Шрифтовые пары: устройство, методы подбора и удачные примеры
Два декоративных шрифта Bilbo Swash Caps и Redressed 

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

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

Контекст. Выбор шрифта подчеркивает контекст: для булочной это может быть мягкий, толстый шрифт Pacifico, а для диджитал-агентства – более рубленный и строгий Alumni Sans.

В целом, при взгляде на шрифт, можно опираться на личные ощущения – декоративный Amatic SC выглядит дружелюбно, Didact Gothic – лаконично и официально, Stick – небрежно и легкомысленно. Подбирая шрифт под контекст его появления, вы можете усиливать впечатления или вызывать диссонанс.

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

Также учитывайте характер и объем материала – если в нем много текста, подзаголовков и заголовков, стоит использовать единую систему из 1-2 шрифтов одного семейства с разными начертаниями.

Читабельность. Читабельность и функциональность важнее красоты. Некоторые шрифты (Atmatic CS, Rubic Dirt, Rampart One) слишком перегружены деталями – если использовать их для длинных текстов, то их сложно прочитать. Проверить читабельность легко – отдалите от себя текст, и если он начинает сливаться в визуальную кашу, то шрифт лучше заменить.



Шрифтовые пары: устройство, методы подбора и удачные примеры
На первой картинке основную часть занимает декоративный шрифт Atmatic CS – его труднее читать, чем PT Sans на второй

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

Сочетать можно 2-3 шрифта разных семейств, если у них совпадают каркас и пропорции, например, как у MS Sans Serif и Lora. При этом должно быть хотя бы одно различие, но если таких различий больше 4 – шрифты несовместимы. Проверить просто – наложите два шрифта друг на друга и посмотрите, насколько они сочетаются по форме, толщине и декору.

Шрифтовые пары: устройство, методы подбора и удачные примеры
Обе пары похожи – их можно сочетать между собой

В примере ниже используются два шрифта семейства Cormorant: Unicase – в заголовке рубрики и Garamond – в заголовках товаров. Третий шрифт – Raleway – используют для описания. Они все сочетаются между собой и выглядят органично.

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

Кстати: в тексте даже использование одного семейства в разных начертаниях создает эффект «нескольких шрифтов», поэтому использовать лучше не более 2-3 типов для разных логических блоков: один – для заголовка, второй – для подводки (рубрики), третий – для основной массы текста.

Шрифтовые пары: устройство, методы подбора и удачные примеры
Контраст размеров, насыщенности и сочетание гарнитур одного семейства Exo

Не использовать шрифтовые моветоны. В типографике есть декоративные шрифты Curlz, Comic Sans, Jenna Sue, Lobster, Papyrus, использовать которые считается плохим тоном. Это не самые ужасные шрифты в мире с точки зрения дизайна, но из-за своей распространенности у них появился определенный шуточный бэкграунд, от которого никуда не деться.

Шрифтовые пары: устройство, методы подбора и удачные примеры
Несмотря на моветон, официальный шрифт первого фильма Avatar – это слегка доработанный Papyrus

Читайте также: Как создавать крутые карточки для постов в соцсетях.

Готовые шрифтовые пары для постов, сторис и веба

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

Кириллические шрифтовые пары для постов:

  • Rubik Mono One + Roboto
  • Russo One + Bitter
  • Vollkorn CS + Advent Pro
  • Roboto Condensed + Ubuntu
Шрифтовые пары: устройство, методы подбора и удачные примеры
Креативы и тематика подразумевают рубленые и гротескные шрифты

Кириллические шрифтовые пары для сторис:

  • Comforter + Bellota Text
  • Cormorant Infant + Cormorant Garamond
  • Forum + Raleway
  • Cormorant Garamond + Raleway
Шрифтовые пары: устройство, методы подбора и удачные примеры
Декоративные шрифты не только выглядят красиво, но и создают определенное настроение

Кириллические шрифтовые пары для сайта и веба:

  • Times New Roman + Arial
  • Roboto + Bookman Old Style
  • Lora + Lucida Console
  • Trebuchet MS + Palatino Linotype
Шрифтовые пары: устройство, методы подбора и удачные примеры
Сочетания шрифтов строятся на контрасте антиквы и гротеска

Как сделать свою шрифтовую пару

Разберем на примере сервиса «Холст» – это бесплатный аналог Canva для работы с графикой, в котором можно быстро создавать обложки и иллюстрации для постов и Историй.

Шаг 1. Зайдите в SMMplanner. Если нет аккаунта – создайте или авторизуйтесь через соцсети. Выберите инструмент «Холст».

Шрифтовые пары: устройство, методы подбора и удачные примеры
Как открыть редактор «Холст»

Шаг 2. Откройте «Холст» и перейдите в раздел «Текст». Для добавления текста используйте готовые текстовые блоки или шаблоны шрифтовых пар из списка.

Шрифтовые пары: устройство, методы подбора и удачные примеры
Как добавить текстовый блок на картинку

Шаг 3. Выберите, какими шрифтами будете пользоваться. В «Холст» встроено более сотни готовых бесплатных шрифтов, но вы можете загрузить свои. Для этого перейдите во вкладку «Мои шрифты» и кликните «Загрузить шрифт».

Шрифтовые пары: устройство, методы подбора и удачные примеры
Как загрузить свои шрифты в фоторедактор

Где взять бесплатные шрифты:

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

Шрифтовые пары: устройство, методы подбора и удачные примеры
Настройки текста в «Холсте»

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

Шрифтовые пары: устройство, методы подбора и удачные примеры
Как найти русские шрифты в «Холсте»

В настройках эффектов можно добавить тексту размытость, тень и контур.

Шрифтовые пары: устройство, методы подбора и удачные примеры
Эффекты для текста в редакторе 

Шаг 5. Разместите текст. В зависимости от выбранного фона разместите текст на изображении. Вы также можете пользоваться готовыми шаблонами для постов и сторис, которые уже содержат нужные кириллические шрифтовые пары. Узнать различные техники написания текстов и преодолеть писательский блок поможет наша статья «Как работать с текстом в соцсетях».

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

Шаг 6. Сохраните файл. Доступны форматы JPEG, PNG, JSON.

Шрифтовые пары: устройство, методы подбора и удачные примеры
Финальную картинку можно сохранить, а затем опубликовать через SMMplanner в любую подключенную соцсеть

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

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

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

Шрифтовые пары: устройство, методы подбора и удачные примеры
В таблицу встроен интерактивный визуализатор, куда можно подставить свой текст

Typespiration. Онлайн-сервис на базе бесплатных шрифтов Google Fonts, в котором можно посмотреть шрифтовые пары на разноцветных подложках.

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

100 Days of Fonts. Подборка из сотни шрифтовых пар на английском языке. Можно использовать как источник вдохновения. Чтобы узнать шрифт, установите расширение WhatFont, а для определения цвета сделайт скриншот экрана и откройте его в онлайн-пипетке или графическом редакторе.

Еще аналоги:

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

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

Шрифтовые пары: устройство, методы подбора и удачные примеры
Сайт в первую очередь пригодится для журнальной верстки PDF-файлов, текстовых постов и Историй

Fonts In Use. Постоянно обновляемая библиотека с более чем 20 тысячами шрифтов и их сочетаниями. Сайт разбит на тематики, форматы использования и виды шрифтов – вы можете фильтровать и находить нужные сочетания. Большинство примеров платные и используют латиницу, но зато все шрифты систематизированы и содержат подробные дизайн-кейсы по их созданию и внедрению.

Шрифтовые пары: устройство, методы подбора и удачные примеры
На сайте можно найти самые интересные шрифты и посмотреть их сочетаемость в работах других графических дизайнеров

Итоги

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

*Соцсеть признана экстремистской и запрещена в России.

Шрифтовые пары: устройство, методы подбора и удачные примеры

©