Найти в Дзене
Медиашкола

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

Зачем вообще сочетать шрифты? Что бы вы ни делали — печатную продукцию или сайт — если в этом чём-то много текста, скорее всего, вам захочется внести в него разнообразие. И поскольку на сайтах и в газетах практически вся информация подаётся в текстовом виде, задача сочетания шрифтов актуальна. «Но ведь можно же выбрать одну гарнитуру* и постоянно использовать её — разве этого недостаточно?» — спросите вы. Да, этого вполне может быть достаточно, и многие дизайнеры часто именно так и поступают. Но это не панацея на все случаи жизни. Сочетание шрифтов может дать интересный, красивый и необычный визуальный эффект, и даже если ваша гарнитура спасает вас всегда и везде, умение грамотно сочетать шрифты точно не будет лишним.  Например, хорошо подчеркнуть и освежить длинный текст могут заголовки, выполненные необычным или даже диковинным шрифтом, часто сочетание шрифтов хорошо смотрится в логотипах, а в газетной вёрстке можно ловко выделять вставки: цитаты, флешбеки, объявления, рекламу и т
Оглавление

Зачем вообще сочетать шрифты?

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

«Но ведь можно же выбрать одну гарнитуру* и постоянно использовать её — разве этого недостаточно?» — спросите вы. Да, этого вполне может быть достаточно, и многие дизайнеры часто именно так и поступают. Но это не панацея на все случаи жизни. Сочетание шрифтов может дать интересный, красивый и необычный визуальный эффект, и даже если ваша гарнитура спасает вас всегда и везде, умение грамотно сочетать шрифты точно не будет лишним. 

Например, хорошо подчеркнуть и освежить длинный текст могут заголовки, выполненные необычным или даже диковинным шрифтом, часто сочетание шрифтов хорошо смотрится в логотипах, а в газетной вёрстке можно ловко выделять вставки: цитаты, флешбеки, объявления, рекламу и так далее. Всё это может смотреться как очень красиво, так и совершенно неуместно. Тому, как не облажаться и сделать красиво, и посвящён этот текст.
Кстати, обратите внимание: прежде чем сочетать шрифты, нужно научиться грамотно их подбирать. Скорее всего, использовать Comic Sans для надгробной надписи или Times New Roman для плаката на детский праздник — плохая идея. Хотя, конечно, случаи бывают всякие. Полушуточная, но, тем не менее, полезная
картинка на тему.

Гарнитура  — набор из одного или нескольких шрифтов в одном или нескольких размерах и начертаниях, имеющих стилевое единство рисунка и состоящих из определённого набора типографских знаков. Например, довольно распространена гарнитура Helvetica Neue.

Helvetica Neue
Helvetica Neue

Общее о шрифтах

Шрифтов существует великое множество. Их настолько много, что не хочется даже начинать разбираться — как вообще можно разобраться в таком обилии всего?! Но на самом деле всё совсем не так страшно, как может показаться на первый взгляд. Простая аналогия: на свете живёт около 7 миллиардов людей, но их всех можно разделить по национальному и расовому признаку, и ориентироваться станет намного проще. То же самое и со шрифтами: стоит научиться их классифицировать, как сразу станет легче дышать. И вовсе не обязательно для этого знать каждый шрифт лично — так же, как не обязательно знать лично каждого человека, чтобы их количество не сводило с ума.

Впрочем, со шрифтами всё-таки чуть-чуть сложнее. Единой принятой классификации шрифтов не существует, если не считать классификацию по ГОСТу. Есть несколько распространённых классификаций, о них можно прочитать, например, в Википедии. Однако во всех классификациях есть характеристики шрифтов (указанные прямо или подразумевающиеся), которые единогласно приняты во всём мире и при упоминании которых вас поймёт абсолютно любой дизайнер (а также типограф и каллиграф):

Засечки

Засечки — небольшие элементы на концах штрихов букв. Среди шрифтов с засечками выделяют антикву и брусковые шрифты. У вторых засечки более выраженные и представляют из себя выраженные прямоугольные элементы на концах букв. Антиква — это просто любой шрифт с обычными засечками. Шрифты без засечек называют гротески.

Пропорции

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

-4

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

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

Геометрические гротески

Иными словами — геометрические шрифты без засечек. Эти шрифты основаны на строгих геометрических формах. Штрихи отдельных букв часто одинаковой формы, а дизайн максимально минималистичен. Лучшее, что есть в геометрических шрифтах – это четкость, функциональность, современность и универсальность. В то время, как худшие черты составляют холодность, обезличенность и скука. Классический геометрический шрифт можно сравнить с красивым, хорошо спроектированным аэропортом: он современный, производит впечатление и удобен в использовании, но мы дважды подумаем, прежде чем решим, хотим ли мы в нем жить.
Примеры геометрических гротесков: Helvetica, Univers, Futura, Avant Garde, Akzidenz Grotesk, Franklin Gothic, Gotham.

-5

Гуманистические шрифты

Здесь представлены гротески, произошедшие от рукописного письма – они выглядят так же безукоризненно и современно, но в них всё ещё можно увидеть нечто безусловно человеческое. Сравните «t» в изображении снизу и «t» в геометрических гротесках и вы заметите, насколько более детальна и своеобразна гуманистическая «t».
В этом и состоит суть гуманистических гротесков — в то время, как смысл геометрических гротесков — быть как можно проще, буквенные формы гуманистического гротеска созданы быть детальными, менее однородными, как правило, они состоят из штрихов разной толщины, кроме того, они происходят от человеческого почерка, что уже само по себе индивидуально. Чем же хороши гуманистические гротески? А тем, что они одновременно человечные и современные, чёткие и эмоциональные. К их недостаткам можно отнести, пожалуй, их вынужденную невыразительность и лицемерие: верных слуг корпоративной неискренности. 
Примеры гуманистических гротесков: Gill Sans, Frutiger, Myriad, Optima, Verdana.  

-6

Шрифты старого стиля

Эти шрифты — результат многовекового и постепенного становления форм нашей каллиграфии. Их особенность состоит в незначительной разнице в толщине основного и соединительного штрихов (так как техническое обеспечение того времени не позволяло большего), а также в небольшом наклоне влево (в точности как в каллиграфии). Несомненные достоинства: классика, традиции, удобочитаемость, недостатки — те же классические и традиционные черты.
Примеры антикв старого стиля: Jenson, Bembo, Palatino, Garamond.

-7

Шрифты переходного и нового стилей

С наступлением эпохи Просвещения стали предприниматься попытки изменить шрифт Cтарого стиля, стараясь придать буквам более геометричные, острые, точеные черты, а результатом этого явились шрифты переходного (середина 18 столетия) и нового (конец 18 века) стилей.
За что можно ценить шрифты переходного и нового стиля, так это за их чёткость, стиль и динамичность. Но, в то же время, им не хватает стилевой определенности: слишком броские и барочные, чтобы быть классическими, слишком громоздкие, чтобы быть по-настоящему современными.
Примеры антикв переходного стиля: Times New Roman
Примеры антикв нового стиля: Bodoni, Didot. 

-8

Брусковые шрифты

О них мы уже упоминали ранее. Брусковые шрифты обычно имеют такие же штрихи, что и гротески, но с прямоугольными засечками на концах. Брусковые шрифты сильно выбиваются из общего строя т.к. они вызывают очень специфичные, а порой даже противоречивые, ассоциации: иногда это мыслитель, иногда эдакий «крепкий орешек», хулиган или вовсе ботаник, также на ум могут прийти мысли о городских эстетах или ковбоях.
Брусковые шрифты очень сложно отнести к какой-либо из групп, но их отличительные брусковые засечки подобны паре очков в роговой оправе: они могут добавить отличительную изюминку, но c тем же успехом могут мозолить глаза, попав в неверное окружение.
Примеры брусковых шрифтов: Clarendon, Rockwell, Courier, Lubalin Graph, Archer.

-9

Наконец, про сочетания

Окей, всё ясно с вашими классификациями, а как всё-таки их сочетать?

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

Было бы совсем по-свински бросить вас на этом, поэтому держите несколько общих советов:

1. Не бойтесь контрастов

Избегайте скучных, средних и невыразительных вариантов. Если вы используете два шрифта, имеющие минимальные различия, то вы отвлечёте читателя вопросом — один это шрифт или всё-таки разные? Этот диссонанс будет бросаться в глаза и отвлекать от самого текста. Тут можно сформулировать такой принцип: часто два шрифта хорошо работают вместе, если они в одном очень похожи, а во всем остальном сильно разнятся. Этот общий элемент может быть визуальным (одинаковая высота или ширина штриха) или хронологическим. Именно для поиска таких сочетаний полезно разбираться в классификациях шрифтов. 

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

-10

2. Но будьте умеренны

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

На примере слева использован Antique Olive Nord — чрезвычайно жирный шрифт, — рядом с Garamond Narrow. Контрастный перебор очевиден. В большинстве подобных случаев такой контраст идёт дальше обычного привлечения внимания и вызывает ощущение неуклюжести. 

-11

3. Не используйте больше двух шрифтов

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

-12

4. Не смешивайте настроения шрифтов

Каждый шрифт имеет свою индивидуальность или, если хотите — личность. Плохо выбрать шрифт, не подходящий ситуации, но ещё хуже — выбрать два не сочетающихся по настроению шрифта.  

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

Справа пару Souvenir составил Futura Bold. Он очень хорошо сочетается с Souvenir по многим причинам: оба шрифта обладают округлостью форм и незначительной, но, тем не менее, заметной «закрученностью» концов. Ни один из них не доминирует над другим. Оба работают на создание веселого, приподнятого настроения. Напряжения между ними нет.

-13

5. Присвойте шрифтам разные роли

Например, одним шрифтом пишите только заголовки, а вторым — только основной текст. Или выделите отдельный шрифт для имён авторов статьи. Ролевые дизайнерские модели для каждого шрифта вносят порядок и гармонию.

В примере ниже использован Akzidenz Grotesk Bold прописными для имени автора статьи. Для заголовка — привлекающий внимание Rockwell Bold. Вводный абзац и основной текст статьи в одном шрифте – Bembo, но разного размера. И, наконец, подзаголовок — Akzidenz Grotesk Medium. Внимательный читатель заметит, что это также пример использования в одной дизайне трёх шрифтов (строго говоря, даже трёх гарнитур), которые, тем не менее, хорошо сочетаются друг с другом.

-14

TL;DR или вместо заключения

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

Автор статьи: Татьяна Коровкина

Источники:
1.
Html5book.ru: Выбираем шрифт для сайта
2.
Wikipedia.org