Шрифт замечают раньше, чем читают текст. Ещё до того, как человек разобрал заголовок, он уже понял, какой перед ним макет: строгий, праздничный или детский. Поэтому неудачная пара шрифтов портит даже хорошую картинку, а удачная вытягивает самый простой макет.
Чтобы сочетать шрифты, не нужно быть типографом — хватает нескольких правил. Ниже семь правил, шесть проверенных пар с кириллицей и короткая инструкция, как собрать это в «Макетике».
7 правил сочетания шрифтов
1. Двух шрифтов почти всегда достаточно
Один шрифт для заголовков, второй для текста. Третий оправдан только для маленького акцента — например, рукописной подписи на открытке. Когда шрифтов больше, макет превращается в доску объявлений: каждая строка спорит с соседней.
Если нужно разнообразие, берите разные начертания одного шрифта: жирное для заголовка, обычное для текста, светлое для подписи. Например, у Manrope есть начертания от очень тонкого до очень жирного, и одного этого шрифта хватает на целый макет.
2. Ищите контраст, а не сходство
Два похожих шрифта рядом выглядят как ошибка: кажется, что хотели поставить один, а получилось два. Пара работает, когда шрифты заметно отличаются хотя бы по одному признаку:
с засечками и без — классика: антиква в заголовке, гротеск в тексте;
широкий и узкий — растянутый заголовок и компактный текст;
жирный и тонкий — плотный акцент и лёгкий текст вокруг;
крупный и мелкий — разница в размере хотя бы в два раза.
3. Один шрифт ведёт, второй помогает
Характерный шрифт ставьте в заголовок — он задаёт настроение. Нейтральный — во всё остальное: он должен легко читаться и не отвлекать. Если оба шрифта яркие, они спорят, и взгляд не понимает, куда смотреть.
4. Проверяйте кириллицу
Многие красивые шрифты нарисованы только для латиницы. В лучшем случае русские буквы подставятся из другого шрифта, в худшем получится «псевдокириллица», где вместо Я стоит перевёрнутая R. Прежде чем выбрать шрифт, наберите им фразу «Съешь же ещё этих мягких французских булок, да выпей чаю» — в ней есть все буквы алфавита. Отдельно посмотрите на Ж, Ф, Д, Л, Й и Щ: на них сложнее всего нарисовать хорошую кириллицу.
5. Иерархию стройте размером и насыщенностью
Чтобы выделить подзаголовок, новый шрифт не нужен — достаточно сделать его крупнее или жирнее. Удобный ориентир: каждый следующий уровень примерно в полтора-два раза меньше предыдущего. Например, заголовок 64 px, подзаголовок 32 px, текст 20 px, подпись 14 px.
6. Декоративные шрифты — только для коротких слов
Рукописные, жирные и узкие акцидентные шрифты хороши в одном-трёх словах: «Распродажа», «С днём рождения», «Новая коллекция». Абзац таким шрифтом читать тяжело. Для текста длиннее строки выбирайте спокойный шрифт без засечек.
7. Проверяйте на экране телефона
Посты, сторис и карточки товаров почти всегда смотрят с телефона, где картинка занимает несколько сантиметров. Уменьшите макет до реального размера: если тонкие засечки пропали, а мелкий текст превратился в серую полосу, поменяйте шрифт или размер. В посте шириной 1080 px текст мельче 28 px обычно уже читается с трудом.
6 готовых пар с кириллицей
Все шрифты из этих пар есть в «Макетике», их можно сразу выбрать в редакторе.
Unbounded + Manrope — современно
Широкий геометрический заголовок и аккуратный гротеск для текста. Подходит для IT-продуктов, онлайн-школ, стартапов и всего, что должно выглядеть свежо. Заголовки в Unbounded делайте короткими: шрифт широкий, и длинная фраза быстро рассыпается на много строк.
Playfair Display + Montserrat — классика с характером
Контрастная антиква с тонкими засечками и ровный гротеск. Хорошо работает для ресторанов, недвижимости, отелей и премиальных товаров. Playfair держите крупным: на маленьком размере тонкие линии теряются.
Cormorant Garamond + Manrope — элегантно
Изящная антиква и лёгкий гротеск. Пара для салонов красоты, свадебных приглашений, цветочных магазинов и украшений. Cormorant лучше всего смотрится крупно, на спокойном фоне и с большим количеством воздуха вокруг.
Le Murmure + IBM Plex Sans — дерзко
Узкий акцидентный шрифт с острыми формами и строгий технический гротеск. Для афиш, музыки, моды и журнальных обложек. Le Murmure раскрывается в огромном размере: пусть заголовок занимает половину макета.
Caveat + Montserrat — тепло и по-человечески
Рукописный акцент и надёжный гротеск. Подходит для кофеен, хендмейда, личных блогов и открыток. Caveat используйте для одного-двух слов поверх основного текста — так макет выглядит живым, но остаётся читаемым.
Comfortaa + PT Sans — мягко и дружелюбно
Округлый шрифт без острых углов и простой, хорошо читаемый текст. Пара для детских центров, кружков, школьных объявлений и семейных праздников.
Частые ошибки
Слишком много шрифтов. Три и больше на одном макете почти всегда лишние.
Два похожих гротеска. Montserrat и Manrope рядом не дают контраста — лучше оставить один.
Декоративный шрифт в абзаце. Рукописный текст на пять строк никто не дочитает.
Всё заглавными. Капсом удобно набирать короткие заголовки и подписи, но не основной текст: он читается медленнее.
Искажённые буквы. Не растягивайте и не сжимайте текст, чтобы он поместился. Лучше уменьшите размер или возьмите узкий шрифт.
Слабый контраст с фоном. Тонкий светлый шрифт на фотографии пропадает. Добавьте подложку или затемните фон.
Как подобрать шрифты в «Макетике»
Откройте редактор и выберите формат: пост, сторис, презентацию или карточку товара.
Добавьте заголовок и выберите для него характерный шрифт из списка.
Для основного текста возьмите спокойный гротеск: Manrope, Montserrat, IBM Plex Sans или PT Sans.
Настройте иерархию: заголовок крупнее текста хотя бы в два раза, подписи — светлее или мельче.
Уменьшите масштаб и посмотрите на макет так, как его увидят на телефоне.
Не хочется собирать с нуля — откройте шаблоны: шрифты в них уже подобраны, достаточно заменить текст.