Как я сделал шрифт, который меняется вместе с кеглем

Делюсь опытом разработки шрифта: как шёл от технологии к идее шрифта и что в итоге вышло.

Fer — шрифт без засечек для самых разных текстов. Он подойдёт для сайтов, печати или фирменного стиля.

Когда читаешь текст, набранный Фером, остаётся послевкусие букв на проржавевших табличках где-то в Южной Европе. Поэтому я и назвал его Fer (по-французски — железо).

В рисунке Фера есть лёгкие отсылки к прошлому за счёт закрытых апертур и поднятой талии в К, Ж и других буквах. Ещё в шрифте есть лёгкая разноширинность, то есть знаки в нём отличаются по ширине. Например, круглые буквы, как О, широкие, а прямоугольные, как Н или И, — более узкие.

У Фера три линейки начертаний: для мелких подписей, текста и заголовков. Причём пропорции шрифта и даже рисунок ключевых знаков меняются во всех этих линейках. Благодаря этому Фер хорошо смотрится в любом кегле. Расскажу, как я к этому пришёл.

<p><i>У Фера характерные закрытые апертуры. Например, обратите внимание, какая закрытая буква «e» в названии шрифта</i></p>

В 2019 году Паратайп работал над шрифтовой системой для Сбера. Для этого проекта Саша Королькова, арт-директор студии, сделала в шрифтовом редакторе Fontlab шрифт-конструктор, где стоит поменять одну запчасть в одном знаке, и она меняется во всех остальных местах. Мы с Сашей работаем в разных редакторах: она в FontLab, а я в Glyphs. Глядя на то, что Саша сделала в Фонтлабе, я подумал, что хочу сделать такой же гротеск-конструктор для Глифса.

Мой шрифт-конструктор

В итоге у меня получилась заготовка под гротеск. Я стал с ней работать, сделал несколько начертаний, пока не пришёл к тому, что потом стало Фером. Так Фер начался с идеи конструктора, а в процессе у него постепенно проявился характер.

Работа над шрифтом заняла три года с 2020 по 2023, что для такого масштаба абсолютно нормально. Самой интересной стадией работы были первые два-три месяца, когда я искал пластику и настраивал ритм. Всё остальное время я расширял знаковый состав, добавлял начертания и делал шрифт качественнее: уточнял рисунок знаков и работал над межбуквенными расстояниями. Это довольно скучная работа, но именно она при разработке шрифта занимает больше всего времени.

Когда работал над Фером, я много открыл для себя в плане языковой поддержки и знакового состава. Разобрался, чем в башкирском буква «Ҫ» отличается от чувашского. Многие знают, что в сербском «б» другая или что есть болгарская кириллица. А о том, что в Чувашии и Башкирии тоже есть свои местные варианты, очень мало кто знает.

<i>Три линейки начертаний в Фере. Обратите внимание, что в них всех Фер выглядит по-своему</i>

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

В итоге получились три линейки начертаний для статичной версии шрифта, и в каждой из них рисунок и характеристики Фера немного отличаются:

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

Text — для обычного текста, как тот, что вы читаете сейчас. Шрифт не перетягивает на себя внимание и легко читается.

Caption — для подписей и текстов в кегле меньше 10. В этой линейке у Фера крупные строчные буквы, почти нет разноширинности, а апертуры, как в букве С, более открытые. Это нужно, чтобы текст не слипался.

<p><i>Регулярное и чёрное начертания Фера в разных оптических размерах: для заголовков, текста и мелких подписей</i></p>

Разные начертания для разных оптических размеров шрифта нужны, чтобы шрифт максимально хорошо работал в своём кегле. Например, чтобы заголовки выглядели яркими, обычный текст читался легко и шрифт не отвлекал от него, а буквы в самых мелких подписях не сливались. И для всего этого не нужно покупать три разных шрифта. Достаточно в статичной версии Фера выбрать нужную линейку начертаний (Display, Text или Caption), а в вариативной версии — подвигать курсор.

<p>При одной и той же жирности (смотрите строку weight), пропорции букв в начертаниях меняются. Это нужно, чтобы шрифт наиболее оптимально смотрелся в нужном размере</p>

Для ускорения работы я купил плагин для Глифса RMX Tools. Он помогает быстро делать дополнительные начертания и работает не только с интерполяцией контуров, но и с экстраполяцией. Это помогло мне быстрее сделать вариативный шрифт, где в одном файле есть весь диапазон начертаний и между ними можно легко переключаться.

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

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

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

Надеюсь, всё рассказал. Если что-то упустил, спрашивайте в комментариях, буду рад ответить. Делитесь, как сами работаете над шрифтами или что нравится в чужих шрифтах. А посмотреть Fer в магазине и набрать им какую-нибудь фразу можно вот здесь.