В момент разработки сайта, приложения, визитки и т.д. у любого дизайнера возникает вопрос - какой выбрать шрифт? Конечно, можно выбрать тот, что больше всего Вам по вкусу или довериться интуиции. Однако этот процесс требует куда более сложного подхода.
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! Эта небольшая разница в рендере в итоге сильно мешает. Ее можно заметить, проведя пару тестов того, как шрифт выглядит в редакторе и в браузере.
Наглядно, почему подходить к выбору шрифтов нужно серьезно:
Подходя к выбору шрифта помните, что форма влияет на содержание и шрифт напрямую отражает лицо бренда. А еще не ленитесь тестировать!
_______________________________________________________________________
На написание статьи вдохновил Филипп Нуруллин.
Если верить wiki, то типографика не только шрифт
Типогра́фика (от греч. τύπος — отпечаток + γράφω — пишу) — искусство оформления печатного текста[1], базирующееся на определённых, присущих конкретному языку правилах, посредством набора и вёрстки. Типографика, с одной стороны, представляет собой одну из отраслей графического дизайна, с другой – свод строгих правил, определяющих использование шрифтов в целях создания наиболее понятного для восприятия читателя текст.
И если говорить про веб-дизайн, то почему фотошоп и скетч?
Все понял, кроме того, что такое "рендор" 🤔
Очепятались, исправились))
спасибо
👍
Комментарий недоступен
Дерьмово сверстанный текст выглядит дёшево, сразу теряется доверие к сайту или чему угодно, где этот текст написан
Конечно 100500 тонкостей влияют)) тут только одну из них расписали)
Лучше, когда все в комплексе сделано с нормальным подходом и знаниями)
p.s. Отпуск близко, крепитесь! Мы тоже ждем)
данные по ценам typekit устарели
оу, не знали, спасибо!
со шрифтами в таблице проиграли
Я думала ,что это не имеет значения тк в браузере отображается,какой шрифт и цвет в коде указали,а не в фотошопе