Нелинейная интерполяция

Привет, меня зовут Павел. Разберу, что такое нелинейная интерполяция в шрифтах, и как она работает.

Вариативность и кривые

Шрифтовые дизайнеры называют мастером набор символов одного стиля. Например, нормальный и жирный мастер.

Интерполяция — это вычисление промежуточных значенй между мастерами. Шрифты, которые поддерживают интерполяцию, называют вариативными, промежуточные значения — инстансами.

Дизайнеры описывают оси интерполяции — задают мастерам координаты на вариативной оси. Например, оси насыщенности. Так, чтобы получить инстанс, будет достаточно координаты на оси. Например, Weight 600.

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

Иногда линейной интерполяции недостаточно. Например, для оси апертуры — оси «открытости» знаков. Если в знаке c терминалы двигаются по окружности, то это выглядит естественно.

Интерполяцию называют нелинейной, когда промежуточные точки лежат на кривых, а не отрезках:

Формат OpenType не поддерживает нелинейную интерполяцию по умолчанию. Чтобы добиться эффекта в шрифтовом файле, нужно использовать трюк.

Рецепт нелинейной интерполяции

Рецепт. Добьемся нелинейной интерполяции в шрифтовом редакторе «из коробки» — без специальных инструментов. Я воспользуюсь Glyphs.

Поместим контур на позиции A, B и С — в разные мастеры. Мастер B скопируем. Зададим оси вариативности как на картинке:

Экспортируем шрифт в .ttf и будем перемещаться вдоль осей одновременно:

Контур движется по кривой — интерполяция нелинейна! Почему?

Регионы, дельты и кривые Безье

Прием эксплуатирует особенности OpenType – погрузимся в стандарт.

В OpenType данные о вариативности хранятся в виде контура по умолчанию и дельта-векторов. Например, так выглядят дельта-векторы между жирной и нормальной a:

Дельта-векторы применяются в «регионах» — подпространствах вариативного пространства. Регионы определяет положение мастеров на вариативных осях.

Так, в рецепте определили три региона:

Построим дельта-векторы для каждого:

$∂_1 = B − A$

$∂_2 = B.copy − A = B - A$

$∂_3 = C - (A + ∂_1 + ∂_2) = C - (2B - A)$

Наглядно увидеть как строятся дельта-векторы получится в инструменте Samsa:

Чтобы построить инстанс, дельта-векторы масштабируют и суммируют. Это обратный процесс к построению дельт.

Например, чтобы построить инстанс для Weight = 50, Width = 0, к контуру по умолчанию нужно добавить дельта-векторы из региона 1, уменьшив их на 50%:

Коэфицент масштабирования дельта-векторов называется скаляром. Скаляры зависит от координат инстанса в вариативном пространстве.

Скаляры рассчитываются по алгоритму стандарта OpenType. Если на вариативной оси нет промежуточных значений — задан только максимум, а минимальное значение в нуле, то скаляр оси равен:

$s_{axis}$ = instanseCoord / axisMax

Полный скаляр дельта-вектора — это произведение скаляров всех осей:

$s_{total} = s_{axis_1} × s_{axis_2} × ... × s_{axis_n}$

Построим инстанс. Добавим к значению по умолчанию масштабированные дельта-векторы:

$I_{we,wi} = A + ∂_1 × s_1 + ∂_2 × s_2 + ∂_3 × s_3$

В пространстве рецепта $s_{1_{wi}} = s_{2_{we}}=1$:

$I_{we,wi} = A + ∂_1 × s_{1_{we}} + ∂_2 × s_{2_{wi}} + ∂_3 × s_{3_{we}} × s_{3_{wi}}$

Для weight = width = $t$:

$I_t =A + ∂_1 t + ∂_2 t + ∂_3 t^2$

Здесь проявилась хитрость. Произведение равных скаляров создает квадратичный, а не линейный рост.

Раскроем дельты:

$I_t= t^2(C - 2B + A) + 2t(B - A) + A$

Это форма кривой безье второго порядка c контрольными точками в A, B и C. Поэтому контур двигался по кривой.

Этот трюк можно проворачивать для любого порядка.

Синхронизация осей

Трюк использует несколько осей, которые нужно синхронизировать, чтобы достичь нелинейного эффекта. Мне известны следующие способы синхронизации осей:

1. Поручить синхронизацию пользователю шрифта. Тогда дизайнеру придётся вручную выставлять одинаковые значения служебных осей.

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

3. Использовать хак с переопредением осей. Если в шрифтовом файле назначить разным осям одно и то же название таблицах fvar и stat, то значения осей будут меняться синхронно. Способ грубый, но сработает в большинстве программ.

4. Использовать формат AVAR2. Это новый способ описывать вариативное пространство в шрифтвовом файле, который позволяет синхронзировать оси. AVAR2 ещё не стал стандартом, пока его поддерживают устройства на новых версиях Linux и macOS.

Источники

Студия Underware популяризовала нелинейную интерполяцю статьей Higher Order Interpolation for Variable Fonts.

Фредрик Бреннан продемонстрировал HOI в плагине для FontForge.

Питер Констебл подробно рассказывает как работает HOI в статье Understanding Non-Linear Interpolation in OpenType Variable Fonts

Команда Microsoft поддерживает подробную документацию OpenType Font Variations Overview

Павел Колчанов, cентябрь 2023.

Подписаться на новые статьи