Улучшение типографики через вариации шрифтов

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

Статья должна стать обзором того, как контролировать функции OpenType через CSS, но не забывайте, что любой используемый вами шрифта также должен поддерживать эти функции. Множество примеров из статьи взяты из книги Web Typography от Richard Rutter, в которой есть несколько замечательных разделов, посвященных вариациям шрифтов.

Демо

Свойства font-variant-

Контролировать большую часть OpenType функций можно через свойства, начинающиеся на font-variant-. Также есть низкоуровневое свойство font-feature-settings, его можно использовать для поддержки старых браузеров. Однако по возможности стоит использовать более современные свойства font-variant. Как выход – можно использовать правило @supports для проверки поддержки свойства font-variant. Если свойство не поддерживается, использовать font-feature-settings.

body { font-feature-settings: "liga" 1;
} @supports (font-variant-ligatures: common-ligatures) { body { font-feature-settings: normal; font-variant-ligatures: common-ligatures; }
}

font-variant-ligatures

Лигатура – одиночный символ, составленный из двух символов. Они спасают от неловких и страшных ситуаций с буквами и улучшают читаемость.

common-ligatures

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

Общие лигатуры: сверху вкл, снизу выкл

font-variant-ligatures: common-ligatures; /* enable */
font-variant-ligatures: no-common-ligatures; /* disable */ font-feature-settings: 'liga' 1; /* low-level enable */
font-feature-settings: 'liga' 0; /* low-level disable */

discretionary-ligatures

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

Дискреционные лигатуры: сверху вкл, снизу выкл

font-variant-ligatures: discretionary-ligatures; /* enable */
font-variant-ligatures: no-discretionary-ligatures; /* disable */ font-feature-settings: 'dlig' 1; /* low-level enable */
font-feature-settings: 'dlig' 0; /* low-level disable */

Контекстные

Альтернативные лигатуры, изменяющиеся от окружения. Используются для гармонизации форм сгруппированных символов. По умолчанию выключены.

Контекстные лигатуры: сверху вкл, снизу выкл

font-variant-ligatures: contextual; /* enable */
font-variant-ligatures: no-contextual; /* disable */ font-feature-settings: 'calt' 1; /* low-level enable */
font-feature-settings: 'calt' 0; /* low-level disable */

historical-ligatures

Эти лигатуры можно отнести к подразделу дискреционных. С их помощью достигается исторический эффект. По умолчанию выключены.

font-variant-ligatures: historical-ligatures; /* enable */
font-variant-ligatures: no-historical-ligatures; /* disable */ font-feature-settings: 'hlig' 1; /* low-level enable */
font-feature-settings: 'hlig' 0; /* low-level disable */

font-variant-position

Для подстрочных и надстрочных символов правильно использовать теги sub и sup. По умолчанию браузеры берут обычный цифровой символ, уменьшают его через font-size и поднимают или опускают его через vertical-align. Это ненастоящие подстрочные и надстрочные символы. Обычно они выглядят ужасно, также они могут испортить высоту строки.

К счастью, теперь есть способ включить настоящие подстрочные и надстрочные символы с помощью font-variant-position. На данный момент свойство поддерживается только в Firefox.

Подстрочные и надстрочные символы сверху (только в Firefox). Поведение браузера по умолчанию снизу

Sub

Включает настоящие подстрочные символы.

font-variant-position: sub; /* enable */
font-variant-position: normal; /* disable both variants */ font-feature-settings: 'subs' 1; /* low-level enable */
font-feature-settings: 'subs' 0; /* low-level disable */

Super

Включает настоящие надстрочные символы.

font-variant-position: super; /* enable */
font-variant-position: normal; /* disable both variants */ font-feature-settings: 'sups' 1; /* low-level enable */
font-feature-settings: 'sups' 0; /* low-level disable */

font-variant-caps

На самом деле, заглавные буквы таковыми не являются. Самое значительное, для чего используют font-variant-caps – включение маленьких заглавных букв, но есть и другие опции.

small-caps

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

Маленькие заглавные буквы сверху, обычные заглавные буквы снизу

font-variant-caps: small-caps; /* enable */
font-variant-caps: normal; /* disable all variants */ font-feature-settings: 'smcp' 1; /* low-level enable */
font-feature-settings: 'smcp' 0; /* low-level disable */

all-small-caps

Значение small-caps с заменой букв нижнего регистра на маленькие заглавные. Для замены всех букв на маленькие заглавные, необходимо использовать all-small-caps.

Все маленькие заглавные сверху, обычные маленькие заглавные снизу

font-variant-caps: all-small-caps; /* enable */
font-variant-caps: normal; /* disable all variants */ font-feature-settings: 'smcp' 1, 'c2sc' 1; /* low-level enable */
font-feature-settings: 'smcp' 1, 'c2sc' 0; /* low-level disable */

petite-caps

Обычные маленькие заглавные буквы обычно чуть больше x-height шрифта. В некоторых шрифтах есть дополнительные маленькие заглавные буквы, совпадающие с x-height. Они называются petite-caps.

font-variant-caps: petite-caps; /* enable */
font-variant-caps: normal; /* disable all variants */ font-feature-settings: 'pcap' 1; /* low-level enable */
font-feature-settings: 'pcap' 0; /* low-level disable */

all-petite-caps

Как и all-small-caps, это свойство конвертирует все буквы, как нижний, так и верхний регистр в petite caps.

font-variant-caps: all-petite-caps; /* enable */
font-variant-caps: normal; /* disable all variants */ font-feature-settings: 'pcap' 1, 'c2pc' 1; /* low-level enable */
font-feature-settings: 'pcap' 1, 'c2pc' 0; /* low-level disable */

Unicase

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

font-variant-caps: unicase; /* enable */
font-variant-caps: normal; /* disable all variants */ font-feature-settings: 'unic' 1; /* low-level enable */
font-feature-settings: 'unic' 0; /* low-level disable */

titling-caps

Стандартные буквы верхнего регистра спроектированы для использования рядом с символами нижнего регистра, и если в стоке только символы верхнего регистра, текст может казаться слишком жирным. Именно для таких ситуаций в некоторых шрифтах есть titling capitals.

font-variant-caps: titling-caps; /* enable */
font-variant-caps: normal; /* disable all variants */ font-feature-settings: 'titl' 1; /* low-level enable */
font-feature-settings: 'titl' 0; /* low-level disable */

font-variant-numeric

Правильное отображение цифр сильно отличается в зависимости от контекста. Основные правила:

Можно комбинировать значения, например, для создания таких табличные выровненных цифр:

font-variant-numeric: lining-nums tabular-nums;

lining-nums

Lining numerals почти равны заглавным буквам и одинаковы по высоте. Их необходимо использовать в заголовках или числовых таблицах. Обычно цифры выровнены по умолчанию.

Выровненные цифры сверху, старые цифры снизу

font-variant-numeric: lining-nums; /* enable */
font-variant-numeric: normal; /* disable all variants */ font-feature-settings: 'lnum' 1; /* low-level enable */
font-feature-settings: 'lnum' 0; /* low-level disable */

oldstyle-nums

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

Старые цифры сверху, выровненные цифры снизу

font-variant-numeric: oldstyle-nums; /* enable */
font-variant-numeric: normal; /* disable all variants */ font-feature-settings: 'onum' 1; /* low-level enable */
font-feature-settings: 'onum' 0; /* low-level disable */

proportional-nums

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

font-variant-numeric: proportional-nums; /* enable */
font-variant-numeric: normal; /* disable all variants */ font-feature-settings: 'pnum' 1; /* low-level enable */
font-feature-settings: 'pnum' 0; /* low-level disable */

tabular-nums

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

Табличные и пропорциональные цифры. Разница в ширине

font-variant-numeric: tabular-nums; /* enable */
font-variant-numeric: normal; /* disable all variants */ font-feature-settings: 'tnum' 1; /* low-level enable */
font-feature-settings: 'tnum' 0; /* low-level disable */

diagonal-fractions

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

Правильные диагональные дроби сверху, поведение браузера по умолчанию снизу

font-variant-numeric: diagonal-fractions; /* enable */
font-variant-numeric: normal; /* disable all variants */ font-feature-settings: 'frac' 1; /* low-level enable */
font-feature-settings: 'frac' 0; /* low-level disable */

stacked-fractions

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

font-variant-numeric: stacked-fractions; /* enable */
font-variant-numeric: normal; /* disable all variants */ font-feature-settings: 'afrc' 1; /* low-level enable */
font-feature-settings: 'afrc' 0; /* low-level disable */

Ordinal

Порядковые типа st, nd, rd и th по умолчанию будут отображаться, как обычные символы в нижнем регистре. Но в идеале, это должны быть маленькие поднятые символы после числа. Активировать можно значением ordinal.

Правильные порядковые сверху, по умолчанию снизу

font-variant-numeric: ordinal; /* enable */
font-variant-numeric: normal; /* disable all variants */ font-feature-settings: 'ordn' 1; /* low-level enable */
font-feature-settings: 'ordn' 0; /* low-level disable */

slashed-zero

Включает альтернативные символ нуля с чертой.

Перечеркнутый ноль сверху, обычный ноль снизу

font-variant-numeric: slashed-zero; /* enable */
font-variant-numeric: normal; /* disable all variants */ font-feature-settings: 'zero' 1; /* low-level enable */
font-feature-settings: 'zero' 0; /* low-level disable */

font-variant-alternates

В шрифтах могут быть заложены альтернативные варианты символов. Свойство font-variant-alternates позволяет контролировать эти символы.

historical-forms

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

Историческая форма сверху, по умолчанию снизу

font-variant-alternates: historical-forms; /* enable */
font-variant-alternates: normal; /* disable all variants */ font-feature-settings: 'hist' 1; /* low-level enable */
font-feature-settings: 'hist' 0; /* low-level disable */

stylistic(n)

Используйте для выбора стилистических функций по-отдельности. Например, выберите стилистическую функцию номер 1 с помощью font-variant-alternates: stylistic(1).

font-variant-alternates: stylistic(1); /* enable */
font-variant-alternates: normal; /* disable all variants */ font-feature-settings: salt 1; /* low-level enable */
font-feature-settings: salt 0; /* low-level disable */

styleset(1-99)

Используйте для выбора целого набора альтернативных символов. Символы в наборе зачастую должны работать вместе. Выберите определенный набор, передав его номер, например, font-variant-alternates: styleset(1) выберет набор стилей 1.

Альтернативные стили сверху, по умолчанию снизу

font-variant-alternates: styleset(1); /* enable */
font-variant-alternates: normal; /* disable all variants */ font-feature-settings: ss01; /* low-level enable */

character-variant(1-99)

Используйте для выбора определенных вариантов символа. Выберите определенный вариант, передав его номер, например: font-variant-alternates: character-variant(1) выберет вариант символа номер 1.

font-variant-alternates: character-variant(1); /* enable */
font-variant-alternates: normal; /* disable all variants */ font-feature-settings: cv01; /* low-level enable */

swash(n)

С помощью курсивов можно придать шрифту заголовка интерес или сделать его более артистичным. Это альтернативные символы, которые обычно сильно увеличены или размашисты. Выберите определенный курсив, передав его номер, например, font-variant-alternates: swash(1) выберет курсив номер 1.

Курсив сверху, по умолчанию снизу

font-variant-alternates: swash(1); /* enable */
font-variant-alternates: normal; /* disable all variants */ font-feature-settings: swsh 1; /* low-level enable */
font-feature-settings: swsh 0; /* low-level disable */

ornaments(n)

Обычные символы заменяются на орнаменты, если они есть в шрифте.

font-variant-alternates: ornaments(1); /* enable */
font-variant-alternates: normal; /* disable all variants */ font-feature-settings: ornm 1; /* low-level enable */
font-feature-settings: ornm 0; /* low-level disable */

annotation(n)

Аннотации – нотационные формы символов (например, символ внутри открытого/закрытого кольца, квадрата, скобках, алмазы, скругленные блоки и т.д.).

font-variant-alternates: annotation(1); /* enable */
font-variant-alternates: normal; /* disable all variants */ font-feature-settings: nalt 1; /* low-level enable */
font-feature-settings: nalt 0; /* low-level disable */

Автор: Jonathan Harrell

Источник: https://jonathan-harrell.com/

Редакция: Команда webformyself.