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

Published in

NetLabCS

6 min readDec 20, 2018

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

1. Где вообще искать шрифт и сколько это стоит

Прежде чем купить шрифт, следует знать где он будет использоваться. Существует несколько лицензий при покупке шрифта, рассмотрим 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 основных истока таких инструментов — широкое перо и узкое перо.

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

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

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

3. С засечками или без?

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

Гротеск (без засечек)

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

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

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

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

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

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

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

Шрифты с засечками — Антиква

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

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

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

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

Примеры Minion, Arno

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

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

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

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

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

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

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

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

Какой у него наклон оси?
Какой у него скелет?
Какой контраст штрихов?

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

4. Без чего шрифт нельзя считать идеальным

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

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

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

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

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

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

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

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

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

5. Не рекомендую работать с шрифтами в Photoshop

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

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

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

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

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

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