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

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

От автора: типографика в вебе всегда отставала от своего печатного собрата. И это можно понять, ведь у печатного шрифта были столетия, чтобы развиться до такой сложности, которую трудно уместить в рамках браузера. Тем не менее, благодаря растущей доступности возможностей 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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

В текстовом наборе/основном тексте необходимо использовать пропорциональные старые цифры

В заголовках – пропорциональные выровненные цифры

В числовых таблицах – табличные выровненные цифры

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
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.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree