Как правильно подбирать шрифты

(Перевод Виктории Шидловской статьи Best Practices of Combining Typefaces из журнала Smashing Magazine)

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

Итак, все шрифты делятся на те, что с засечками (serif) и без засечек (sans serif, от французского sans — без). Шрифты без засечек по-русски принято называть рублеными.

И оказалось, что по европейской традиции шрифты с засечками делятся на 4 класса:

Пример старостильного шрифта - Garamond

Old style или Humanist (Старый стиль) – шрифт появился в 1465 г., характеризуется диагональным акцентом (это означает, что самая тонкая часть шрифта находится под углом, а не точно посередине сверху или снизу), небольшой разницей между толстыми и тонкими линиями шрифта, а также отличной читабельностью.

Старо-стильные шрифты делятся на категории Venetian и Aldine (также называют Garalde). Примеры шрифтов класса Old style Adobe Jenson (Venetian), Janson, Garamond, Bembo, Goudy Old Style, и Palatino (все Aldine или Garalde).

Пример шрифта класса Transitional - Times New Roman

Transitional или Baroque (Переходный или Барочный) – впервые появился в середине 18-го века. Эти шрифты наиболее широко распространены, среди них Times New Roman (1932) и Baskerville (1757). Этот класс шрифтов с засечками находится между старостильными и современными (modern), отсюда и название Transitional. Разница между тонкими и толстыми линиями шрифта более отчетливая, чем в старом стиле, но не такая драматичная, как в современном.

Пример шрифта класса Modern - Bodoni

Modern или Didone (Современный) – появился в конце 18-го века. Характеризуется экстремальным контрастом между тонкими и толстыми линиями знака. Современный шрифт имеет вертикальный акцент (тонкие линии точно посередине вверху и внизу), тонкие красивые засечки. Шрифт тонкий, но вертикальные линии очень толстые. Большинство шрифтов класса Modern менее читабельные, чем Old style и Transitional. Примеры шрифта — Bodoni, Didot, и Computer Modern.

Пример шрифта класса Slab serif - Rockwell

Slab serif или Egyptian (Брусковый) – обычно имеет совсем незначительную, если вообще имеет, разницу между тонкой и толстой частью знака. Slab serif обладают «толстым», квадратным видом и иногда имеют фиксированную ширину, что означает, что все знаки и пробелы между словами имеют одинаковую ширину (как typewriter). Иногда такие шрифты называют рубленными с засечками, так как они имеют вид шрифтов без засечек. Slab serif появился примерно в 1800 году. Примеры шрифтов — Clarendon, Rockwell и Courier.

Ну а теперь перейдем к теме статьи — как правильно подбирать и сочетать шрифты при создании макета.

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

Сочетайте шрифты с засечками со шрифтами без засечек (sans serif и serif)

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

На рисунке внизу — типичная текстовая раскладка. На примере слева в заголовке использован Trade Gothic Bold No.2, а в тексте — Bell Gothic. Оба шрифта – рубленые. Однако, у них очень разные «личности». Хорошее правило при создании макета, не привлекать излишнее внимание читателя к виду шрифта. Trade Gothic предполагает серьезность, а Bell Gothic, наоборот – динамику и экспрессивность.

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

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

Избегайте шрифтов из одного класса

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

На примере внизу, слева, в заголовке использован шрифт Clarendon Bold, который относится к классу Slab serif. В теле статьи использован Officina Serif который также относится к slab serif. Шрифты класса Slab serif отличаются ярко выраженным характером, им нравится доминировать на странице. Использование двух шрифтов класса slab serif в одном месте может вызвать ненужное напряжение.

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

Подбор шрифтов из разных классов с самого начала избавит вас от головной боли по поводу макета.

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

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

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

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

Контрастная жирность шрифтов

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

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

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

Создайте на странице различную тональность текста

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

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

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

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

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

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

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

Сочетайте яркое с нейтральным

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

На примере слева Dax Bold стоит рядом с Bernhard Modern. Плохой выбор хотя бы по двум соображениям.

Во-первых, Dax имеет узкие знаки и большую x-height, в то время как Bernhard Modern, наоборот, при большой ширине глифов обладает одной из самых низких x-height среди популярных классических гарнитур. Во-вторых, Dax неформальный, современный и яркий. Идеально подходит при подачи текста технарям, компьютерщикам и вообще современной молодежи. Bernhard Modern, наоборот, классический, спокойный, рафинированный и даже немного личный. Объедините неподходящие физические характеристики шрифта с личностными, и получите очень плохо функционирующую типографику.

Взглянем на более удачный выбор. В правой колонке Dax Bold поставили рядом с Caslon. Caslon относится к классу Old style (Старый стиль), но был модернизирован и смягчен для лучшей сочетаемости с другими шрифтами. В данном контексте он выглядит удовлетворительно рядом с Dax. Заметьте, как в первую очередь мы видим личность Dax в заголовке, и как Caslon отступает назад и приглашает нас к чтению. В этом примере Caslon является нейтральным выбором для поддержки более яркого Dax.

Избегайте несоизмеримых сочетаний

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

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

Справа в заголовок мы поставили Antique Olive Nord. Garamond Narrow мог бы быть заменен на тот же Garamond в варианте book weight, но более хороший выбор — после некоторых колебаний — это Chaparral. У Chaparral более высокая x-height, чем у Garamond, и в общем у него более современный и нейтральный вид рядом с характерным Antique Olive Bold.

Будьте проще – не используйте более двух шрифтов

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

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

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

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

Используйте различные размеры шрифта

Самый простой принцип мы оставили напоследок: используйте разные размеры шрифта для достижения контраста между ними.

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

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

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