Как я сделал шрифт, который меняется вместе с кеглем
Делюсь опытом разработки шрифта: как шёл от технологии к идее шрифта и что в итоге вышло.
Fer — шрифт без засечек для самых разных текстов. Он подойдёт для сайтов, печати или фирменного стиля.
Когда читаешь текст, набранный Фером, остаётся послевкусие букв на проржавевших табличках где-то в Южной Европе. Поэтому я и назвал его Fer (по-французски — железо).
В рисунке Фера есть лёгкие отсылки к прошлому за счёт закрытых апертур и поднятой талии в К, Ж и других буквах. Ещё в шрифте есть лёгкая разноширинность, то есть знаки в нём отличаются по ширине. Например, круглые буквы, как О, широкие, а прямоугольные, как Н или И, — более узкие.
У Фера три линейки начертаний: для мелких подписей, текста и заголовков. Причём пропорции шрифта и даже рисунок ключевых знаков меняются во всех этих линейках. Благодаря этому Фер хорошо смотрится в любом кегле. Расскажу, как я к этому пришёл.
Как я сделал шрифт-конструктор в Glyphs и только потом шрифт
В 2019 году Паратайп работал над шрифтовой системой для Сбера. Для этого проекта Саша Королькова, арт-директор студии, сделала в шрифтовом редакторе Fontlab шрифт-конструктор, где стоит поменять одну запчасть в одном знаке, и она меняется во всех остальных местах. Мы с Сашей работаем в разных редакторах: она в FontLab, а я в Glyphs. Глядя на то, что Саша сделала в Фонтлабе, я подумал, что хочу сделать такой же гротеск-конструктор для Глифса.
В итоге у меня получилась заготовка под гротеск. Я стал с ней работать, сделал несколько начертаний, пока не пришёл к тому, что потом стало Фером. Так Фер начался с идеи конструктора, а в процессе у него постепенно проявился характер.
Работа над шрифтом заняла три года с 2020 по 2023, что для такого масштаба абсолютно нормально. Самой интересной стадией работы были первые два-три месяца, когда я искал пластику и настраивал ритм. Всё остальное время я расширял знаковый состав, добавлял начертания и делал шрифт качественнее: уточнял рисунок знаков и работал над межбуквенными расстояниями. Это довольно скучная работа, но именно она при разработке шрифта занимает больше всего времени.
Когда работал над Фером, я много открыл для себя в плане языковой поддержки и знакового состава. Разобрался, чем в башкирском буква «Ҫ» отличается от чувашского. Многие знают, что в сербском «б» другая или что есть болгарская кириллица. А о том, что в Чувашии и Башкирии тоже есть свои местные варианты, очень мало кто знает.
Зачем я сделал три линейки начертаний, где шрифт меняется вместе с кеглем
Попробовав Фер в дизайне, я понял, что для большинства применений строчные буквы слишком мелкие. Но шрифт с линейкой начертаний от регулярного до чёрного уже был готов, перерисовать всё с нуля жалко. И тогда я решил сделать дополнительное текстовое начертание, где строчные будут покрупнее. Наверное, на этом можно было остановиться. Но я подумал, что если ещё немного поработать и сделать ещё один размер, то шрифт подойдёт и для мелких подписей.
В итоге получились три линейки начертаний для статичной версии шрифта, и в каждой из них рисунок и характеристики Фера немного отличаются:
- Display — для заголовков и других текстов в кегле от 48. В этой линейке у шрифта проявляется больше характерных особенностей: закрытые апертуры и разноширинность. Строчные буквы более мелкие по сравнению с заглавными.
- Text — для обычного текста, как тот, что вы читаете сейчас. Шрифт не перетягивает на себя внимание и легко читается.
- Caption — для подписей и текстов в кегле меньше 10. В этой линейке у Фера крупные строчные буквы, почти нет разноширинности, а апертуры, как в букве С, более открытые. Это нужно, чтобы текст не слипался.
Разные начертания для разных оптических размеров шрифта нужны, чтобы шрифт максимально хорошо работал в своём кегле. Например, чтобы заголовки выглядели яркими, обычный текст читался легко и шрифт не отвлекал от него, а буквы в самых мелких подписях не сливались. И для всего этого не нужно покупать три разных шрифта. Достаточно в статичной версии Фера выбрать нужную линейку начертаний (Display, Text или Caption), а в вариативной версии — подвигать курсор.
Как я сделал вариативный вариант Фера с осью оптического размера
Для ускорения работы я купил плагин для Глифса RMX Tools. Он помогает быстро делать дополнительные начертания и работает не только с интерполяцией контуров, но и с экстраполяцией. Это помогло мне быстрее сделать вариативный шрифт, где в одном файле есть весь диапазон начертаний и между ними можно легко переключаться.
Вариативные шрифты меняются по осям интерполяции. В качестве оси можно взять любой параметр шрифта: наклон, ширину и так далее. Я выбрал ось оптического размера. По этой оси рисунок и пропорции шрифта меняются вместе с кеглем, и это происходит более плавно, чем в статичном шрифте.
Оптический размер удобная штука для дизайнеров. Например, когда мы используем вариативный Фер в наборе в Индизайне, при изменении кегля автоматически меняются контраст, разрядка и пропорции. То же самое доступно и в других редакторах, и в вебе, но уже вручную.
Всегда интересно читать о том, как работают шрифтовые дизайнеры (и не только шрифтовые). Здорово, что поделился!
хорошая пища для разговора тем, кто с шрифтами каждый день пользуется
Перечитал и понял. Человек описал шрифт, как сомелье хорошее вино! Как же я завидую творческим личностям!!! Супер!
Вау! Какая огромная кропотливая работа🔥
Это красиво
Спасибо автору за классный материал!
Отличный шрифт! Для презентаций в универе самое то... Он бесплатный?
Спасибо! Нет, он платный — https://www.paratype.ru/fonts/pt/fer
Кажется каким-то "не ровным", не пропорциональным в отношении букв друг к другу, тяжелит при чтении (что, как бы может соответствовать эпитету "железный").
Это называется разноширинность и это жанровая особенность. При этом разноширинность в Фере построена не тех же закономерностях, что, например в Гаральдах или в римском монументальном письме. В крупном кегле, в прописных — круглые буквы условно вписаны в квадрат, тогда как прямые сильно уже.
Это достаточно броский акцидентный ход, разумеется, такой шрифт подойдет не всем. Но так можно сказать и про любой другой :)
Здорово 🙌 очень крутая работа
Наконец-то человек дело написал, а то одни всезнающие продаваны и эксперты нейросетей 😁
Это очень круто) а обучения у вас есть?
Да, у меня есть школа шрифтового дизайна — bolditalic.type.school и сейчас как раз идет набор — https://t.me/bolditalic_type_school/384
я максимально далек от дизайна, вот просто интересно почему такое внимание и такие детали к выбору шрифта
Потому что это моя работа)
Спасибо, это было интересное чтиво
Крутая вещь! Для лентяев просто ИДЕАЛЬ! Уже представил себе насколько может уменьшится CSS при использовании подобных шрифтов. Реально круто и открыли мне Америку, что шрифт может от кегли меняться. Пойду уволю своего дизайнера. Хрен ли он раньше молчал о подобном ))
Можно сначала и не увольнять, про оптические размеры конечно знать хорошо, но таких шрифтов в вариативном формате пока немного — от этого и дизайнеры мало знают про них. Стараюсь менять ситуацию)))
Интересно стало, как вы связаны с городом Электроугли?)
Название нравится