Гайд для веб-дизайнера: 5 шагов к идеальной типографике

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

Прежде чем купить шрифт, следует знать где он будет использоваться. Существует несколько лицензий при покупке шрифта, рассмотрим 2 наиболее популярные: Desktop и Web.

После того, как мы определились какая лицензия нужна, встает вопрос - где покупать шрифты?

На данный момент есть 2 основных ресурса:

Их лицензия предполагает 10 000 просмотров в месяц. Также можно посмотреть шрифт на сайте шрифтового дизайнера, там он может стоить дешевле.

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

Если вы пользуетесь Creative Cloud и продуктами компании Adobe , то наверняка знакомы с fonts.adobe.com. Пока нет? Вы можете подписаться на этот сервис за 49.99$ в месяц.

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

Следующая система typography.com – как пример того, чем не надо пользоваться. В ней всего 2 кириллических шрифта (Gotham и Whitney) при стоимости подписки 100 долларов в месяц. Хотя, если они вам принципиально нужны, можете заплатить, имея при этом вдвое меньше просмотров

monotype.com - отличный сервис всего за 15 долларов в месяц с доступом к гигантской библиотеке, где много кириллицы.

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

Открываете каталог одного из сервисов:

Выбираете шрифт, который вам нужен, платите небольшую сумму и берете шрифт в аренду на определенный срок (от минуты до недели).

И, конечно, есть бесплатные сервисы:

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

Мы разделяем букву на 2 основных элемента: скелет и мясо. Наиболее явно увидеть скелет можно написав букву тонкой ручкой или маркером. Так она теряет все свои особенности контраста. А в очень жирном начертании штрих начинает работать, и мы видим как раз мясо.

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

Существует 2 основных истока таких инструментов – широкое перо и узкое перо.

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

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

Шрифты, которые писались с помощью остроконечного пера – более статичны по природе штриха из-за материала и инструмента.

Как вы знаете, шрифты бывают трех типов:

Шрифт без засечек в свою очередь разделяют на 2 категории: гуманистические и геометрические.

Самый яркий пример гуманистического гротеска - Gill Sans

Его легко узнать по высокому контрасту штрихов, даже если скелет не так явно отсылает к гуманизму.

Примеры - Pt Sans, Mediator

Самый яркий пример геометрического гротеска Futura

Характеризуется низкой динамикой, минимальным контрастом шрихов, правильными формами.

Примеры - GT Walsheim, Proxima Nova, Graphik

Классифицируются на 3 типа:

Гуманистическая (старого стиля) - ширококонечное перо

Самый яркий пример Garamond

Характерно сильное влияние широконеного пера, сильный наклон оси овалов, при этом умеренный контраст шрихов, засечки плавно перетекающие в вертикальный штрих.

Примеры Minion, Arno

Контрастная (Классицистическая) - остроконечное перо.

Яркий пример Bodoni, Didona

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

Для сравнения:

Переходная - нечто среднее между ними

Характеризуется слабым влиянием ширококонечного пера, слабым наклоном оси овалов, умеренным контрастом штрихов

Примеры - Georgia, GT Sectra

Определить то перед вами за шрифт помогут ответы на следующие вопросы:

Есть еще декоративные шрифты, которые не относятся ни к Гротеску ни к Антикве, о них поговорим в другой раз.

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

Какими качествами должен обладать идеальный шрифт?

Во-первых, должен четко отображаться на экране.

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

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

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

Что делает шрифт читабельным?

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

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

В чем разница этих технологий?

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

То есть, при сильном приближении можно заметить, что в контуре присутствуют цветные пиксели. Это позволяет более точно интерпретировать контур шрифта.

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

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

_______________________________________________________________________

На написание статьи вдохновил Филипп Нуруллин.