
Проектировщики компании СКБ Контур пользуются собственным иконочным шрифтом, чтобы добавлять иконки в свои макеты. Им приходится находить нужную иконку на специальной странице в «Гайдах», копировать её и вставлять в макеты.
Будет удобнее работать с иконочным шрифтом, если символы в нем работают по принципу лигатур. Тогда достаточно будет написать название — оно автоматически заменится иконкой.
Я собрал специальную версию шрифта Контур.Иконик с лигатурами. Получившийся иконочный шрифт работает во всех программах, поддерживающих лигатуры: Скетч, Иллюстратор, Фигма и т.д. При этом добавление лигатур не ломает существующие макеты, так как иконки не меняли свои имена и юникод-коды.
Что такое лигатуры?

В типографике, лигатурой назвают соединение нескольких графем в единый знак.
Они были придуманы для ускорения письма (напр. амперсанд «&» и эсцет «ß») и для случаев, когда знаки неприятно пересекаются друг с другом (напр. «fi», «ft»).

Файлы шрифтов хранят правила замены последовательности символов на лигатуры или подстановки альтернативных вариантов знаков. Например, что буква «о» в слове «Контур» заменяется на облако, а вместо слова «print» подставляется иконка принтера.
Как это сделано?

Потребуется редактор шрифтов. Я использовал Glyphs — у него есть триальный период 30 дней.
В окне информации о шрифте, есть вкладка Features. В ней описываются Опентайп фичи, т.е. правила, которые отвечают за подстановку лигатур и замену глифов.
Добавляем фичу liga — она отвечает за «стандартные лигатуры». Это те, которые применяются по умолчанию. Еще есть фича dlig — она отвечает за лигатуры, которые нужно специально включать.
Правила замены символов описываются простым кодом:
Синтаксис такой:
- sub p r i n t заменить последовательность символов «print»
- by uniE013; на символ иконки принтера с именем uniE013
Обратите внимание, что последовательность разделена пробелами и используются имена символов: например «two» вместо «2», «hyphen» вместо «-».
Чтобы не придумывать имена каждой иконке, я взял названия их css-классов. И написал скрипт на питоне, чтобы не писать правила руками.
Шрифты с лигатурами
Есть множество других шрифтов, которые используют лигатуры самыми разными способами.

Material Icons



Flagsmith

Fira Code


Sparks


FF Chartwell
