Комбинирование шрифтов: теория и практика
В русскоязычном интернете существует на так много статей о комбинировании шрифтов и еще меньше где не было бы воды.
Данный текст будучи частичным переводом сразу из двух источников: A Beginner’s Guide to Pairing Fonts и Best Practices of Combining Typefaces, призван хоть частично восполнить данный пробел.
Прочитав эту статью вы узнаете основные способы сочетания шрифтов друг с другом, которые при определенном усердии и внимании всегда дадут положительный результат. Но нужно помнить, что комбинирование шрифтов это искусство, а не наука и нет никаких абсолютных правил при объединении шрифтов в дизайне.
Данный текст состоит из двух частей, в первой показано на что обращать внимание при комбинировании, а во второй рассмотрены конкретные примеры и показано как избежать промахов.
Теория и немного практики
Подбирая шрифты всегда держите перед собой свою основную цель. Чего вы хотите достичь? какой эмоциональный посыл донести? (строгость, игривость, и т.п.).
Сколько шрифтов можно использовать?
Сколько использовать шрифтов полностью зависит от вас, но всегда имейте ввиду какой эффект вы хотите получить. Думайте о шрифтах как о гостях на вечеринке, много ярких личностей могут создать напряжение, но без человека с харизмой может стать слишком скучно.
Нет никакого правила в том какое максимальное число шрифтов должно быть на странице, но чем больше число шрифтов тем труднее достичь гармонии. Однако если это удается то результат получается декоративно ярким.
Тем не менее для начала попытайтесь использовать минимальное число шрифтов. Один из крайних вариантов использовать одну гарнитуру, но с несколькими размерами и весами, тогда можно быть уверенным что шрифты хорошо дополнят друг друга.
Иерархия шрифта
При использовании нескольких шрифтов убедитесь что их роли четко установлены и они не пересекаются. Шрифт для основного тела сайта, заголовков, подзаголовков, цитат? Убедитесь что если шрифт используется в качестве подзаголовка в одном месте, то он же используется и в другом.
Держите роль шрифта ясной
Ближе к делу
Возможно вы уже слышали что успешное сочетание достигается согласием и контрастом, но не конфликтом. Шрифты могут хорошо работать путем сочетания определённых внешних качеств или их полного различия, но будут конфликтовать если слишком подобны друг другу и различаются только в мелких деталях.
Согласие
Согласие (согласованность) двух шрифтов подразумевает наличие одного признака в них обоих. Это может быть кернинг, пропорции, вес, и т.п. признаки.
Один из способов достижения согласия это выбор шрифтов из одного семейства.
Пример: семейство Droid разработанное Стивом Матесоном для использования в первых версиях Android от Google. Шрифт с засечками для заголовков и без для основного текста.
Шрифты чистые и современные, хотя и не так сильно приспособленные для экранов с большой плотностью экрана из-за чего Google и перешел на шрифт Roboto, но хорошо подходят для интернета из-за своей большой высоты строчных символов, что помогает читабельности.
Так же шрифты одного и того же дизайнера часто разделяют общие качества и способствуют достижению гармонии.
Посмотрите на два шрифта ниже обратите внимание на совпадающие пропорции и овал буквы «O».
На первый взгляд между шрифтами ниже ничего общего, но посмотрите на линии изгибов и буквы «u» «t»
Более мягкие линии могут быть так же эффективны.
Следует иметь ввиду что согласованность шрифтов обычно ведет к более спокойному уравновешенному дизайну, что хорошо себя проявляет в достаточно официальных сайтах.
Контрастность
Контрастность часто бывает выигрышным приемом. Но каким образом можно подобрать такие шрифты?
Вот некоторые способы:
- Стиль: На любом сайте каталоге шрифтов вы увидите категорию шрифта как правило шрифты разных категорий контрастны.
- Размер: Больший шрифт, маленький шрифт.
- Вес: Изменение толщины линий является наиболее распространенным способом выстраивания визуальной иерархии.
- Форма: Пропорции шрифта, наклон (нужно применять очень осторожно), противопоставление прописных и строчных букв.
- Цвет: Для цвета конечно нужна отдельная статья, здесь можно сказать только что хорошо контрастируют ахроматические (бесцветные) и хроматические цвета, а так же холодные и теплые.
Самый простой способ контрастности это комбинация шрифтов без засечек и с засечками.
Это классический способ сочетания шрифтов, использование в заголовках шрифт с декоративными засечками, а для основного текста без засечек. Или наоборот взять простой шрифт без засечек для заголовков и приятно разборчивый с засечками для основного текста.
Пример:
Более утонченный пример:
Не забывайте о роли шрифта, в приведенных выше примерах иерархия показана через размер — заголовки больше основного текста. Есть и другие способы показать кто в доме хозяин, например через вес.
Возможно мы имеем дело только с двумя заголовками без основного текста, тогда можно позволить себе больше вольностей например:
Уплотненные шрифты всегда хорошо работают для привлечения внимания благодаря своей большой плотности.
Опять же четкая иерархия через контрастность и цвет.
Брусковые шрифты очень эффективно привлекают внимание, но могут вести себя как бык в посудной лавке если не быть осторожным. Кажется что это очень разные шрифты, но опять же если посмотреть на кривые символов можно увидеть что они не так различны как кажется.
Конфликт
То чего нужно всегда избегать.
Проще всего это проиллюстрировать на примере:
Казалось бы, шрифты разные. Они имеют разные стили один Готический другой Римский, у них разные пропорции и разная высота. И они вполне могут контрастировать друг другу. Однако в реальности это не так. У них общая толщина и шпоры на конце каждого символа, но при этом имеют много мелких различий.
Шпоры очень схожи, но имеют разную кривизну, особенно проявляющийся на букве «T»:
Так же у них различный наклон осей направленный при этом в одну сторону:
Готическое письмо придает направление буквам, в то время как Римское письмо вертикально:
Эта похожесть и разница формирует общее впечатление не комфортности. Это трудно объяснить в в фактах и цифрах, но как правило будет ощущение что вам такой набор не нравится, попробуйте понять почему. Тогда набив руку вы будете быстрее принимать решения в будущем.
Маленький совет
Если вы зайдете в каталог веб-шрифтов Google, то найдете предложения комбинаций для каждого шрифта.
Практика и немного теории
Далее будут разобраны практические примеры сочетания шрифтов и показаны основные ошибки.
Комбинирование шрифтов без засечек и с засечками
До сих пор самым популярным принципом для создания комбинаций гарнитур является соединение шрифтов без засечек с засечками. Это классическое сочетание в котором почти не возможно ошибиться.
В приведенном примере показан типичный макет статьи. Слева пара шрифтов Trade Gothic Bold №2 и Bell Gothic. Оба шрифта без засечек, но при этом имеют очень разный характер.
Хорошее эмпирическое правило, когда дело доходит до выбора шрифтов (для заголовка и основного текста), не создавать излишнего внимания к индивидуальности каждого шрифта в отдельности, так как и заголовок и текст являются единой смысловой структурой. Trade Gothic это шрифт без излишеств, с другой стороны Bell Gothic гораздо более динамичный и откровенный.
Вместе эти два шрифта создают нежелательный конфликт. Trade Gothic хочет добраться до фактов, а Bell Gothic повеселиться. Эта напряженность скорее всего не является частью дизайна и её следует избегать.
Теперь давайте посмотрим на правую часть. В нем Bell Gothic заменен на статный и величавый Sabon. Sabon являющийся шрифтом с засечками очень хорошо работает с Trade Gothic, оба они полужирные высоко-читабельные благодаря большой высоте строчных букв. Находясь в одном контексте они служат одной цели что делает их еще больше подходящими для данной комбинации.
Избегайте шрифтов из одной классификации
Тут как нельзя хорошо подходит статья про классификацию шрифтов.
Гарнитуры из одной и тоже классификации но из разных семейств легко могут создать напряженность. Такие шрифты обычно недостаточно различны и выглядят вместе как своего рода типографская грязь.
В этом примере на левой стороне у нас есть заголовок из шрифта Clarendon Bold, который является брусковой антиквой. Основной текст выполнен из Officina Serif, который так же является брусковым. Брусковые шрифты известны тем что любят доминировать в любой области где используются. Два шрифта такого рода создают ненужную напряженность.
Теперь обратите внимание на пример справа. Clarendon Bold в паре с гораздо более нейтральным New Baskerville. New Baskerville является переходной антиквой с широкими глифами, что приятно дополняет тяжелый Clarendon. В то же время он отступает и позволяет Clarendonу показывать свою индивидуальность во свей красе.
Выбор шрифтов из различных классификаций в самом начале позволяет избежать ненужной напряженности.
Связь через иерархию
Один из способов объединить несколько шрифтов это спроектировать схему на основе ролей для каждого шрифта и придерживаться её.
В следующем примере был использован Akzidenz Grotesk Bold для заглавных букв в самом верху (первая строчка). Затем использовался Rockwell Bold для заголовка статьи. В основном тесте используется Bembo двух разных размеров. Наконец заголовок второго уровня выполнен из Akzidenz Grotesk Medium.
Таким образом у нас есть привлекающий внимание заголовок из Rockwell, консервативный подзаголовок без засечек из Akzidenz Grotesk и основной текст с засечками. Про комбинацию с засечками и без говорилось уже выше, но стоит заметить что кроме этого здесь есть большое изменение размера, веса и функций среди используемых шрифтов.
В целом все шрифты использующиеся тут стягивают дизайн в единое целое, так как каждая роль шрифта фиксирована в четкой типографской иерархии.
Контрастность при помощи насыщенности шрифта
Безошибочный способ построить иерархию, изменить размер шрифтов в зависимости от роли. Но не менее важно помочь читателю четко разделив веса шрифтов.
В примере у нас очень приличный контраст в размере, но толщина не достаточна. Шрифт Myriad Light хоть и больше и выше, но теряет свою власть из-за более толстого Minion Bold. Мы же наверняка хотим чтоб взгляд читателя прошелся по заголовку по крайней мере в начале чтения.
Справа установлен Myriad Black над Minion. Он может показаться слишком толстым, но здесь нет никакой путаницы относительно того, что читатель должен прочесть в самом начале.
Создание различного типографского “цвета”
Типографский цвет — комбинированный эффект из вариаций плотности, размеров, ширины штриха, кернинга и ряда других факторов. Самый простой способ увидеть типографский цвет это прищуриваться до тех пор пока вы не сможете уже прочитать страницу, но все еще сможете увидеть текст.
Если вы так посмотрите на пример, то заметите что слева текст сливается в единое целое, даже скорее становится чуть более плотным внизу. Однако справа визуальная иерархия сохраняется даже если текст уже больше не прочитать. Таким образом нет никакой путаницы относительно того где тут заголовок, и ваш взгляд может скользить по тексту.
Сознательное использование типографского цвета усиливает визуальную иерархию страницы, и связывает её со смыслом и желаемой целью сообщения.
Не смешивайте настроение
Частая типографская ошибка, не признавать за шрифтом его настроение. Гарнитуры имеют индивидуальность. Она может изменятся в некоторой степени в зависимости от контекста, но не сильно. Чем больше используется различных шрифтов тем больше вероятность вляпаться в ошибочную идентификацию настроения.
В левой части этого примера мы имеем Franklin Gothic Bold в паре с Souvenir. Основное ощущение от Franklin Gothic это стойкость, крепость, сила, но с изысканным чувством элегантности и целеустремленности. Он достаточно нейтральный и функциональный. С другой сторону Souvenir игривый бродяга, чуть отчужденный и очень симпатичный. Встретить их вместе это тоже самое что увидеть как девочка пытается рассмешить солдата у вечного огня.
Справа заголовок заменен на Futura Bold. Данный шрифт имеет много граней, но в данном случае важны следующие моменты: оба шрифта имеют высокие строчные буквы и очень округлое начертание, обе гарнитуры немного причудливы и не доминируют друг над другом. Они работают вместе создавая веселый и оптимистичный настрой.
Контраст на нейтральности
Чистый типографский дизайн требует особого внимания к напряженности. Если один из основных шрифтов очень индивидуальный, то возможно требуется дополнительный нейтральный шрифт.
В данном примере слева используется пара Dax Bold и Bernard Modern. Данный выбор плох по двум причинам. Во-первых Dax имеет узкие символы и большую высоту строчных символов, в то время как Bernhard Modern имеет очень широкие глифы и одну из самых низких высот символов среди всех популярных классических шрифтов. Во-вторых, Dax неофициальный современный яркий шрифт. Он отлично подходит для технарей, гиков и современного общения. С другой стороны Bernhard Modern тихий элегантный и даже интимный. Объединения очень разные характеры мы получаем плохой дизайн.
С правой стороны Bernard Modern заменен на Caslon. Caslon гарнитура старого стиля, но была модернизирована и приятно играет с другими шрифтами. Обратите внимание как Caslon отходит в тень на фоне более яркого Dax.
Избегайте слишком разрозненных комбинаций
Когда шрифты слишком контрастны может создаться визуальный дисбаланс, который работает против общего дизайна.
Слева, у нас Antique Olive Nord — чрезвычайно тяжелый шрифт в паре с Garamond Narrow. Слишком большая контрастность очевидна. В большинстве случаев, такой крайний контраст выходит за рамки и привлекает внимание своей неуклюжестью.
Справа, Antique Olive Nord был заменен на более сдержанный Antique Olive Bold. Garamond Narrow можно было бы заменить на Garamond Book, но после раздумий был выбран Chaparral. Chaparral имеет большую высоту строчных букв и в целом является более современным и как следствие нейтральным, против достаточно своеобразного Antique Olive.
Не усложняйте — Попробуйте всего две гарнитуры
Часто в поисках правильного сочетания перелопачивают огромные библиотеки шрифтов. В то время как гораздо легче придерживается всего двух гарнитур и использовать классический прием с засечками и без.
В приведенном примере была создана четкая визуальная иерархия и высокое разнообразие всего с помощью двух гарнитур. Тем не менее при этом использовалось пять шрифтов: три Helvetica Neues и два Garamond.
Почему это работает?
Во-первых, при использовании различных шрифтов из одной гарнитуры существует высокая визуальная совместимость. Во-вторых были выбраны проверенные временем комбинации шрифтов классический нейтральный заголовок и классическое тело письма.
Планирование ролей шрифтов и следование им дает великолепный результат при минимальных усилиях.
Используйте разные размеры
Уже говорилось один из простейших принципов использование разных размеров для создания контраста и дистанции.
В примере слева заголовок и основной текст слишком слиты. Прищурьтесь и сравните левую и правую части.
В обоих случаях у нас два одинаковых шрифта, но разных размеров. TheMix Italic был значительно увеличен, в то время как New Century Schoolbook был уменьшен, но остался достаточно разборчив.
Использование различных размеров помогает выстроить типографскую иерархию и увеличить разнообразие типографского цвета.
Послесловие
Поиск удачных комбинаций шрифтов часто очень утомителен, так как нет никаких жестких правил в данном вопросе. Надеюсь, что данная статья рассказывающая об основных принципах сочетания гарнитур улучшит понимание и поможет уменьшить время для нахождения наилучшего результата в вашем дизайне.