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

Как работать с типографикой в Figma

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

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

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

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

Как работать с типографикой в CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

Над статьёй работали Александра Королькова и Мария Дружинина.

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