Как сочетать шрифты?

Время прочтения: 5 минут

Давай начнем сразу с правила: не используй много шрифтов, максимум два.
Рекомендации по сочетанию шрифтов.

Мы сочетаем шрифты, чтобы отделить главное от второстепенного, большое от маленького, сделать акцент или наоборот — его убрать. И главное, о чем мы должны помнить при выборе шрифтов — это его функция. Но сначала нужно научиться делать просто и понятно, а уже затем, если есть потребность, усложнять. А не начинать со сложного и вычурного. Итак:

1. Сочетай шрифт в рамках одной гарнитуры

Тебе и правда одного шрифта может быть вполне достаточно.

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

Например: Kyiv Sans Bold и Kyiv Sans Regular.

2. Сочетай шрифты в рамках шрифтовой семьи

Шрифтовые семьи — это шрифты одной серии, которые хорошо сочетаются между собой и отлично работают в контрастных кеглях и начертаниях.
Например: шрифтовая семья Roboto: Roboto, Roboto Mono, Roboto Slab, Roboto Condensed; шрифтовая семья Kyiv Type: Kyiv Sans, Kyiv Serif, Kyiv Titling.

3. Используй типографические пары

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

Например, @kukuruza_blog используют два шрифта: Ermilov Bold – для заголовков и небольших элементов дизайна, Open Sans и его начертания – для основного текста.
Типографическую пару ты можешь подобрать самостоятельно или же воспользоваться уже готовыми сервисами и подборками: fontpair.co, canva.com/font-combinations, typotheque.com/fonts/combinator/latin.

Также советую обязательно прочитать статью от Readymag про типографические пары.

4. Помни про правила:

Если ты все еще не хочешь останавливаться на одном шрифте, то вот комбинации шрифтов, которые работают:

  • антиква+гротеск;
  • гротеск+гротеск;
  • гротеск+брусковый

Не стоит брать разные шрифты и ставить их вместе просто так. Здесь лучше не экспериментировать, потому что может получиться очень дёшево и неуместно. Но если сильно хочется — просто начинай углубляться в эту тему, читать проф. литературу и изучать шрифт «изнутри».
Рекомендации: как нельзя сочетать шрифты:

1. Не сочетай очень похожие шрифты

Это бессмысленно. визуально перегружать зрителя, если шрифты мало чем отличаются? Просто ради галочки, что «я использую типографическую пару?»)

2. Не используй акцидентные (декоративные, рукописные и т.д.) шрифты в разных кеглях (размерах).

Ты только усложнишь восприятие текста, потому что его будет неудобно читать.

3. Не используй больше одного акцидентного (декоративные, рукописные и т.д) шрифта.

Ты также усложнишь восприятие текста и он будет выглядеть  “дешево”.

Характеристики шрифта. Теперь давай немного углубимся в характеристики шрифта, с которыми тебе нужно будет работать:

  1. Кегль
  2. Базовая линия шрифта
  3. Выносные элементы
  4. Интерлиньяж (межстрочное)
  5. Трекинг (межбуквенное расстояние)
Пожалуйста, НИ В КОЕМ СЛУЧАЕ не делай это со шрифтом:

  1. Не изменяй шрифт ручками (не растягивай, не стягивай, не искажай);
  2. Не делай обводку тексту: это же не мемчики со шрифтом impact, а качественный  дизайн;
  3. Не добавляй тень. Зачем? Это выглядит дешево. Чтобы добиться “заметности”, используй другие инструменты: цветовой контраст, шрифтовой контраст, пространство, композиция и т.д.
  4. Не давай жирность шрифту обводкой. Есть же начертание Medium, Bold, Black и т.д.
Чек-лист:

  • используй максимум два шрифта одновременно;
  • сочетай шрифты в рамках одной гарнитуры;
  • сочетай шрифты в рамках шрифтовой семьи;
  • используй типографические пары;
  • попробуй использовать комбинации шрифтов, которые работают (из теории);
  • не сочетай очень похожие шрифты;
  • не используй декоративные шрифты разных размеров;
  • не используй больше одного декоративного шрифта;
  • не искажай шрифт;
  • не делай обводку и не добавляй тень.
Начать тест
Для какой характеристики характерно расстояние 120%?
Верно! Оно де межстрочное расстояние. 
Он же интерлиньяж. Это, чтобы подловить ваше внимание :)
Дальше
Проверить
Готово
Где линия, по которой равняется интерлиньяж?
Дальше
Проверить
Готово
Что здесь не так?
Нет :) Здесь все хорошо, брусковый в заголовке — это ок, к тому же отлично сочетается с гротеском в тексте
Нет :) Здесь все хорошо, гротеск в тексте — это ок, к тому же отлично сочетается с брусковым в тексте
Почему? Здесь все сочетается. Антиква в заголовке, в тексте гротеск
Да, здесь все ок :) Антиква в заголовке, в тексте гротеск
Дальше
Проверить
Готово
Хорошее ли это сочетание цветов?
Дальше
Проверить
Готово
ВЫБРАТЬ ТАРИФ
ВЫБРАТЬ ТАРИФ