От автора: типографика в вебе всегда отставала от своего печатного собрата. И это можно понять, ведь у печатного шрифта были столетия, чтобы развиться до такой сложности, которую трудно уместить в рамках браузера. Тем не менее, благодаря растущей доступности возможностей OpenType в веб-шрифтах и способности контролировать эти функции через CSS, положение быстро меняется. Сегодня мы поговорим о том, как использует типографика шрифт и его вариации для своего улучшения.
Статья должна стать обзором того, как контролировать функции OpenType через CSS, но не забывайте, что любой используемый вами шрифта также должен поддерживать эти функции. Множество примеров из статьи взяты из книги Web Typography от Richard Rutter, в которой есть несколько замечательных разделов, посвященных вариациям шрифтов.
Свойства font-variant-
Контролировать большую часть OpenType функций можно через свойства, начинающиеся на font-variant-. Также есть низкоуровневое свойство font-feature-settings, его можно использовать для поддержки старых браузеров. Однако по возможности стоит использовать более современные свойства font-variant. Как выход – можно использовать правило @supports для проверки поддержки свойства font-variant. Если свойство не поддерживается, использовать font-feature-settings.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее|
1 2 3 4 5 6 7 8 9 10 |
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
Такие лигатуры дизайнер шрифтов использует в обычных условиях. В большинстве обстоятельств необходимо использовать именно их. В большинстве браузеров они включены по умолчанию.
Общие лигатуры: сверху вкл, снизу выкл
|
1 2 3 4 5 |
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
Такие лигатуры можно использовать в типографских целях. Например, для достижения особого эффекта. По умолчанию выключены.
Дискреционные лигатуры: сверху вкл, снизу выкл
|
1 2 3 4 5 |
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 */ |
Контекстные
Альтернативные лигатуры, изменяющиеся от окружения. Используются для гармонизации форм сгруппированных символов. По умолчанию выключены.
Контекстные лигатуры: сверху вкл, снизу выкл
|
1 2 3 4 5 |
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
Эти лигатуры можно отнести к подразделу дискреционных. С их помощью достигается исторический эффект. По умолчанию выключены.
|
1 2 3 4 5 |
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
Включает настоящие подстрочные символы.
|
1 2 3 4 5 |
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
Включает настоящие надстрочные символы.
|
1 2 3 4 5 |
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
Маленькие заглавные буквы имеют ту же высоту, что и символы в нижнем регистре, и используются для перевода букв в заглавные в текстовом наборе. Они лучше связывают параграф и делают его более читаемым.
Маленькие заглавные буквы сверху, обычные заглавные буквы снизу
|
1 2 3 4 5 |
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.
Все маленькие заглавные сверху, обычные маленькие заглавные снизу
|
1 2 3 4 5 |
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.
|
1 2 3 4 5 |
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.
|
1 2 3 4 5 |
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 форма. Реализация функции сильно отличается в разных шрифтах.
|
1 2 3 4 5 |
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.
|
1 2 3 4 5 |
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
Правильное отображение цифр сильно отличается в зависимости от контекста. Основные правила:
В текстовом наборе/основном тексте необходимо использовать пропорциональные старые цифры
В заголовках – пропорциональные выровненные цифры
В числовых таблицах – табличные выровненные цифры
Можно комбинировать значения, например, для создания таких табличные выровненных цифр:
|
1 |
font-variant-numeric: lining-nums tabular-nums; |
lining-nums
Lining numerals почти равны заглавным буквам и одинаковы по высоте. Их необходимо использовать в заголовках или числовых таблицах. Обычно цифры выровнены по умолчанию.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Выровненные цифры сверху, старые цифры снизу
|
1 2 3 4 5 |
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
Старые цифры обладают разной высотой и выравниванием, поэтому очень похожи на буквы нижнего регистра. Их следует использовать в общем тексте.
Старые цифры сверху, выровненные цифры снизу
|
1 2 3 4 5 |
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
В пропорциональных цифрах переменные отступы, и они смешиваются с горизонтальным текстом. В большинстве ситуаций нужно использовать именно их, но только не в числовых таблицах, где важно вертикальное выравнивание. Обычно цифры пропорциональны по умолчанию.
|
1 2 3 4 5 |
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
Табличные цифры обладают одной шириной, их необходимо использовать в числовых таблицах для вертикального выравнивания чисел.
Табличные и пропорциональные цифры. Разница в ширине
|
1 2 3 4 5 |
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
По умолчанию дроби отображаются как буквы в нижнем регистре со слэшем. Правильные дроби форматируются и совпадают с высотой выровненного символа и могут быть как диагональными, так и вертикальными.
Правильные диагональные дроби сверху, поведение браузера по умолчанию снизу
|
1 2 3 4 5 |
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
Вертикальные дроби не так часто встречаются в большинстве веб-шрифтов, как диагональные, но они очень удобны в сложных научных и математических формулах.
|
1 2 3 4 5 |
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.
Правильные порядковые сверху, по умолчанию снизу
|
1 2 3 4 5 |
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
Включает альтернативные символ нуля с чертой.
Перечеркнутый ноль сверху, обычный ноль снизу
|
1 2 3 4 5 |
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
Исторические альтернативные символы можно использовать для эффекта «периода». Обратите внимание на разницу этих символов и исторических лигатур. Исторические лигатуры – это исторические комбинации символов, тогда как исторические формы – это замена отдельных символов.
Историческая форма сверху, по умолчанию снизу
|
1 2 3 4 5 |
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).
|
1 2 3 4 5 |
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.
Альтернативные стили сверху, по умолчанию снизу
|
1 2 3 4 |
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.
|
1 2 3 4 |
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.
Курсив сверху, по умолчанию снизу
|
1 2 3 4 5 |
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)
Обычные символы заменяются на орнаменты, если они есть в шрифте.
|
1 2 3 4 5 |
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)
Аннотации – нотационные формы символов (например, символ внутри открытого/закрытого кольца, квадрата, скобках, алмазы, скругленные блоки и т.д.).
|
1 2 3 4 5 |
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
Источник: //jonathan-harrell.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
