Рассказываем, как создавать красивые и понятные тексты для постов, сторис и веб-страниц.
Содержание:
- Что такое шрифтовая пара
- Как устроены шрифты
- Базовые правила подбора хорошей шрифтовой пары
- Готовые шрифтовые пары для постов, сторис и веба
- Как сделать свою шрифтовую пару
- Сервисы подбора шрифтовых пар
- Итоги
Что такое шрифтовая пара
Шрифтовая пара – это группа шрифтов, которые используют для оформления постов, сторис, веб-страниц, статей и других графических элементов, где есть текст. Это инструмент типографики, который позволяет эффективно доносить информацию до пользователей.
Шрифтовые пары часто создают специально под компанию или бренд, прописывают в гайдлайнах и строго следуют единому стилю во всем дизайне.
В шрифтовых парах один шрифт считается главным, а второй – дополнительным. Например, на сайте 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, в котором можно посмотреть шрифтовые пары на разноцветных подложках.
100 Days of Fonts. Подборка из сотни шрифтовых пар на английском языке. Можно использовать как источник вдохновения. Чтобы узнать шрифт, установите расширение WhatFont, а для определения цвета сделайт скриншот экрана и откройте его в онлайн-пипетке или графическом редакторе.
Еще аналоги:
Typotheque. Бесплатный сервис с небольшим количеством кирилических шрифтов, разделенных на две категории – заголовки и тексты. Комбинируя их между собой, можно получить множество шрифтовых пар.
Fonts In Use. Постоянно обновляемая библиотека с более чем 20 тысячами шрифтов и их сочетаниями. Сайт разбит на тематики, форматы использования и виды шрифтов – вы можете фильтровать и находить нужные сочетания. Большинство примеров платные и используют латиницу, но зато все шрифты систематизированы и содержат подробные дизайн-кейсы по их созданию и внедрению.
Итоги
Шрифтовые пары – это группы шрифтов, подобранных с учетом их форм, каркаса и размеров. Для построения правильных смыслов достаточно использовать одну гарнитуру, но с разными начертаниями. Для создания эстетики – пробовать сочетать декоративные шрифты с базовыми или находить общие графические решения в аксессуарах. Вы можете использовать кардинально разные шрифты и нарушать правила, если этого требуют дизайн и ваша задумка.
*Соцсеть признана экстремистской и запрещена в России.