{"id":14279,"url":"\/distributions\/14279\/click?bit=1&hash=4408d97a995353c62a7353088166cda4ded361bf29df096e086ea0bbb9c1b2fc","title":"\u0427\u0442\u043e \u0432\u044b\u0431\u0435\u0440\u0435\u0442\u0435: \u0432\u044b\u0435\u0445\u0430\u0442\u044c \u043f\u043e\u0437\u0436\u0435 \u0438\u043b\u0438 \u0437\u0430\u0435\u0445\u0430\u0442\u044c \u0440\u0430\u043d\u044c\u0448\u0435?","buttonText":"","imageUuid":""}

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

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

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

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

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

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

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

Как я сделал шрифт-конструктор в Glyphs и только потом шрифт

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

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

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

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

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

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

Зачем я сделал три линейки начертаний, где шрифт меняется вместе с кеглем

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

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

  • Display — для заголовков и других текстов в кегле от 48. В этой линейке у шрифта проявляется больше характерных особенностей: закрытые апертуры и разноширинность. Строчные буквы более мелкие по сравнению с заглавными.
  • Text — для обычного текста, как тот, что вы читаете сейчас. Шрифт не перетягивает на себя внимание и легко читается.
  • Caption — для подписей и текстов в кегле меньше 10. В этой линейке у Фера крупные строчные буквы, почти нет разноширинности, а апертуры, как в букве С, более открытые. Это нужно, чтобы текст не слипался.

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

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

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

Как я сделал вариативный вариант Фера с осью оптического размера

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

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

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

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

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

0
21 комментарий
Написать комментарий...
Maria Kochetkova

Всегда интересно читать о том, как работают шрифтовые дизайнеры (и не только шрифтовые). Здорово, что поделился!

Ответить
Развернуть ветку
Ян Лус

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

Ответить
Развернуть ветку
ASh Chile

Перечитал и понял. Человек описал шрифт, как сомелье хорошее вино! Как же я завидую творческим личностям!!! Супер!

Ответить
Развернуть ветку
Анастасия Карпова - UN English

Вау! Какая огромная кропотливая работа🔥

Ответить
Развернуть ветку
Жельмандо

Это красиво

Ответить
Развернуть ветку
Дмитрий Халяпин

Спасибо автору за классный материал!

Ответить
Развернуть ветку
Тим Труф

Отличный шрифт! Для презентаций в универе самое то... Он бесплатный?

Ответить
Развернуть ветку
Дмитрий Голуб
Автор

Спасибо! Нет, он платный — https://www.paratype.ru/fonts/pt/fer

Ответить
Развернуть ветку
Не очень хороший человек

Кажется каким-то "не ровным", не пропорциональным в отношении букв друг к другу, тяжелит при чтении (что, как бы может соответствовать эпитету "железный").

Ответить
Развернуть ветку
Дмитрий Голуб
Автор

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

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

Ответить
Развернуть ветку
Kinescope

Здорово 🙌 очень крутая работа

Ответить
Развернуть ветку
Сергей Степанов

Наконец-то человек дело написал, а то одни всезнающие продаваны и эксперты нейросетей 😁

Ответить
Развернуть ветку
Margo Rita

Это очень круто) а обучения у вас есть?

Ответить
Развернуть ветку
Дмитрий Голуб
Автор

Да, у меня есть школа шрифтового дизайна — bolditalic.type.school и сейчас как раз идет набор — https://t.me/bolditalic_type_school/384

Ответить
Развернуть ветку
Денис Бочков

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

Ответить
Развернуть ветку
Дмитрий Голуб
Автор

Потому что это моя работа)

Ответить
Развернуть ветку
Ka Vi

Спасибо, это было интересное чтиво

Ответить
Развернуть ветку
ASh Chile

Крутая вещь! Для лентяев просто ИДЕАЛЬ! Уже представил себе насколько может уменьшится CSS при использовании подобных шрифтов. Реально круто и открыли мне Америку, что шрифт может от кегли меняться. Пойду уволю своего дизайнера. Хрен ли он раньше молчал о подобном ))

Ответить
Развернуть ветку
Дмитрий Голуб
Автор

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

Ответить
Развернуть ветку
Евгений Неделькин

Интересно стало, как вы связаны с городом Электроугли?)

Ответить
Развернуть ветку
Дмитрий Голуб
Автор

Название нравится

Ответить
Развернуть ветку
18 комментариев
Раскрывать всегда