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

32

Від автора: вітаю вас в нашій серії уроків CSS від А до Я! В цій серії я розповім вам про CSS значення і властивості, які починаються з різних букв алфавіту. Іноді навчального ролика буває недостатньо, і в цій статті я дам вам кілька швидких порад щодо того, як з допомогою OpenType стилізувати текст.

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

T текст і OpenType

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

Це сімейство властивостей дозволяє вам використовувати всі блага типографіки для стилізації тексту, якщо, звичайно, у вас є доступ до шрифтів, які володіють такими можливостями. Такі шрифти дуже зручні для читання. Насамперед давайте дізнаємося, де нам знайти ці незвичайні шрифти.

Використовуйте сервіси шрифтів преміум класу

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

Ці преміум шрифти не просто високої якості, вони підвищують розбірливість тексту, спосіб установки і продуктивність завантаження. Я б з радістю покопався в деталях, але зараз це вище мого розуміння!

На даний момент я користуюся сервісом Adobe покращення якості її роботи для встановлення шрифтів в клієнтські проекти, і до останнього часу я горя не знав з цим сервісом. Єдиний недолік полягає в тому, що не можна завантажити всі шрифти на жорсткий диск, що злегка напружує, коли потрібно проектувати дизайн з цими шрифтами в Sketch або Adobe Photoshop.

Проте головний плюс цього сервісу в тому, що у них є ряд шрифтів OpenType. Всі наступні поради будуть тільки для тих, у кого є шрифти з функціями OpenType.

Увімкніть лігатури

Лігатури – функція OpenType, що дозволяє поєднати декілька послідовно йдуть символів в один для підвищення розбірливості тексту і більш елегантного вигляду. Приклади лігатур можна подивитися за посиланням.

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

body {
font-variant-ligatures: common-ligatures;
font-feature-settings: «liga», «clig»; /* для IE */
}

Є альтернативний синтаксис властивості font-feature-settings, який дозволяє записати кілька OpenType функцій, розділених комою. Як у властивості margin і padding.

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

Використовуйте розчерки, щоб надати екстравагантності

Якщо ви працюєте над проектом, в якому потрібен злегка незвичайний шрифт, можна скористатися OpenType розчерками. Функція замінює звичайні символи символами з розчерками. Це ті ж самі букви, тільки більш екстравагантні.

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

.fancy-title {
font-feature-settings: «swsh»;
}

Виправте відстані між літер за допомогою кернінгу

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

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

body {
font-kerning: normal;
font-feature-settings: «kern»;
}

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

Ми дізналися про три найвідоміші і найбільш вражаючі функції OpenType, але їх набагато більше. Якщо ви хочете використовувати ці потужні функції, цілком імовірно, що ви захочете активувати їх все одним махом. І скорочення font-variant і font-feature-settings дозволяють нам це зробити.

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

body {
font-variant: common-ligatures;
font-kerning: «kern»;
font-feature-settings: «liga», «clig», «swsh», «kern»;
}

Використовуйте шаблони для прискорення роботи з OpenType

Якщо цієї інформації для вас занадто багато за раз, і вам потрібно щось таке, щоб можна було швидко зрозуміти принцип і легко почати працювати, я вас повністю розумію, і на щастя, є дещо, що допоможе вам.

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