Как сочетать шрифты: 6 советов, чтобы сделать ваш дизайн лучше

Используйте разную цветность набора

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

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

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

Избегайте несопоставимые комбинации шрифтов

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

В левом примере у нас Antique Olive Nord – сверхжирный шрифт – поставлен вместе с Garamond Narrow. Излишне усердный контраст и его эффект очевиден. Во многих случаях этот чрезмерный контраст уже не просто привлекает внимание, а становится прямо-таки нелепым. Он также не помогает хорошему восприятию содержания текста.

Справа Antique Olive Nord был заменен не таким выдающимся Antique Olive Bold. Garamond Narrow можно было бы тоже заменить Garamond нормальной насыщенности, но лучшим выбором после некоторого размышления стал шрифт Chaparral. Chaparral имеет более высокое очко шрифта, чем Garamond, и в целом, более современный и, следовательно, более нейтральный по сравнению со специфическим своеобразием Antique Olive Bold.

Контраст выразительных и нейтральных шрифтов

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

В нашем примере в левой колонке Dax Bold стоит в паре с Bernhard Modern. Это плохой выбор, по крайней мере, по двум очевидным причинам, которые мы проанализируем дальше.

Во-первых, у Dax узкие и высокие строчные знаки, в то время как Bernhard Modern обладает одними из самых широких знаков и одну из самых малых высот литер среди популярных классических гарнитур. Во-вторых, Dax – неформальный, современный и яркий шрифт. Это отличный выбор для технических, экспертных, современных текстов. Bernhard Modern, наоборот, классический, спокойный и изысканный шрифт, даже немного интимный. Соедините недостаток взаимосвязи между этими атрибутами и

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

Давайте взглянем на более удачный выбор. В правой колонке Dax Bold соседствует с Caslon. Caslon относится к антиквам старого стиля, но он был усовершенствован и сделан более приемлемым для сочетаний с другими шрифтами. Он удовлетворительно работает с Dax в данном случае. Заметили, как выделяется характер Dax в заголовке, а Caslon отступает и направляет читателя к содержанию текста? В данном контексте Caslon работает хорошо как нейтральный шрифт, поддерживая более пышный Dax.

Как создать шрифтовой контраст?

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

В примере слева у нас имеется значительный контраст размеров, но недостаточный контраст в насыщенности шрифтов. Набранный вместе с Minion Bold Myriad Light стремится отступить и теряет визуальный авторитет. Но мы же хотим, чтобы глаз читателя обратился к заголовку, а не к основному тексту, по крайней мере, в самом начале.

Справа для заголовка был взят Myriad Black, а для текста нормальное начертание Minion. Возможно, заголовок немного тяжеловат, но здесь нет путаницы в том, куда читатель должен посмотреть в первую очередь.

У кажого шрифта своя задача

Еще один простой способ сочетать несколько шрифтов из различных шрифтовых семейств – придумать систему, в которой каждый шрифт или гарнитура будут играть определенную роль, и придерживаться ее. В следующем примере для имени автора вверху статьи мы использовали жирный Akzidenz Grotesk, набранный прописными. Затем мы взяли жирное начертание Rockwell для заголовка статьи. Шрифт для вступления и основного текста – Bembo разных размеров. Ну и наконец, мы набрали подзаголовок Akzidenz Grotesk Medium.

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

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

Избегайте сочетания шрифтов, принадлежащих одной группе

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

В первом примере слева заголовок набран жирным начертанием Clarendon, который является брусковым рубленым (или египетским). Основной текст набран Officina Serif, который тоже брусковый рубленый шрифт. Шрифты этой группы обладают яркой индивидуальностью, и они занимают доминантную позицию везде, где их применяют. Ставить их рядом значит создавать ненужное и некрасивое напряжение.

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

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

Как сочетать шрифты? Гротеск плюс антиква

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

В примере внизу слева — это стандартный газетный макет – Trade Gothic Bold No.2 поставлен вместе с Bell Gothic. Это два гротеска. Тем не менее, у них очень разный характер. Когда мы сталкиваемся с проблемами между заголовком и основным текстом, тут можно вспомнить хороший прием, который заключается в том, чтобы не привлекать излишнего внимания к индивидуальному характеру каждого шрифта. Trade Gothic, пожалуй, строгий шрифт. Bell Gothic, наоборот, гораздо более динамичный и выразительный.

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

Теперь посмотрим на пример справа. Мы заменили Bell Gothic представительным Sabon. Sabon – это антиква, и он очень хорошо работает рядом с Trade Gothic. Этим шрифтам присуща мощная чистота и отлично читаемые благодаря большой высоте строчных литер знаки. Оба шрифта служат одной и той же задаче и поэтому представляют собой прекрасную комбинацию.

Не сочетайте шрифты с разным настроением

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

В левом примере мы соединили Franklin Gothic Bold с Souvenir. Общее впечатление от Franklin Gothic – мужественный, крепкий, мощный, но с тонким ощущением элегантности и значительности. Он не привлекательный, а функциональный. С другой стороны, Souvenir – живой, немного легкомысленный и отстраненный, и очень красивый. Эти два шрифта подходят друг другу как гвардеец Букингемского дворца, который с сознанием долга равнодушно взирает на маленькую шаловливую девочку, которая у его ног пытается вызвать его улыбку. Это смешение двух разных настроений просто недостаточно хорошо работает.Оно привлекает внимание к самой типографике, а не смыслу текста, в результате чего получается плохой дизайн.

Справа мы нашли для Souvenir более дружелюбного соседа. У Futura Bold много разных характеров, но он более подходит Souvenir по нескольким причинам. Во-первых, у обоих шрифтов одинаковая высота строчных. У них широкие знаки и очень округлые буквенные формы. Оба шрифта выглядят немного, но не чересчур причудливо. Ни один не доминирует над другим. Оба в данном примере создают веселое и приподнятое настроение. Нет ощущения излишнего напряжения.

Будьте проще – используйте только две гарнитуры.

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

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

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

И Helvetica Neue, и Garamond обладают выразительной, но нейтральной индивидуальностью, и они могут связать воедино сложные макеты, поскольку мы создали четкую визуальную иерархию. Великолепных результатов с минимумом усилий можно достичь, если установить правила и четко следовать им, используя правильные шрифты.