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

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

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

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

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

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

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

Типограф тоже можно встроить в стиль текста, после этого замены будут автоматически применяться по всему макету.

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

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

Типовые возможности шрифта

Они есть во многих шрифтах и везде называются и работают одинаково.

Минускульные цифры
oldstyle numerals

Article_symbols_04_11

Article_symbols_04_21

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

Как включить минускульные цифры в CSS:

font-feature-settings: “onum”;

Табличные цифры
tabular numerals

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

Как включить табличные цифры в CSS:

font-feature-settings: “tnum”;

Пропорциональные цифры
proportional numerals

В некоторых шрифтах табличные цифры стоят на основном месте и работают по умолчанию. Для таблиц это очень хорошо, а вот для текста и особенно для заголовков — не очень, потому что, например, вокруг цифры 1 будут большие некрасивые дыры.

Если в шрифте есть цифры неодинаковой ширины, то есть пропорциональные, в качестве альтернативы, то их можно включить вот так:

font-feature-settings: “pnum”;

Дроби
fractions

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

Как включить дроби в CSS:

font-feature-settings: “frac”;

Перечёркнутый ноль
slashed zero

Используется там, где особенно важно отличить ноль от буквы «О», например, в промокодах.

Как включить перечёркнутый ноль в CSS:

font-feature-settings: “zero”;

Регистрозависимые знаки
case-sensitive forms

Article_symbols_06_1

Article_symbols_06_2

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

Как приподнять знаки пунктуации с помощью CSS:

font-feature-settings: “case”;

Капитель
small caps

Article_symbols_05_1

Article_symbols_05_2

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

Как включить капитель в CSS только для строчных букв:

font-feature-settings: “smcp”;

Как сделать капителью вообще всё, включая прописные:

font-feature-settings: “c2sc”, “smcp”;

Нетиповые возможности шрифта

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

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

Все стилистические сеты называются по одному принципу — ssXX, где ХХ — номера от 01 до 20, и включаются с помощью строки следующего типа:

font-feature-settings: “ss01”;

Например, в шрифте Hint такая строка (и стилистический сет ss01) включит круглую букву «а»:

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

Стилистический сет ss19 включит микротипограф.

В шрифтах Circe и Circe Slab, которые у многих есть, стилистический сет ss02 включит буквы в стиле ар деко.

Cтилистический сет ss06 включит круглую букву «а».

Cтилистический сет ss10 включит треугольные формы «ДдЛл».

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

Правда, там отображаются только первые 9 стилистических сетов, но вы теперь знаете, что их может быть больше.

Один из разделов нашей «Тёмной стороны шрифта» посвящён возможностям современных шрифтов, там можно узнать больше об OpenType в целом и о его нестандартном использовании.