Вверх

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

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

 

Контраст

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

 

Толщина

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

 

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

Следите за трендами вместе с нами