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

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

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

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

font-variant-ligatures

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

common-ligatures

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

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

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

discretionary-ligatures

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

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

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

Контекстные

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

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

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

historical-ligatures

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

font-variant-position

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

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

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

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

Sub

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

Super

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

font-variant-caps

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

small-caps

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

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

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

all-small-caps

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

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

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

petite-caps

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

all-petite-caps

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

Unicase

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

titling-caps

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

font-variant-numeric

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

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

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

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

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

lining-nums

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

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

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

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

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

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

oldstyle-nums

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

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

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

proportional-nums

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

tabular-nums

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

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

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

diagonal-fractions

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

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

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

stacked-fractions

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

Ordinal

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

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

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

slashed-zero

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

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

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

font-variant-alternates

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

historical-forms

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

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

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

stylistic(n)

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

styleset(1-99)

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

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

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

character-variant(1-99)

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

swash(n)

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

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

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

ornaments(n)

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

annotation(n)

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

Автор: Jonathan Harrell

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

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

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

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

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

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree