Руководство для начинающих по сочетанию шрифтов

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

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

Чтобы выбрать шрифт для логотипа или сайта, определите, какое настроение вы хотите передать. В этом вам помогут следующие вопросы:

  • Какой имидж у вашей компании?
  • Какие качества ценят клиенты?
  • Какие качества вашей компании вы хотите подчеркнуть: надежность, креативность, стабильность?
  • Опишите свой бренд в трех словах. Какие бы это были слова?
  • Кто ваш идеальный клиент?

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

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

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


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

Используйте простые и стандартные шрифты. Не слушайте тех, кто говорит, что стандартные шрифты это скучно. С их помощью можно создавать сильные знаки. Пример простой типографики: логотип студии DILETTANT. Денис Башев набрал его с помощью Arial.

У многих зарубежных компаний в основе логотипа лежит шрифт Helvetica, например, — старый логотип Microsoft, Lush, Nestle и Toyota.

Не ориентируйтесь на конкурентов. По статистике Tasty Placement, 63% мировых брендов используют гротески, из них треть — Helvetica. Это не значит, что вы должны писать все тексты на сайте и упаковке тем же шрифтом. Контраст не должен быть кардинальным. Достаточно взять шрифт с более яркими выносными элементами или другим типом засечек, выбрать более открытый гротеск, заменить шрифт на антикву или брусковый.

Недавно Netflix отказался от чрезмерно популярного гротеска Gotham и разработал собственный шрифт Netflix Sans. По первоначальным подсчетам, это позволит компании сэкономить несколько миллионов долларов на покупке лицензии шрифта.

Хороший пример того, как можно выделиться среди конкурентов, — это рынок медиа. В соцсетях большинство СМИ оформляет картинки гротесками, но посты The Village заметнее благодаря антикве.

Издание Meduza использует отдельные шрифты для разных рубрик: для новостей — антиква, для историй — гротеск.

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

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

Засечки и бруски

Наличие засечек (Serif) у шрифта – самый важный признак в любой классификации шрифтов. Форма засечки зависит от общей логики построения шрифта, а эта логика развивалась с Древнего Рима до наших дней. Из-за древнего происхождения шрифты с засечками называют антиквами. Шрифтами с засечками можно наслаждаться, как хорошим вином, на эту тему пишут целые книги, а здесь речь пойдет о том, в чем смысл засечек вообще и как их правильно использовать.

Вогнутые засечки – шрифт Lazurski, линейные засечки – шрифт Petersburg, брусковые засечки – шрифт Pragmatica Slabserif.

В текстовых шрифтах, типа Times New Roman или его аналогов, засечки на краях штрихов помогают глазу быстрее скользить по строке. Даже при слабой резкости засечка не дает оптическому искажению укоротить вертикальный штрих, из-за чего базовая линия строки и высота букв сохраняется. Поэтому шрифты с засечками чаще всего используются в объемных текстах художественной, научной или образовательной тематики.

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

Шрифт Trajan в кино

Бруски сильно отличаются от других форм засечек, поэтому для брусковых шрифтов часто выделяют отдельное место в классификации. Засечка считается бруском, если она достаточно ровная, прямоугольная и по толщине сравнима с основным штрихом шрифта. Такие буквы неудобно писать каллиграфическими инструментами, их лучше чертить, штамповать или вырезать. Такая форма не способствует комфортному чтению, но зато может переносить зрителя в разные места, от Дикого Запада до Германии 1930-х годов. Главная черта брусковых шрифтов – патриархальная суровость, поэтому они органично смотрятся в заводских цехах, магазинах инструментов или стейк-хаусах.

Восприятие шрифта в составе логотипа

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

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

Лучший шрифт для восприятия

63% используемых шрифтов в логотипах компаний – без засечек. Самый популярный среди них – Helvetica. Этот шрифт используется в 21% лого-надписей. Среди них такие крупные компании как Saint Laurent, Comme des Garsons, HBA, colette.

Helvetica считается лучшим шрифтом для восприятия. Мы тоже «примерили» его к нашему логотипу.

Шрифтовые пары для сайта

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

Что же происходит на странице (рис.1) с точки зрения шрифтовой пары? Когда мы заходим на сайт, мы видим огромное количество сочетаний текста. Мы видим заголовки, видим какой-то основной текст, видим какие-то подписи, рядом какие-то примечания. Мы видим дату, допустим, видим «сегодня» написано совершенно другим шрифтом. Вот этот шрифт тоже отличается от заголовочного, например, и вот от этого. И как это все правильно сочетать – вопрос.

Рис.1 Сочетание разных шрифтов на сайте

Если мы перейдем на сайт The New Yorker – здесь контраста гораздо больше (рис.2).

Рис.2 Сайт newyorker.com

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


Рис.3 Интерфейс

Кстати, рекомендую посмотреть прямо сейчас:

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

Тут ключевое в том, чтобы было достаточное количество контраста. Чтобы он не был слишком большой или слишком маленький, чтоб его было достаточно нам для нашей конкретной ситуации.

При подборе шрифтовой пары для сайта шрифт может выступать в роли такого самостоятельного изображения, самостоятельного плаката. Допустим, как здесь (рис.4). Тоже мы заметим, что есть разница в начертаниях – этот шрифт с засечками, этот шрифт без засечек; цвет и так далее.

Рис.4 Шрифт как самостоятельное изображение

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

И 4 инструмента для создания шрифтовой пары – так называемые 4 способа, 4 инструмента, которыми мы можем влиять на контраст (рис.5).

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

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

Также важно сказать про размер. Желательно, чтобы у вас разница между вашими строками, вашим шрифтом была больше, чем 1,6

1,6 – это цифра из пропорции золотого сечения. Используйте ее как просто коэффициент. То есть, если у вас есть какой-то текст, и вы хотите сделать какой-то заголовок к нему – умножьте размер этого текста на 1,6 и у вас получится размер заголовка. Если его будет достаточно, может быть, еще раз придется увеличить.

И, разумеется, цвет.

Давайте посмотрим, как это выглядит на примерах (рис.6).

Рис.6 Пример сочетания Baskerville и Gill Sans

Правила которые помогут вам выбрать нужный шрифт.

Комбинируйте шрифт с засечками и шрифт без засечек, чтобы создать контраст. Чем больше стили шрифтов не похожи друг на друга, тем больше у вас шансов создать удачную пару. Шрифты, которые слишком одинаково выглядят,  плохо смотрятся вместе. (Попробуйте совместить Helvetica и Univers, чтобы убедиться на примере, что это плохой вариант). Можно выбрать два шрифта с засечками или два без засечек для создания комбинации только в том случае, если они радикально отличаются друг от друга.

Избегайте выбора шрифтов из одной категории, например, рукописные шрифты или брусковые. (Шрифты Clarendon  и Rockwell смотрятся вместе не очень хорошо).

Определите каждому шрифту его задачу и придерживайтесь её.

Попробуйте шрифты из различных категорий, которые имеют одинаковую высоту строчных знаков и ширину глифов. (Например, Futura вместе с Times New Roman смотрятся плохо, потому что у них большая разница между х-высотой и шириной. )

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

Сравните начертание шрифтов: оно должно быть разным. (Например, Didot и Rockwell выглядеть очень плохо вместе по многим причинам, но одна из главных — потому что они оба имеют жирное начертание).

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

Найдите умный способ для создания контраста. Увеличьте трекинг  для одного шрифта и проверьте, как смотрится сочетание. Не пренебрегайте тем, чтобы использовать различные шрифты из одного семейства.  Например, можно выбрать Helvetica Black для заголовка и Helvetica normal для основного текста.

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

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

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


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

Так вы сможете быстрее и проще создавать различные пары.

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

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

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

Используйте не больше 2 гарнитур. Это даст вам до 8 шрифтов для работы: нормальный, полужирный, курсив и полужирный курсив

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

Измените размер кегля. Сочетание шрифтов может не согласоваться, но если вы измените размер одного из шрифтов, всё станет на свои места.

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

Не смешивайте настроение шрифтов. Беззаботный Gill Sans не захочет стоять рядом с деловым Didot, по крайней мере, смотреться вместе они будут плохо. Сочетайте два шрифта с одинаковым или похожим настроением.

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

Нарушайте правила. Найдите свой уникальный способ. Не бойтесь экспериментировать, но делайте это разумно!

Сочетаем 2: контраст

Контраст между двумя шрифтами часто является выигрышной комбинацией, но в каком случае шрифты будут контрастировать? Вот лишь несколько вещей, на которые стоит обратить внимание:

  • Стиль: Взгляните на любой сайт, где можно выбрать шрифты, и вы увидите, что они отсортированы как Blackletter, Monospace, Script, Slab Serif и т.д. Шрифты разных стилей почти всегда будут сочетаться.
  • Размер: большой шрифт, маленький шрифт. Все.
  • Вес: Меняя вес шрифта легко подчеркнуть визуальную иерархию. Иерархию на основе контраста.
  • Форма: взгляните на пропорции гарнитур. Относительная длина спусковых, изогнутость плеча, направление движения
  • Цвет: особо не будем это рассматривать, но с помощью цвета легко убедиться, насколько хорошо работают два шрифта.

Самое простое – использовать контраст шрифта без засечек и шрифта с засечками.

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

Georgia и Arial

Где можно такое увидеть? Например у шаблона skeleton. В таком легком окружении Georgia и Arial прекрасно сочетаются.

Чуть изящнее..

PT Serif и PT Sans

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

Lora Bold и Istok Web

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

Узкие шрифты часто работают в плане привлечения внимания, так как они занимают большое количество вертикального пространства.

Bebas Neue и Alex Brush

Вот пример схожей комбинации, которая отлично работает:

Отличная работа  Gerren Lamson и Simon Walker

А для тех из из вас кому это интересно, вот гарнитуры этих шрифтов:

  • Подзаголовок: Scriptorama Tradeshow JF
  • Основной текст: Actor (Google Web Fonts)
  • Заголовок: кастомная гарнитура от Simon Walker

И еще раз, цвет также позволяет неплохо подчеркнуть иерархию..

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

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

and Gudea

Взгляните на этот брусковый шрифт; минимум усилий, максимум воздействия.

Alpha Slab One and Mako

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

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


Некоторые шрифты настолько прекрасны, что вы почти не можете промахнуться, выбрав их. Например, Buttermilk; роскошный, сочетающийся и декоративный. Он будет прекрасно смотреться с любым другим шрифтом (до тех пор, пока вы не попытайтесь украсть его искру!) Здесь мы его совместили с Georgia:

Buttermilk and Georgia

А здесь с Aller, таким же простеньким шрифтом без засечек:

Buttermilk and Aller

Далее я попытался сочетать его с другим шрифтом с очень сильным характером. Но знаете что? Вполне себе ничего получилось! Никогда не узнаешь заранее..

Buttermilk and Eccentric

Рукописные (Script)

• Определяющая особенность: подражание почерку или каллиграфии

• Основное применение: Различный

• Примеры: Shelley, Bickham

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

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

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

Легкая и воздушная Bellissima — это фаворит для роскошных этикеток и свадебных приглашений

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

Многие старомодные готические шрифты (такие как Osgard Pro) имитируют каллиграфические надписи

При поиске скриптовых шрифтов дизайнеры обычно ищут уникальный внешний вид. Ни один рукописный шрифт не имеет профиль Times New Roman или DIN, например.

Однако Shelley и Bickham входят в число классических и оба очень элегантны. Bellissima светла и воздушна, и была хитом для студии Sudtipos. Для более мужественных надписей попробуйте Christopher Hand или Black Jack.

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

Webtype

Webtype находится в ведении настоящих шрифтовых ботанов из Font Bureau. И хотя их библиотека не так уж велика, они предлагают только качественные шрифты и специализируются на текстовой стороне вопроса. Если для вас качество важнее количества, то этот сервис для вас. Они постоянно тестируют шрифты, чтобы они выглядели прекрасно и на Mac, и в Windows. В Windows шрифт отображается немного по-другому, поэтому иногда то, что прекрасно выглядит на Mac, смотрится странно в Windows.

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

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

Вывод

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

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

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


С этим читают