Опентайп фичи: цифры

Хотел написать о правильном оптическом выравнивании знаков шрифта, но тема оказалась гораздо глубже. Эта и следующие записи — моя попытка детального разбора опентайп-фич.

Что это такое, откуда появилось и зачем нужно

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

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

Всего бывает более ста фич.

Как включать

В редакторах есть специальные OpenType-панельки которые управляют включением/выключением определенных фич. В css есть два метода включения: низкоуровневый и высокоуровневый.

Низкоуровневый, через font-feature-settings

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

font-feature-settings: 'onum' 1;

Цифры после значения определяют, включить (1) или выключить (0) фичу (можно обойтись без цифр для включения но нужно смотреть на браузерную поддержку). Другие не работают.

Несколько записей будет выглядеть так (включаем табличные старостильные цифры):

font-feature-settings: 'onum' 1, 'pnum' 1;

Высокоуровневый, через font-variant-

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

font-variant-numeric: oldstyle-nums proportional-nums;

Что еще проверить

Браузерная поддержка определенных фич не вполне хороша. Если у вас специфические требования типа IE9 то прежде чем включать стоит заглянуть сюда https://caniuse.com/

Цифры

Что можно: задавать различный вид и пропорциональность. В случае пропорциональности и стиля цифр это всегда явный вариант «либо-либо», то есть у вас будет включен всегда один из видов (в отличии от фич, которые можно включить или нет). Какой — определяет дизайнер шрифта. Правила сосредоточены в блоке font-variant-numeric.

Везде далее в примерах первая строка — низкоуровневое включение, вторая — высокоуровневое.

Маюскульные и минускульные цифры

Первый обычно включены сразу, но не везде — например в Джорджии есть только минускульные цифры.

Golos RF
//Маюскульные
font-feature-settings: 'lnum' 1;
font-variant-numeric: lining-nums;

//Минускульные
font-feature-settings: 'onum' 1;
font-variant-numeric: oldstyle-nums;

Пропорциональные и моноширинные цифры

Первые хорошо подходят для текста, вторые — для таблиц. Интересный эффект происходит если использовать табличные цифры в рейнджах — тогда при таскании ползунка числа будут увеличиваться без скачков по горизонтали.

PT Root UI
//Пропорциональные
font-feature-settings: "pnum";
font-variant-numeric: proportional-nums;

//Табличные
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;

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

Автоматические дроби

Любое сочетание типа 1/2 автоматически превращается в ¹⁄₂ (разумеется при наличии всех над- и под- индексов в шрифте).

PT Root UI
font-feature-settings: "frac";
font-variant-numeric: diagonal-fractions;

Дроби посложнее

Превращаются в дробь не с косой чертой а с горизонтальной, но шрифтов с такими фичами очень мало (для примера мне пришлось вытаскивать из глифов, а не включать фичами):

Не включено фичами а скопировано из панели глифов Palatino.
font-feature-settings: "afrc";
font-variant-numeric: stacked-fractions;

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

Полезен если есть необходимость не спутать О и 0.

IBM Plex Sans
font-feature-settings: "zero";
font-variant-numeric: slashed-zero;

Не вполне цифры

Определенное отображение порядковых числительных, принятое в разных странах. В кириллической традиции не встречается, поэтому мало полезно. Тоже входят в состав font-variant-numeric, поэтому отнесем его к цифрам.

IBM Plex Sans

Реально лучше детально проверять что включается а что нет — у меня в нескольких шрифтах работали испанские 1a но не работали английские 1st и 2nd.

font-feature-settings: "ordn";
font-variant-numeric: ordinal;

На закуску (с чего все началось)

При использовании с прописными буквами или маюскульными цифрами обычные знаки тире, дефиса, минуса стоят слишком низко. Скомпенсировать поможет фича «Case sensitive forms»:

Golos RF
font-feature-settings: "case" on;
//высокоуровнего свойства пока нет ¯\_(ツ)_/¯

Краткое саммари

  1. Проверяйте, какие есть фичи в шрифте, читая спецификацию.
  2. Включайте их в css через высокоуровневый или низкоуровневый метод.
  3. Не забывайте про браузерную поддержку.

✌︎

Поделиться
Отправить
Запинить
Популярное