Шрифтовые пары: устройство, методы подбора и удачные примеры
Рассказываем, как создавать красивые и понятные тексты для постов, сторис и веб-страниц.
Содержание:
- Что такое шрифтовая пара
- Как устроены шрифты
- Базовые правила подбора хорошей шрифтовой пары
- Готовые шрифтовые пары для постов, сторис и веба
- Как сделать свою шрифтовую пару
- Сервисы подбора шрифтовых пар
- Итоги
Что такое шрифтовая пара
Шрифтовая пара – это группа шрифтов, которые используют для оформления постов, сторис, веб-страниц, статей и других графических элементов, где есть текст. Это инструмент типографики, который позволяет эффективно доносить информацию до пользователей.
Шрифтовые пары часто создают специально под компанию или бренд, прописывают в гайдлайнах и строго следуют единому стилю во всем дизайне.
В шрифтовых парах один шрифт считается главным, а второй – дополнительным. Например, на сайте Apple шрифт SF Pro Display используется для заголовков, а основной текст набирается в SF Pro Text.
Зачем нужны шрифтовые пары:
- Управление вниманием. Разница между шрифтами позволяет разделить текст по смыслам, выделить главное и «спрятать» неважное.
- Создание настроения. Контрастные шрифты умеют рассказывать историю и вызывать у людей эмоции, могут создать настрой и определенные ожидания.
- Эстетика. Некоторые декоративные шрифты могут быть броскими и яркими, привлекающими внимание.
Комбинаций шрифтов может быть миллион, как удачных, так и не очень. В статье разберем устройство шрифта, базовые правила поиска пар и сервисы в помощь.
Как устроены шрифты
Все шрифты делятся на семейства или гарнитуры (typeface). Например, Roboto и Roboto Slab, PT Sans и PT Serif – это шрифты одной гарнитуры. Их объединяют общие характеристики графики и принципы отрисовки.
Среди гарнитур существует несколько основных стилей:
- шрифты с засечками – антиква;
- шрифты без засечек – рубленые, гротескные;
- декоративные – акцидентные;
- рукописные – письменные.
Сами стили предполагают различные способы начертания (font) – это градации от тонкого до жирного, с курсивом и без него.
Шрифт можно условно разделить на 3 составляющие: каркас, насыщенность и декор.
Каркас. База, которая определяет пропорцию и форму шрифта. Например, у Rockwell каркас прописной буквы сложнее, чем у Questrial, но заглавные визуально отличаются только засечками. В декоративном шрифте Sacramento каркас принципиально иной – вытянутый и как-будто сделанный вручную.
Насыщенность. Это толщина каркаса. У некоторых шрифтов ее можно менять. Например, у Roboto девять стандартных способов начертания, а у Times New Roman – всего два. Некоторые шрифты, например Forum, изначально имеют только одну насыщенность.
Декор (аксессуар). Дополнительные элементы, которые дополняют шрифт: завитки, узоры, засечки. Существует мнение, что читать текст, который состоит из букв с засечками проще, чем без них. Но, судя по научному исследованию, это не совсем так – лучшего всего воспринимается простой Arial.
Читайте также: Как сделать красивый шрифт в Инстаграме*: полезные сайты и приложения.
Базовые правила подбора хорошей шрифтовой пары
Принципы, которые помогут вам быстро подобрать сочетающиеся между собой шрифты.
Принцип контраста. Шрифт с засечками хорошо смотрится рядом со шрифтом без, жирные буквы – с тонкими, крупный шрифт – с мелким. Декоративные шрифты хорошо создают настроение – используя их с нейтральными (Arial, Helvetica), можно расставить акценты и привлечь внимание.
Также декоративные шрифты можно объединять по сходству декораций – одинаковые завитки, контуры и соотношения помогут объединить между собой даже два разных шрифта.
Разные начертания одного шрифта. Необязательно подбирать разные шрифты, чтобы создать контраст – в рамках одного семейства шрифтов можно совместить курсив с тонким шрифтом или разные размеры букв. Например, на сайте Huawei используют шрифт Manrope в начертаниях Bold и SemiBold, а еще меняют размер и цвет.
Контекст. Выбор шрифта подчеркивает контекст: для булочной это может быть мягкий, толстый шрифт Pacifico, а для диджитал-агентства – более рубленный и строгий Alumni Sans.
В целом, при взгляде на шрифт, можно опираться на личные ощущения – декоративный Amatic SC выглядит дружелюбно, Didact Gothic – лаконично и официально, Stick – небрежно и легкомысленно. Подбирая шрифт под контекст его появления, вы можете усиливать впечатления или вызывать диссонанс.
Также учитывайте характер и объем материала – если в нем много текста, подзаголовков и заголовков, стоит использовать единую систему из 1-2 шрифтов одного семейства с разными начертаниями.
Читабельность. Читабельность и функциональность важнее красоты. Некоторые шрифты (Atmatic CS, Rubic Dirt, Rampart One) слишком перегружены деталями – если использовать их для длинных текстов, то их сложно прочитать. Проверить читабельность легко – отдалите от себя текст, и если он начинает сливаться в визуальную кашу, то шрифт лучше заменить.
Принцип нескольких шрифтов. Единая стилистическая система из 2-3 шрифтов позволит избежать визуального шума в постах, сторис и на сайте. Ее можно разработать как для отдельных рубрик, так и использовать постоянно во всем контенте.
Сочетать можно 2-3 шрифта разных семейств, если у них совпадают каркас и пропорции, например, как у MS Sans Serif и Lora. При этом должно быть хотя бы одно различие, но если таких различий больше 4 – шрифты несовместимы. Проверить просто – наложите два шрифта друг на друга и посмотрите, насколько они сочетаются по форме, толщине и декору.
В примере ниже используются два шрифта семейства Cormorant: Unicase – в заголовке рубрики и Garamond – в заголовках товаров. Третий шрифт – Raleway – используют для описания. Они все сочетаются между собой и выглядят органично.
Кстати: в тексте даже использование одного семейства в разных начертаниях создает эффект «нескольких шрифтов», поэтому использовать лучше не более 2-3 типов для разных логических блоков: один – для заголовка, второй – для подводки (рубрики), третий – для основной массы текста.
Не использовать шрифтовые моветоны. В типографике есть декоративные шрифты Curlz, Comic Sans, Jenna Sue, Lobster, 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.
Сервисы подбора шрифтовых пар
Подборка удобных инструментов для поиска новых шрифтов и проверки на сочетаемость.
Интерактивная таблица сочетаний кирилических шрифтов. Бесплатный сайт содержит более сотни удачных сочетаний русских шрифтов. Таблицу можно скачать и использовать как шпаргалку во время работы.
Typespiration. Онлайн-сервис на базе бесплатных шрифтов Google Fonts, в котором можно посмотреть шрифтовые пары на разноцветных подложках.
Fontpair. Подборка из сотни шрифтовых пар на английском языке. Можно использовать как источник вдохновения. Чтобы узнать шрифт, установите расширение WhatFont, а для определения цвета сделайт скриншот экрана и откройте его в онлайн-пипетке или графическом редакторе.
Еще аналоги:
Typotheque. Бесплатный сервис с небольшим количеством кирилических шрифтов, разделенных на две категории – заголовки и тексты. Комбинируя их между собой, можно получить множество шрифтовых пар.
Fonts In Use. Постоянно обновляемая библиотека с более чем 20 тысячами шрифтов и их сочетаниями. Сайт разбит на тематики, форматы использования и виды шрифтов – вы можете фильтровать и находить нужные сочетания. Большинство примеров платные и используют латиницу, но зато все шрифты систематизированы и содержат подробные дизайн-кейсы по их созданию и внедрению.
Итоги
Шрифтовые пары – это группы шрифтов, подобранных с учетом их форм, каркаса и размеров. Для построения правильных смыслов достаточно использовать одну гарнитуру, но с разными начертаниями. Для создания эстетики – пробовать сочетать декоративные шрифты с базовыми или находить общие графические решения в аксессуарах. Вы можете использовать кардинально разные шрифты и нарушать правила, если этого требуют дизайн и ваша задумка.
*Соцсеть признана экстремистской и запрещена в России.