Освойте веб-типографику с помощью OpenType

Мы все можем согласиться с тем, что встраиваемые веб-шрифты являются одним из крупнейших достижений веб-дизайна с момента его создания, особенно в эпоху адаптивный веб-дизайн. С таким количеством элементов, которые перемещаются и меняются от одного размера экрана к другому, великолепная типографика и четкие Гарнитуры — одна из единственных констант, которые одинаково хорошо работают на всех устройствах (кроме устройств, использующих Opera Mini). браузер).

Простое добавление веб-шрифтов — это только часть дела. Слова могут иметь значение, но буквы имеют эмоции. OpenType (OT) — это кроссплатформенный формат файлов шрифтов, разработанный Adobe и Майкрософт. Его функции добавляют большей глубины и разнообразия за счет расширения наборов символов шрифтов с поддержкой OT. включить такие типографские изыски, как лигатуры, росчерки, стилистические альтернативы и даже настоящие кернинг. Расширьте свой эмоциональный словарь, исследуя все эти чудесные возможности; нет причин останавливаться только на шрифте.

Посмотрите эксклюзивный скринкаст этого урока:

Что же это за типографские красоты? Ну, для начала есть лигатуры (в том числе стандартные, произвольные и контекстные разновидности). Это комбинации символов, которые исторически имеют тенденцию сливаться вместе при рисовании или вырезании, например ff, ffl, fi или fj. Технически, это когда «капюшон» буквы f сочетается с «титлом» строчной буквы i или j, но вы можете видеть, как может стать трудно сохранять невозмутимое выражение лица при обсуждении темы.

Один из моих личных фаворитов — менее распространенная лигатура для ct и st, которую можно увидеть, среди прочего, в Adobe Caslon Pro. Кроме того, есть косые черты, подобные тем, что были найдены в Фэрбенке (показаны в использовании из Шрифты.com): милые украшения и украшения, которые при правильном использовании придают по-настоящему неповторимый характер.

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

• Скачать образец страницы включает в себя множество советов и приемов, которые вы можете попробовать в своих проектах.

Немного предыстории

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

С появлением OpenType (или, точнее, формата Open Font) на рабочем столе и его производного Web Open Font. Формат (WOFF), для использования в Интернете, наконец-то существует пара форматов шрифтов, которые можно использовать почти универсально. Важно то, что эти форматы поддерживают гораздо более широкий набор символов и функций для более точного типографского управления, чем когда-либо прежде. Как и во всем, что касается Интернета, использование этих функций поддерживается на разных уровнях во всех основных браузерах, но сейчас они достаточно распространены, чтобы заслуживать серьезного внимания и использования.

Требуемый CSS существует уже несколько лет и является частью модуля типа CSS3. К сожалению, достижение достаточно широкой поддержки формата WOFF продвигалось медленно, поэтому следует, что реализация и поддержка браузеров также развивались медленно. Однако стоит отметить, что все основные браузеры поддерживают функции OpenType (за исключением Opera Mini). Вы можете проверить, как далеко назад распространяется эта поддержка, на Могу ли я использовать.

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

Так зачем беспокоиться?

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

Подробности, пожалуйста

Если на ваш сайт включен шрифт с включенными функциями OpenType, использовать его в CSS довольно просто. Официальный синтаксис CSS3 выглядит следующим образом:

p {
font-feature-settings: "liga" 1, "frac" 1; }

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

p {
-moz-font-feature-settings: "liga=1", "frac=1"; -moz-font-feature-settings: "liga" 1, "frac" 1; -webkit-font-feature-settings: "liga" 1, "frac" 1; -ms-font-feature-settings: "liga=1", "frac=1"; -o-font-feature-settings: "liga" 1, "frac" 1; font-feature-settings: "liga" 1, "frac" 1; }

Да, Firefox здесь дважды. Это связано с изменением синтаксиса где-то в Firefox 14. Вот более полный список существующих функций и способов их использования:

• "c2sc": капители из шапки
• «calt»: контекстные альтернативы
• «clig»: контекстные лигатуры
• «длиг»: дискреционные лигатуры
• «история»: альтернативы исторических персонажей
• "hlig": исторические лигатуры
• «kern»: включить использование встроенной таблицы кернинга.
• «лига»: обычные лигатуры
• "nalt": альтернативная аннотация
• «соль»: стилистические альтернативы
• «smcp»: маленькие прописные
• «ss01»: альтернативный стилистический набор 1.
• "ss02": альтернативный стилистический набор 2.
• "ss03": альтернативный стилистический набор 3.
• "ss04": альтернативный стилистический набор 4.
• "ss05": альтернативный стилистический набор 5.
• "swsh": взмахи
• «ноль»: перечеркнутый ноль

Следующие параметры требуют своего рода условной логики (по крайней мере, в вашем уме), поскольку вы действительно можете включить только одну из этих пар одновременно:

• Регистр чисел:"lnum": номера строк или "onum": номера старого стиля.
• Расстояние между числами:"pnum": пропорциональное или "tnum": табличное (для выравнивания строк чисел, например, финансовых показателей)
• Фракции:"frac": обычные дроби или "afrc": альтернативные дроби

Не хотите все это помнить? Если вы используете Sass, У меня есть для тебя миксин. Он предоставляет приведенный выше список и пишет за вас весь код. Чтобы получить более полный список, попробуй Adobe.

Аргументированный подход

У каждого элемента вашего дизайна должна быть какая-то причина, но важно помнить, что иногда веская причина просто для большей красоты. И это нормально. Хорошая особенность функций OpenType заключается в том, что они сами по себе возвращаются к обычному типу, поэтому их можно безопасно добавлять в ваш дизайн, а уровень доработки, которую они добавляют, может быть весьма заметен. Благодаря большему вниманию к читаемости, увеличению плотности пикселей и качеству экрана, все больше и больше пользователей читают более длинный контент в Интернете. Это означает, что преимущества в читабельности от лучшей типографики могут быстро привести к повышению лояльности. большее восприятие удобства использования и даже парады единорогов и щенков (ладно, возможно, последний вариант — преувеличение).

Слова: Джейсон Паменталь

Эта статья первоначально появилась в сетевой журнал выпуск 253.