Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>11 янв 2023</li>

3 <li>0</li>

4 </ul><h2>Что такое шрифтовые пары и как их подбирать</h2>

5 О способе сделать текст читабельным, а типографику - эффектной.

6 Иллюстрация: vlada_maestro / shutterstock

7 Пишет о дизайне в Skillbox Media, а в перерывах и сама орудует графическим планшетом. Влюблена в советские шрифты, японскую рекламу и русский язык.

8 Полина Старцева

9 Редактор.

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

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

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

13 В шрифтовой паре один шрифт считается главным, другой - второстепенным.

14 Шрифтовые пары - это инструмент эффективной типографики. Их подбирают, чтобы:

15 <ul><li>Структурировать текст и управлять вниманием зрителя.</li>

16 </ul>Разница позволяет создать визуальную иерархию - показать, что одни надписи главные, а другие второстепенные. Например, на билборде вы быстро заметите информацию о 50-процентной скидке в магазине - потому что такие сообщения оформляют крупно и выразительно. И только если заинтересуетесь и остановитесь, прочтёте менее заметный текст - скажем, о том, что скидка распространяется только на некоторые вещи.

17 Название статьи набрано элегантной антиквой из гарнитуры<a>Domaine</a>, а дата, имя автора и категории - аккуратным гротеском<a>Basic Sans</a>Скриншот: сайт<a>Kitchnn</a>/ Skillbox Media<ul><li>Передавать интонацию и настроение.</li>

18 </ul>Контраст или подобие в шрифтах помогает определённым образом "рассказать историю" и не только визуально выделить главное, но и подчеркнуть детали, придать словам и всей текстовой композиции характер - будто добавить в композицию голос.

19 Надпись гротеском<a>Aeonik</a>выглядит спокойно, а антиква<a>Recife</a>словно ставит акцент на слове "проще"Скриншот: сайт<a>Flashform</a>/ Skillbox Media<ul><li>Создавать эстетику.</li>

20 </ul>Разное оформление надписей служит не только практическим, но и эстетическим целям. Акцидентные шрифты с декоративными элементами или необычной пластикой букв могут украшать проект или интересно стилизовать его. А броские сочетания с ними - привлекать внимание к интерфейсу, обложке или другой графической работе.

21 Изображение: издательство<a>Individuum</a>Когда необходимо составить комбинацию из разных шрифтов, легко потеряться: гарнитур и начертаний огромное количество, и слишком многие из них могут подходить для решения задачи или просто нравиться.

22 Есть два простых способа решить эту задачу:

23 <ul><li>Взять пару шрифтов из одной гарнитуры.</li>

24 </ul>Например, Oswald Light для основного текста и Oswald SemiBold для заголовка. У шрифтов в рамках одной гарнитуры одинаковая геометрия, поэтому они точно будут смотреться гармонично.

25 Шрифты семейства<a>Editorial New</a>в оформлении меню ― потоньше и потолщеИзображение: Lara Martínez Magán & Antonio Lajara /<a>Behance</a><ul><li>Сочетать два шрифта из разных групп.</li>

26 </ul>Например, геометрический гротеск для заголовка и классическую антикву для основного текста. Либо - акцидентный шрифт или леттеринг для основного сообщения плюс шрифт без засечек для поясняющего текста.

27 <a>Mabry Pro</a>для главного сообщения на странице,<a>SangBleu Sunrise</a>для текста ссылки. Для определения шрифтов на сайтах есть простой инструмент - плагин WhatFontСкриншот: сайт "<a>Подписные издания</a>" / Skillbox MediaНо пара необязательно должна состоять из шрифта без засечек и шрифта с засечками или акцидентного шрифта с чистым гротеском. Собирать гармоничные сочетания можно и нужно из двух гротесков или двух антикв из разных гарнитур.

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

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

30 <ul><li>Пропорции.</li>

31 </ul>Это соотношение ширины и высоты букв: они могут быть вытянутыми и узкими или, наоборот, короткими и широкими.

32 Узкая и высокая антиква плюс слегка заниженный и расширенный шрифт без засечекИзображение: Artem Nevsky / Pixel Surplus /<a>Behance</a><ul><li>Апертура или степень открытости знаков.</li>

33 </ul>Наберите разными шрифтами букву "с" и посмотрите на неё: в одних она будет скорее похожа на полукруг, а в других - на незамкнутую окружность. Именно по форме "с" проще всего определить, открытый или закрытый характер у шрифта.

34 Скриншот: сайт<a>W hotels</a>/ Skillbox Media<ul><li>Толщина букв и наклон текста.</li>

35 </ul>Надписи могут быть набраны тонким или жирным шрифтом, а угол наклона - слабым или явным.

36 Сочетание наклонного и регулярного шрифтов на обложке книгиИзображение: издательство<a>No Kidding Press</a><ul><li>Форма и рисунок.</li>

37 </ul>В некоторых шрифтах обтекаемые мягкие линии, в других - много острых углов.

38 Комбинация из округлых<a>Body Grotesque</a>и MontserratСкриншот: сайт "<a>Слой</a>" / Skillbox Media<ul><li>Контрастность.</li>

39 </ul>Это соотношение толщин штрихов, которые образуют букву.

40 Пара из двух шрифтов, подобных по пропорциям, но с разной контрастностью линий -<a>Lora</a>и <a>Open Sans</a>Скриншот: сайт "<a>Собака.ru</a>" / Skillbox Media<ul><li>Декоративные элементы.</li>

41 </ul>Буквы могут быть украшены узорами в историческом стиле, или их формы могут напоминать образ известного бренда.

42 Акцидентный шрифт с характером леттеринга в названии и открытый гротеск в тексте поясненияИзображение: Helga Korotkova /<a>Behance</a>Но самое важное правило подбора шрифтовых пар - учитывать контекст и задачи конкретного проекта.

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

44 Очень много разных шрифтов на одном развороте - не ошибка, а концепцияИзображение: Benjamin Mira / Joseph Montana /<a>Behance</a>Для большинства информационных сообщений пары шрифтов вполне достаточно. Но возможны исключения.

45 Когда информации действительно много и она различается по значимости, могут понадобиться и три, и пять шрифтов. Это распространённое решение в дизайне сайтов и приложений.

46 Несколько шрифтов из группы<a>SB Sans Text</a>в дизайне страницыСкриншот: сайт<a>Edutoria</a>/ Skillbox MediaИногда, напротив, шрифт нужен всего один: если в рекламном креативе всего три слова, их, скорее всего, наберут одинаково. Или для заголовка и объёмного абзаца текста тоже могут использовать один шрифт - и тогда визуальную иерархию выстраивают за счёт изменения размера надписей.

47 Благодаря цвету и размерам шрифты в левой половине страницы выглядят разными, но всё это один<a>Source Code Pro</a>Скриншот: сайт<a>Language for Geeks</a>/ Skillbox MediaЕсть сервисы, позволяющие автоматически подбирать шрифтовые сочетания онлайн, и библиотеки с готовыми наборами.

48 Например, в <a>Figma</a>есть готовые пары на основе шрифтов Google Fonts. Подобные подборки делают и другие компании: так, в блоге<a>Adobe Express</a>собраны не только рекомендации, но и готовые шаблоны дизайнов с разными шрифтовыми парами.

49 <a>Курс с трудоустройством: "Профессия Графический дизайнер PRO" Узнать больше</a>