CSS от А до Я: работа с OpenType в тексте

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

Полный видеоурок и его текстовую версию по тексту и типографике можно найти здесь.

T значит текст и OpenType

На этой неделе все наши статьи про текст и типографику. В видеоуроке мы рассмотрели все виды CSS свойств для стилизации текста. В этом же уроке мы более подробно узнаем про возможности формата OpenType.

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

Используйте сервисы шрифтов премиум класса

Директива @font-face в CSS позволяет нам загружать любой пользовательский шрифт в проект. Шрифт может находиться на Google Fonts, или же можно создать свой собственный с помощью генератора типа Font Squirel. Оба сервиса предлагают множество замечательных и бесплатных шрифтов, но иногда хочется чего-то более профессионального, хочется получить премиум шрифт с сервисов типа Adobe Typekit, Fonts.com или какого-то другого.

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

На данный момент я пользуюсь сервисом Adobe Typekit для установки шрифтов в клиентские проекты, и до последнего времени я горя не знал с этим сервисом. Единственный недостаток заключается в том, что нельзя скачать все шрифты на жесткий диск, что слегка напрягает, когда нужно проектировать дизайн с этими шрифтами в Sketch или Adobe Photoshop.

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

Включите лигатуры

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

К классическим лигатурам можно отнести комбинации букв ff, fi, fl, ffi и th. При обычном просмотре, когда буквы разделены, кажется, что между ними слишком много пространства. Лигатуры ложатся намного лучше. Лигатуры – это микрооптимизация, но смотрится это очень классно. Вы точно удивите своих друзей-заучек. Чтобы использовать лигатуры (если шрифт поддерживает их), необходимо прописать следующий код:

Есть альтернативный синтаксис свойства font-feature-settings, который позволяет записать несколько OpenType функций, разделенных запятой. Как у свойств margin и padding.

В Safari лигатуры включены по умолчанию, но для браузеров Firefox, Opera, Chrome и IE (10+) необходимо включить их явно.

Используйте росчерки, чтобы придать экстравагантности

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

Посмотреть весь список функций OpenType в CSS можно здесь. Для активации росчерков, необходимо использовать код ниже:

Исправьте расстояния между букв с помощью кернинга

В текстовой версии урока мы рассмотрели свойства letter-spacing и word-spacing, которые позволяют изменять расстояния между буквами и словами. Для еще большего контроля и лучшей разборчивости текста мы можем воспользоваться функцией OpenType font-kerning.

Кернинг – процесс подстройки пространства между определенной комбинацией символов для лучшего восприятия читателем. Дизайнеры могут часами вручную настраивать эти отступы в графических редакторах типа Illustrator и Photoshop, но как только доходит до переноса текста в браузер, они вынуждены отказаться от всего этого. Активировать эту функцию можно с помощью свойств font-kerning или font-feature-settings:

Задавайте несколько OpenType функций за раз

Мы узнали про три самые известные и самые впечатляющие функции OpenType, но их гораздо больше. Если вы хотите использовать эти мощные функции, вполне вероятно, что вы захотите активировать их все одним махом. И сокращения font-variant и font-feature-settings позволяют нам это сделать.

Почему я взял оба сокращения? Причина в проблемах с поддержкой в браузерах. На момент написания статьи IE10 поддерживает font-feature-settings, но не поддерживает другие OpenType свойства типа font-kerning и font-variant. В Safari есть поддержка отдельных свойств типа font-kerning, но он не видит font-feature-settings. Чтобы активировать все свойства разом, нужно использовать набор следующих свойств:

Используйте шаблоны для ускорения работы с OpenType

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

Вы, скорее всего, знаете, что такое normalize.css – библиотека, которая используется для сброса стилей во всех браузерах.
Недавно я нашел библиотеку normalise-opentype.css, которая добавляет функции OpenType со всеми необходимыми свойствами и фолбэками и обеспечивает глубокую поддержку в браузерах. Вы получаете все фишки OpenType. Проект можно найти на github, а использовать его так же легко, как просто добавить ссылку на дополнительный файл стилей или добавить его в @imports. Замечательный инструмент, с которым я точно поэкспериментирую в следующем проекте!

Автор: Guy Routledge

Источник: //www.sitepoint.com/

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

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

Комментарии (1)