В момент разработки сайта, приложения, визитки и т.д. у любого дизайнера возникает вопрос — какой выбрать шрифт? Конечно, можно выбрать тот, что больше всего Вам по вкусу или довериться интуиции. Однако этот процесс требует куда более сложного подхода.
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! Эта небольшая разница в рендере в итоге сильно мешает. Ее можно заметить, проведя пару тестов того, как шрифт выглядит в редакторе и в браузере.
Игорь, дизайнер
Наглядно, почему подходить к выбору шрифтов нужно серьезно:
Не надо так!)
Подходя к выбору шрифта помните, что форма влияет на содержание и шрифт напрямую отражает лицо бренда. А еще не ленитесь тестировать!
__________________________________________________________________
На написание статьи вдохновил Филипп Нуруллин.
