Как работать с типографикой и использовать OpenType фичи в Фигме и разработке

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

В промо-материалах к шрифтам часто встречаются типографические красоты: разные комплекты цифр, альтернативные знаки или ещё что-нибудь.

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

На самом деле работать с возможностями шрифта очень просто: большинство приёмов «высокой типографики» включается в Фигме в два клика, а в вебе одной строчкой кода в CSS. Сейчас сами увидите :)

Всё, что нужно сделать в Фигме, чтобы включить в тексте любой встроенный в шрифт вариант цифр или букв — нажать на многоточие в правом нижнем углу панели Text и выбрать вкладку Details.

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

Если у текста нет стиля (или в стиле это не описано), то выбранные варианты знаков включатся только для выделенного фрагмента. Чтобы включить альтернативы во всех текстах в проекте, нужно добавить их в стиль текста.

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

Всё, что можно включить в Фигме в Type — Details, можно включить и в вебе с помощью строчки в CSS, на этапе разработки добавив её в описание стиля. Разберём несколько примеров.

Минускульные цифры. Цифры ростом со строчные буквы и с выносными элементами. Нужны, когда текст для чтения набран строчными буквами, а в нём встречается много дат или других чисел.

CSS: { font-feature-settings: “onum”; }

Дроби. Если в тексте встречаются обыкновенные (не десятичные) дроби, можно сделать так, чтобы цифры, набранные через слэш, превращались в аккуратные маленькие числители и знаменатели.

CSS: { font-feature-settings: "frac"; }

Регистрозависимые знаки. В некоторых шрифтах тире, дефис, двоеточие, @ и другие знаки могут приподниматься, если стиль текста превращает его в ОДНИ ПРОПИСНЫЕ. Это особенно важно в заголовках, потому что в крупном тексте будет особенно заметно, что дефис или тире находится сильно ниже середины букв.

CSS: { font-feature-settings: "case"; }

Стилистические сеты. Когда в шрифте есть альтернативные формы букв, чаще всего они организованы в стилистические сеты (stylistic sets). Это позволяет заменить форму сразу всех нужных букв во всех текстах одного стиля.

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

CSS: Все стилистические сеты называются по одному принципу — ssXX, где ХХ — номера от 01 до 20, и включаются с помощью строки следующего типа: font-feature-settings: “ss01”;

Стилистический сет ss03 включит очень закрытые формы всех круглых букв в шрифте Hint, а стилистический сет ss19 — микротипограф.

Более полный список и нужный код возможностей шрифтов можно посмотреть здесь. А с помощью этой страницы можно выбрать любой шрифт из установленных в систему и увидеть его типографические возможности.

Попрактиковаться в использовании типографических возможностей можно на бесплатных шрифтах. Например, в Golos есть минускульные и табличные цифры, в PT Root UI тоже табличные цифры и огромный набор индексов и дробей, в Tilda Sans — табличные цифры, индексы и альтернативные знаки.

Спасибо Марии Дружининой за идею для статьи и помощь в работе над ней :)