Типографика

9 принципов комбинирования шрифтов

Перевод статьи “A Crash Course in Typography: Principles for Combining Typefaces” об основных и самых действенных способах комбинирования шрифтов.


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

Контраст

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

Толщина

Разные шрифты имеют разное понятие толщины. Сочетание шрифтов во многом зависит от их толщины, как способа создания типографического контраста.

1

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

2

Стиль и оформление

Как правило, в работе со стилями используются regular или italic стили. Подчёркивания тоже используются, но в веб-дизайне они почти всегда обозначают ссылку. Также иногда используются обводка или тень.

3

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

4

Масштаб и иерархия

Масштаб шрифтов по отношению к странице и друг к другу, и иерархия шрифтов — ещё один очень важный фактор. И это очень важно помнить и соблюдать. Например, заголовки должны быть больше , чем текст в параграфе, заголовок h1 должен быть больше h2, и т.д.

5

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

6

Классификация

Как правило, при комбинировании шрифтов, мы не думаем о классификации. Сочетая serif и sans-serif, или serif и script можно добиться контраста, который выглядит гармонично.

7

Однако, объединение шрифтов одного класса иногда не допустимо. Не стоит работать с очень похожими шрифтами

8

Есть такой трюк: используйте шрифты одного класса, но разных подклассов, например, slab serif и modern serif, или geometric sans serif с grotesk’ом. Это обеспечит видимую разницу, не нарушая гармонии.

9

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

Структура

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

10

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

Цвет и текстура

Когда нужно добавить контраста или объединить разрозненные шрифты, цвет и фактура могут творить чудеса. Например, если шрифты очень похожи, но нужно их разделить, цвет может очень сильно в этом помочь.

11

Кроме того, если у нас очень разные шрифты, то, выделив их одним цветом, мы их сможем обьединить.

Экстремальный контраст

Сильный контраст может хорошо работать, если Вы используете display- или script- шрифты. Иногда найти шрифты, которое хорошо работают вместе, сложно. Попробуйте сочетать простой шрифт и сложный.

12

Настроение

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

13

Примеры

Сайт Oak Street Bootmakers использует комбинацию шрифтов Hoefler Text и Franklin Gothic, оба они достаточно классические — получается этакий традиционный стиль.

14

Сайт Pound & Grain комбинирует 2 шрифта с засечками, и они отлично работают друг с другом, так как находятся в различных подклассах.

15

Сайт Burciaga сочетает три шрифта : Droid Serif, Georgia, и Dancing Script. Droid Serif и Georgia работают отлично вместе, а Dancing Script добавляет элегантности.

16

Stuart Bicknell Photography играет размерами шрифтов для придания сайту контрастности , при этом почти вся типограия опирается на Times New Roman (за исключением небольших вставок Arial).

17

Сайт Foundation Six использует Clarendon и Helvetica Neue, что создаёт современный образ, при этом достаточно консервативный.

18

CalebAcuity Americas использует сочетание YanoneKaffeesatzBold и Lucida Sans. Смотрится очень современно, отличный пример сочетания шрифтов sans serif (Без засечек).

19

Analog отличный пример сайта, на котором используется лишь шрифт, но игра стилей, цветов и размеров даёт отличный контраст.

20

Thor Datacenter сочетает несколько шрифтов, в т.ч. AllerDisplay, JournalRegular, и Arial. В дополнение использован скрипт-шрифт JournalRegular, придавая дизайну больше чувственности.

21

47 Degrees сочетает LeagueGothic с ChunkFive и Helvetica для очень современного, кажуального стиля. Также использован Museo300, делая картинку интересней

22

Logo Nest комбинирует большое количество шрифтов для получения винтажного стиля.

23

На сегодня всё, но в скором будущем мы продолжим разговор о типографике.

Источник: naikom.ru
Фото на обложке: ShutterStock