Лигатуры в шрифте Контура.

Помогают быстрее находить иконки и использовать их в компонентах дизайн системы.

Пример использования лигатур в Скетче

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

Будет удобнее работать с иконочным шрифтом, если символы в нем работают по принципу лигатур. Тогда достаточно будет написать название — оно автоматически заменится иконкой.

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

Иконочный шрифт Контура
Контур.Иконик — иконочный шрифт, использующийся в компонентах дизайн-системы контура. Сейчас в нём больше 240 иконок.

Что такое лигатуры?

Классические лигатуры

В типографике, лигатурой назвают соединение нескольких графем в единый знак.

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

Лигатуры в шрифте

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

Как это сделано?

Редактор Glyphs.app

Потребуется редактор шрифтов. Я использовал Glyphs — у него есть триальный период 30 дней.

В окне информации о шрифте, есть вкладка Features. В ней описываются Опентайп фичи, т.е. правила, которые отвечают за подстановку лигатур и замену глифов.

Добавляем фичу liga — она отвечает за «стандартные лигатуры». Это те, которые применяются по умолчанию. Еще есть фича dlig — она отвечает за лигатуры, которые нужно специально включать.

Правила замены символов описываются простым кодом:
Код, описывающий лигатуры

Синтаксис такой:

  • sub p r i n t заменить последовательность символов «print»
  • by uniE013; на символ иконки принтера с именем uniE013

Обратите внимание, что последовательность разделена пробелами и используются имена символов: например «two» вместо «2», «hyphen» вместо «-».

Чтобы не придумывать имена каждой иконке, я взял названия их css-классов. И написал скрипт на питоне, чтобы не писать правила руками.

Шрифты с лигатурами

Есть множество других шрифтов, которые используют лигатуры самыми разными способами.

Material Icons

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

Flagsmith

Шрифт Flagsmith (15$), предназначен для создания флагов. Описываем компоненты base+stripes+triangle+*, расскрашиваем отдельные элементы, включаем лигатуры — получаем символ флага.

Fira Code

Бесплатный шрифт Fira Code с лигатурами для программистов. Он заменяет псевдографику ==, !=, -> аккуратными знаками. Его я использую в редакторах кода.

Sparks

Бесплатное семейство шрифтов Sparks использует лигатуры для создания спарклайнов. Если ввести данные в специальном формате 123{30,60,90}456 они заменятся на миниатюрные графики.

FF Chartwell

Семейство шрифтов FF Chartwell (25€ за начертание) используется для инфографики. С его помошью можно создавать не только спарклайны, но и розы ветров, круговые и столбчатые диаграммы и т.д.

JetBrains Mono

Бесплатный моноширинный шрифт компании JetBrains, предназначенный для работы с кодом. Использует лигатуры также, как FiraCode

Присылайте примеры

Если вы знаете еще какие-нибудь интересные примеры шрифтов с лигатурами — напишите мне.
Mail icon golmakov@gmail.com