Из кода в шрифт · Ipak

> Акцентные шрифты Ipak строятся программами: кирпичи вперевязку, фаска резчика и свет, клиновидные засечки, след широкого пера. Как каждое правило превращается в буквы и как из букв собирается файл шрифта.

[Oʻzbekcha](https://ipak.xronocode.com/jarayon/from-code-to-font/index.md) · [English](https://ipak.xronocode.com/en/jarayon/from-code-to-font/index.md) · [Русский](https://ipak.xronocode.com/ru/jarayon/from-code-to-font/index.md) · [Español](https://ipak.xronocode.com/es/jarayon/from-code-to-font/index.md) · [Português](https://ipak.xronocode.com/pt/jarayon/from-code-to-font/index.md) · [中文](https://ipak.xronocode.com/zh/jarayon/from-code-to-font/index.md)

[Процесс]

# Из кода в шрифт

Акцентные шрифты Ipak строятся программами: кирпичи вперевязку, фаска резчика и свет, клиновидные засечки, след широкого пера. Как каждое правило превращается в буквы и как из букв собирается файл шрифта.

Обычно шрифт рисуют руками в редакторе: дизайнер ставит точки и тянет кривые. Акцентные шрифты Ipak — Bannai, Ganch, Metro и Kalam — сделаны иначе. Каждую букву строит небольшая программа на Python по одному правилу на весь шрифт. Правило одно, поэтому толщины, срезы и ритм совпадают у всех знаков — от A до Ҳ и от 0 до №.

В статье — как устроено правило каждого шрифта, как из нарисованных букв собирается файл шрифта и где у версии 0.1 пока границы.

![Четыре акцентных шрифта Ipak](https://ipak.xronocode.com/images/p/from-code-to-font/four-fonts.png)

*Четыре акцентных шрифта Ipak — Bannai, Ganch, Metro, Kalam. Текст набран с обычным апострофом; знаки ʻ поставила сама подстановка шрифта Ipak; рендер HarfBuzz (hb-view) из шрифтов Ipak v0.1; шрифты — SIL OFL 1.1 · CC BY 4.0 · Ipak*

## Сначала мотив, потом буквы

Каждый акцентный шрифт начинается не с буквы, а с мотива, который узнаётся с первого взгляда: кирпич банаи, нож резчика по ганчу, металлические буквы ташкентского метро, перо калама (об истории этих техник — в статье «Банаи, ганч, калам»). Мотив превращается в правило, а правило — в программу, которая строит по нему любую букву.

Чтобы сравнить мотивы в деле, слово TOSHKENT ставили на фото аэропорта Ташкента вместо настоящей вывески.

![Четыре мотива на фото аэропорта Ташкента](https://ipak.xronocode.com/images/p/from-code-to-font/concepts-sheet.jpg)

*Четыре мотива акцентных шрифтов в макете на фото аэропорта Ташкента: банаи, ганч, метро, калам Фото: Alpasli, Wikimedia Commons; макет — Ipak · CC BY-SA 4.0 (фото: Alpasli; макет — Ipak)*

**Справка.** Контур — замкнутая линия, которая обводит букву. Шрифт хранит буквы именно как контуры. Единица шрифта — тысячная доля кегля (размера шрифта). У акцентных шрифтов Ipak высота прописной — 700 таких единиц. Контуры складывают, вычитают и пересекают булевыми операциями, как в графическом редакторе: «объединить», «вычесть», «оставить общее». Для этого используется открытая библиотека skia-pathops.

## Bannai: кирпичи вперевязку

Буква сначала записывается как картинка из клеток — строки из решёток и точек, как в тетради в клетку. Прописная занимает 10 рядов. Клетка квадратная, 70 единиц. Штрих — две клетки, просвет внутри буквы — не меньше двух: так буквы не сливаются на расстоянии.

Потом программа кладёт кирпичи. Кирпич — две клетки, и в соседних рядах швы сдвинуты на полкирпича. Это кладка вперевязку: швы одного ряда не совпадают со швами соседнего. Между кирпичами остаётся шов в 9 единиц. Косые штрихи K, N, Z идут ступенями кладки, а не ровным скосом. Точки Ö, дужка Ў и знак ʻ лежат в рядах выше прописной, хвосты Қ Ҳ и седиль Ş Ç — в рядах ниже строки.

![Ipak Bannai: сетка из 10 рядов, кирпичи вперевязку](https://ipak.xronocode.com/images/p/from-code-to-font/spec-bannai.png)

*Ipak Bannai: буквы на сетке из 10 рядов, кирпичи вперевязку Ipak · CC BY 4.0 · Ipak*

## Ganch: фаска резчика и свет

Контур строится из прямоугольников и восьмигранников. Вертикальный штрих — 168 единиц, горизонтальный — 140: так они кажутся одинаковыми. «Круглые» буквы O, C, G, Q — восьмигранники.

Последний проход — фаска резчика. Программа обходит контур и у каждого внешнего угла, который прямой или острее (до 100°), срезает остриё: отступает по 40 единиц вдоль обеих сторон и соединяет точки прямой. У прямого угла это срез под 45°. Внутренние углы остаются острыми: туда входит нож. Тупые грани восьмигранников не трогаются.

Объём считается отдельно, из картинки буквы. Для каждой точки внутри буквы находится расстояние до ближайшего края. Получается «поле расстояний»: у края ноль, к середине штриха больше. Если представить это поле как высоту, выходит гребень посередине штриха и два ската к краям — V-рез. Дальше программа смотрит, куда повёрнут каждый скат. Скат, обращённый к свету слева сверху, светлеет, противоположный темнеет. Сверху добавляется мягкая тень вниз-вправо: буква выступает из стены. Для каменной стены то же поле переворачивают, и буква становится выемкой.

![Ganch: рельеф из поля расстояний](https://ipak.xronocode.com/images/p/from-code-to-font/ganch.png)

*Ipak Ganch: рельеф V-реза посчитан из контура полем расстояний, свет слева сверху Ipak · CC BY 4.0 · Ipak*

**Справка.** Поле расстояний — карта, где каждой точке записано, как далеко она от края фигуры. Его используют в компьютерной графике, например чтобы рисовать чёткий текст в играх. Здесь оно даёт рельеф для всех знаков сразу: грани не рисуются вручную для каждой буквы, их вычисляет одна функция.

## Metro: тонкие прописные и клиновидные засечки

Образец — надпись «КОСМОНАВТЛАР» на платформе станции 1984 года (архитекторы Серго Сутягин и Сергей Соколов). Штрих тонкий: 48 единиц у основных линий, 40 у горизонталей. Буквы широкие, около 600 единиц при высоте 700.

На концах штрихов — маленькие засечки-клинья. Основание клина шире штриха на 40 единиц с каждой стороны, высота клина 34 единицы, а верх сходится точно к краям штриха. Слово набирается с большой разрядкой. Л — «домиком», как на станции. Рисунок свой, по принципу; латиница построена той же системой.

![Ipak Metro: КОСМОНАВТЛАР](https://ipak.xronocode.com/images/p/from-code-to-font/scene-metro.png)

*Ipak Metro: тонкие широкие прописные с клиновидными засечками и большой разрядкой, латиница и кириллица одной системой Ipak · CC BY 4.0 · Ipak*

## Kalam: широкое перо под углом

Для каждой буквы задаётся скелет — осевая линия из точек. Перо — отрезок длиной 150 единиц под углом 65° к строке. Программа ставит перо в каждую точку скелета, соединяет соседние положения в четырёхугольник и объединяет все четырёхугольники. Толщину никто не задаёт: она выходит сама из направления штриха. При угле 65° горизонтали тяжёлые, вертикали лёгкие.

Если штрих идёт почти вдоль пера, он истончается в нитку. Поэтому косые штрихи отводятся от угла пера хотя бы на 9–10°: тогда самая тонкая линия не уже 25 единиц. Все знаки — буквы, точки, цифры, пунктуация — пишутся одним и тем же пером.

![Ipak Kalam: след плоского пера](https://ipak.xronocode.com/images/p/from-code-to-font/kalam-65.png)

*Ipak Kalam: след плоского пера шириной 150 единиц под углом 65° Ipak · CC BY 4.0 · Ipak*

## Знаки ʻ и ʼ в каждом стиле

Знаки не берутся готовыми из кавычек: каждый нарисован по правилу своего шрифта. Общее одно: у ʻ масса внизу, у ʼ — вверху, поэтому силуэты смотрят в разные стороны и не путаются.

| Шрифт | ʻ | ʼ |
| --- | --- | --- |
| Bannai | «шестёрка» из кладки: голова 2×2 клетки внизу, хвост вверх-вправо | то же, повёрнутое на 180° |
| Ganch | клин с массой внизу, наклон 10° | клин с массой вверху, наклон 23° |
| Metro | клин основанием вниз, остриём вверх-вправо | клин основанием вверху, остриём вниз-влево |
| Kalam | жест пера: волосной сверху вниз-влево, внизу поворот с нажимом | тот же жест, повёрнутый на 180° |

К O и G знак придвигает кернинг по замеру (о нём ниже): ʻ должен читаться частью буквы, а не отдельной кавычкой.

## Из картинки в шрифт

Картинка — ещё не шрифт. Шрифт должен ставить буквы с правильными расстояниями, знать узбекские правила и открываться в любой программе.

**Справка.** FontBuilder — часть открытой библиотеки fontTools. Ей передают контуры букв, ширины, таблицу «символ → буква» и названия, а она собирает файл .ttf.

**Сборка.** Программа каждого стиля отдаёт словарь: символ, контур, ширина, отступы слева и справа. Сборка переводит кривые в формат TrueType, выравнивает направление контуров и записывает файл через FontBuilder. Строчные буквы ведут на те же прописные: шрифты акцентные, для заглавных надписей. Набранные с клавиатуры ' ‘ ’ ` ведут на знаки ʻ и ʼ.

**Расстояния по замеру.** Программа берёт пару букв и меряет белое расстояние между ними строка за строкой, по всей высоте прописной; глубокие провалы обрезаются, потому что глаз в них не заглядывает. Эталон — среднее для пар HH, HO, OH и OO этого же шрифта. Каждую пару подтягивают к эталону, но только наполовину: иначе открытые пары вроде LT слипаются. Такая поправка для отдельной пары букв называется кернингом. Латиница кернится с латиницей, кириллица с кириллицей. Цифры не кернятся, чтобы колонки чисел оставались ровными.

**Знаки ʻ и ʼ — отдельно.** Знак маленький и стоит наверху, поэтому его меряют только в полосе знака — в верхних 38 % высоты прописной (подробно — в статье «Полоса знака»). ʻ ставится плотно к O и G: 0,45 просвета HH. После ʻ — обычный просвет HH. ʼ стоит ровно посередине: 0,8 просвета с обеих сторон.

**Запрет касаний.** После всех поправок программа проверяет самое узкое место пары по всей высоте, включая хвосты под строкой. Ни одна пара не может подойти ближе 5 % кегля. Поправка тоже ограничена: не больше 15 % кегля в любую сторону. Поправки меньше 20 единиц не записываются.

**Узбекская подстановка.** Люди набирают Oʻzbekiston обычным апострофом. Шрифт сам меняет его на нужный знак правилом, записанным внутри файла; в формате OpenType такое правило называется calt. После O перед буквой — ʻ. После G — ʻ, в том числе в конце слова (BOGʻ), но не в сочетании ng в конце слова и не перед s в конце слова (английское притяжательное 's). Между двумя буквами в остальных случаях — ʼ, как в MAʼNO. Логика та же, что в рабочем шрифте Ipak Davlat; о ней — статья «o' → oʻ».

![QOʻNGʻIROQ без подстановки и с подстановкой](https://ipak.xronocode.com/images/p/from-code-to-font/calt-qongiroq.png)

*Слово QOʻNGʻIROQ, набранное с клавиатурным апострофом, в Ipak Metro: сверху подстановка выключена, снизу включена Ipak; рендер HarfBuzz (hb-view) из IpakMetro-Regular.ttf v0.1; шрифт — SIL OFL 1.1 · CC BY 4.0 · Ipak*

В конце сборка печатает пробу: весь набор знаков и контрольные слова — OʻZBEKISTON RESPUBLIKASI, ҚЎҚОН · ҒАЛЛАОРОЛ · ҲАЁТ, ÖZBEKISTON · TOŞKENT.

![Проба Ipak Bannai](https://ipak.xronocode.com/images/p/from-code-to-font/bannai-proof.png)

*Проба Ipak Bannai: весь набор знаков и контрольные слова на трёх алфавитах Ipak; рендер HarfBuzz (hb-view); шрифт — SIL OFL 1.1 · CC BY 4.0 · Ipak*

## Границы версии 0.1

**Только прописные и одно начертание.** Строчные набираются теми же прописными. Насыщенностей пока нет.

**Bannai — для крупных надписей.** Квадратная кладка близка к пиксельному шрифту, для табличек и мелкого кегля он не предназначен.

**Угол пера Kalam — наш подбор.** 65° выбраны сравнением на одном слове, это не цитата из источника.

**Расстояния выставлены автоматически.** Для вывески их стоит проверить глазом на конкретном слове.

**Подстановка не различает языки.** В акцентных шрифтах правило работает для любого текста: в английском DON'T апостроф тоже станет ʼ. Для неузбекского текста подстановку стоит выключить в программе вёрстки.

## Итог

В каждом из четырёх акцентных шрифтов 94 знака: латиница с Ö Ğ Ş Ç, кириллица с Ў Қ Ғ Ҳ, знаки ʻ и ʼ, цифры и пунктуация. Все они построены одним правилом на шрифт и распространяются по открытой лицензии SIL OFL 1.1, как и вся библиотека.

## Источники

Описание основано на коде построения акцентных шрифтов Ipak и документации инструментов: fontTools, skia-pathops, SciPy, HarfBuzz, спецификация OpenType; об образце для Metro — Wikipedia «Kosmonavtlar (Tashkent Metro)».

Ссылки:

fontTools: FontBuilder. [https://fonttools.readthedocs.io/en/latest/fontBuilder/fontBuilder.html](https://fonttools.readthedocs.io/en/latest/fontBuilder/fontBuilder.html)

skia-pathops — булевы операции над контурами. [https://github.com/fonttools/skia-pathops](https://github.com/fonttools/skia-pathops)

SciPy: distance_transform_edt — поле расстояний. [https://docs.scipy.org/doc/scipy/reference/generated/scipy.ndimage.distance_transform_edt.html](https://docs.scipy.org/doc/scipy/reference/generated/scipy.ndimage.distance_transform_edt.html)

HarfBuzz — движок набора текста. [https://harfbuzz.github.io/](https://harfbuzz.github.io/)

OpenType: фича calt (Contextual Alternates). [https://learn.microsoft.com/en-us/typography/opentype/spec/features_ae#tag-calt](https://learn.microsoft.com/en-us/typography/opentype/spec/features_ae#tag-calt)

OpenType: фича kern (Kerning). [https://learn.microsoft.com/en-us/typography/opentype/spec/features_ko#tag-kern](https://learn.microsoft.com/en-us/typography/opentype/spec/features_ko#tag-kern)

Wikipedia: Kosmonavtlar (Tashkent Metro). [https://en.wikipedia.org/wiki/Kosmonavtlar_(Tashkent_Metro)](https://en.wikipedia.org/wiki/Kosmonavtlar_(Tashkent_Metro))

---
Страница: https://ipak.xronocode.com/ru/jarayon/from-code-to-font/ · SIL Open Font License 1.1 · avenex@xronocode.com