Девять правил сочетания разных видов шрифтов

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

1. Контраст

Подбирая шрифты без использования контраста, можно столкнуться с их конфликтом, который будет «рассеивать» общее восприятие. Что такое контраст и как работать с ним?

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

2. Толщина

У разных шрифтов разное значение толщины. Комбинация шрифтов в значительной степени определяется их толщиной, которая является одним из способов создания контраста.

Шрифты

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

Шрифты

3. Стиль и дизайн

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

Шрифты

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

Шрифты

4. Масштаб, иерархия

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

Шрифт

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

Масштабирование в веб дизайне

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

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

Классификация шрифтов

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

гротеск в дизайне

Эффективный приём — применение шрифтов, которые относятся к одному классу, но к разным подклассам, к примеру, сочетание slab serif с modern serif либо geometric sans serif с grotesk. В этом случае обеспечивается заметная разница без нарушения гармонии.

Семейство шрифтов

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

6. Структура

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

Типографика в веб дизайне

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

7. Цвет, текстура

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

Цвет шрифта

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

8. Сильный контраст

Этот приём хорошо сработает при использовании шрифтов display либо script. Порой трудно подыскать шрифты, хорошо работающие вместе. Следует комбинировать простой шрифт со сложным.

Начертания в типогрфике

9. Настроение

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

Типографика

Примеры

На сайте Oak Street Bootmakers использовано сочетание шрифтов Franklin Gothic и Hoefler Text, каждый из которых относится к классическим.

пример типографики 1

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

пример типографики 2

На сайте Burciaga присутствует сочетание трёх шрифтов: Georgia, Dancing Script и Droid Serif. Georgia и Droid Serif успешно взаимодействуют, тогда как Dancing Script прибавляет элегантности.

пример типографики 3

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

пример типографики 4

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

Foundation Six

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

CalebAcuity Americas

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

Analog

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

Thor Datacenter

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

47 Degrees

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

Logo Nest

Обсуждение закрыто.