1. формати шрифтів
2. Вставляються веб-шрифти
3. Хостинг веб-шрифтів
4. Просунуті функції типографіки
5. Інтервал і кернинг
6. Просунуті функції OpenType
7. Відступи між букв і слів
8. рендер шрифтів
9. хінтінг
10. згладжування шрифтів
11. Увага: OptimizeLegibility
12. Просунуті можливості веб-шрифтів
13. Завантаження ліцензійних шрифтів на Github
14. Тактики завантаження шрифтів
15. Файли шрифтів з кодуванням Base64
16. Декорація тексту через CSS
17. змінні шрифти
18. висновок

Від автора: Thierry Blancpain - бренд-дизайнер, працює в Informal Inquiry в Нью-Йорку, є співзасновником Grilli Type, семейсіва шрифту Swiss. Стаття може бути застосована до всіх веб-шрифтів, проте в якості прикладів концепцій використовуються шрифти Grilli Type, зокрема ті, які демонструють функції OpenType.

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

формати шрифтів

При покупці ліцензії на шрифт ви отримуєте пакет файлів шрифтів, який зазвичай включає, як мінімум, такі формати:

Embedded OpenType (EOT): EOT - старий формат, розроблений Microsoft. EOT необхідний для рендера шрифтів в старих версіях IE. EOT часто надають в стислому вигляді, тому якщо вам не потрібно підтримувати IE8 і нижче, то краще відмовитися від цього формату.

TrueType (TTF): TTF - формат шрифту, розроблений Microsoft і Apple в 1980-х. Сучасні файли TTF також називають TrueType OpenType шрифти. TTF корисний для розширення підтримки старих браузерів, особливо мобільних при необхідності.

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

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3

Web Open Font Format (WOFF): WOFF розроблений в 2009 - це формат-обгортка для шрифтів TrueType і OpenType. Формат стискає файли і підтримується у всіх сучасних браузерах.

Web Open Font Format 2 (WOFF2): WOFF2 - оновлення оригінального формату WOFF. Розроблено Google і вважається найкращим форматом із запропонованих, так як забезпечує менший розмір файлів і кращу продуктивність в сучасних браузерах з підтримкою.

Якщо ваша цільова аудиторія використовує сучасні браузери, ви можете взяти прогресивний метод @ font-face, який працює тільки з форматами WOFF і WOFF2. Формати дають краще стиснення і дозволяють працювати з меншою кількістю файлів в коді. Якщо машина користувача стара і не підтримує жоден з них, можливо, краще надати їх у вигляді системного шрифту для поліпшення продуктивності.

Якщо хочете максимально розширити підтримку, додайте файли EOT і TTF. Також для розширення підтримки браузерів зазвичай використовують SVG шрифти, але на сайті Grilli Type ми більше не використовуємо SVG шрифти, так як у них є мінуси. Google Chrome, наприклад, повністю видалив їх підтримку.

Вставляються веб-шрифти

Підключення шрифтів в CSS здійснюється через @ font-face. Нижче представлена ​​максимальна підтримка, в тому числі всі формати шрифтів, про які ми говорили раніше:

@ Font - face {

font - family: FontName;

src: url ( 'path / filename.eot');

src: url ( 'path / filename.eot? #iefix') format ( 'embedded-opentype'),

url ( 'path / filename.woff2') format ( 'woff2'),

url ( 'path / filename.woff') format ( 'woff'),

url ( 'path / filename.ttf') format ( 'truetype');

}

Якщо необхідно підтримувати тільки сучасні браузери, можна урізати код:

@ Font - face {

font - family: FontName;

src: url ( 'path / filename.woff2') format ( 'woff2'),

url ( 'path / filename.woff') format ( 'woff');

}

Після оголошення шрифтів їх можна використовувати на елементах. наприклад:

body {

font - family: 'FontName', Helvetica, Arial, sans - serif;

}

Хостинг веб-шрифтів

Один з найбільш гнучких способів завантажувати веб-шрифти - це зберігати їх самому. Тобто ви зберігаєте файли на своєму сервері, і шрифти завжди будуть доступні користувачам на сайті без сторонніх залежностей. Для завантаження своїх шрифтів не потрібні трек-коди і JS. Безліч невеликих сайтів-виробників шрифтів дають пряме посилання на завантаження, що дозволяє самим зберігати файли. Ми в Grilli Type вважаємо це найкращим способом доставки шрифтів.

Поки деякі виробники шрифтів пропонують самостійний хостинг (як з великими обмеженнями та вимогами, так і без), інші дають лише свій хостинг. Тобто вони самі будуть хостити файли від вашого імені. Серед таких сайтів можна виділити Hoefler & Co. , Font Bureau і Typotheque . Font Bureau і Typotheque пропонують свої шрифти в обох варіантах за різними цінами.

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

Просунуті функції типографіки

Давайте розглянемо парочку найбільш просунутих функцій веб-шрифтів.

Інтервал і кернинг

У файлах є 2 настройки, які відповідають за відстань між символами:

letter-spacing: бічні відступи зліва і праворуч від кожного символу

font-kerning: особлива настройка між двома символами

Інтервал можна повністю відключити. В такому випадку движок рендера тексту (браузер) не знатиме, що робити з буквами. Кернинг ж за замовчуванням виключений і включається вручну в CSS.

Контролювати кернинг легше, ніж ви думаєте! Як активувати кернинг у всхе браузерах з підтримкою:

p {

font - feature - settings: "kern" 1;

font - kerning: normal;

}

Якщо ви не використовуєте Autoprefixer, то вам доведеться вручну писати Вендорний префікси для підтримки в старих версіях:

/ * All vendor prefixes for `font-feature-settings` * /

p {

- moz - font - feature - settings: "kern" 1;

- ms - font - feature - settings: "kern" 1;

- o - font - feature - settings: "kern" 1;

- webkit - font - feature - settings: "kern" 1;

font - feature - settings: "kern" 1;

font - kerning: normal;

}

Просунуті функції OpenType

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

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

Для демонстрації з'єднання просунутих функцій OpenType представляю вам код нижче. Код включає числові символи з підтримкою OpenType, старих цифр (onum) і пропорційних чисел (pnum). Також шрифт включає кернінг і особливий стилістичний набір.

. my - element {

font - feature - settings: "onum" 1, "pnum" 1, "kern" 1, "ss01" 1;

}

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

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3

За допомогою атрибута font-feature-settings можна активувати стилістичні альтернативи, дискреційні лігатури, різні типи фігур, маленькі великі літери та інші корисні речі. На Typofonderie є чудовий огляд просунутих функцій з прикладами.

font-feature-settings використовується для установки безлічі OpenType функцій за раз. Тому неможливо визначити одну настройку по-іншому, так як інші варіанти не будуть успадковуватися. Щоб змінити установки дочірніх елементів необхідно заново визначати всі функції.

Відступи між букв і слів

CSS вже давно підтримує letter-spacing і word-spacing. При правильному використанні обидва атрибути дозволяють добре контролювати 2 важливих аспекти зовнішнього вигляду шрифту.

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

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

Я з'ясував, що letter-spacing і word-spacing найкраще працюють з em одиницями. Це дозволяє відступами гнучко підлаштовуватися на основі розміру шрифту на елементі, до якого він застосований. Наступний приклад дасть тексту трохи більше місця на незначних обсягах шрифту:

p {

font - size: 12px;

letter - spacing: 0.015em;

word - spacing: 0.001em;

}

рендер шрифтів

Використання шрифтів на екрані піднімає важливі питання про те, як відбувається їх рендер. Зазвичай шрифти проектують під сітку 1000 units tall або вище, але відображають у розмірі близько 16px. При взаємодії пристрою, екрану і ПО таке скорочення дозволу і точності вимагає деяких умінь, щоб поліпшити читаність маленького шрифту. Будьте спостережливі, тестируйте краще рішення в декількох браузерах, щоб використовувати кращі методи для поліпшення читаності.

хінтінг

Всі ОС по-різному бачать шрифти. У MacOS смарти знаходяться в ОС (отже, можуть розвиватися з часом), в той час як самі шрифти можуть бути тупими. На Windows історично так склалося, що смарт включають в ПО шрифтів, і система повинна використовувати ці смарти, щоб вирішити, як шрифт повинен відображатися на різних розмірах.

Ці смарт називаються хінтінг (підказки). Хінтінг інформація, вставлена ​​в файли шрифту, може підказати комп'ютера, що 2 смуги символу Н повинні мати однакову ширину рядка, або що відстань зверху і знизу від середньої лінії повинно бути приблизно однаковим на незначних обсягах.

Хінтінг - дуже складна тема. Важливо зрозуміти, що один і той же шрифт на одному розмірі може рендери по-різному, навіть на тому ж ПК. Все залежить від безлічі факторів, у тому числі екрану, браузера і навіть шрифту і кольору фону.

У Microsoft на тему хінтінг є керівництво . Незважаючи на те, що воно було випущено в 1997, чтиво досі актуально. У ньому дуже докладно розкрита тема.

згладжування шрифтів

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

p {

- webkit - font - smoothing: antialiased; / * Chrome, Safari * /

- moz - osx - font - smoothing: grayscale; / * Firefox * /

}

Ці властивості CSS зроблять текст ще точніше і тонше на MacOS і iOS. Однак це може привести до проблем з рендером, особливо якщо шрифт уже був тонкий або жирний.

antialiased і grayscale корисні для балансу рендеру шрифтів при використанні світлого тексту на темному тлі. Без них текст був би більш жирним.

font-smoothing і його значення не стануть стандартної CSS функцією, тому використовуйте його обережно і, можливо, тільки в тому контексті, де необхідно працювати з певним браузером.

Увага: OptimizeLegibility

Ми часто зустрічаємо цей атрибут при налагодження шрифту на сайтах клієнтів Grilli Type:

p {

text - rendering: optimizeLegibility;

}

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

У даного значення є способи застосування, але не використовуйте його, якщо не впевнені. Швидше за все, воно вам не потрібно.

Просунуті можливості веб-шрифтів

Нижче представлено ще більше просунутих можливостей для тих, хто хоче підвищити свій рівень.

Завантаження ліцензійних шрифтів на Github

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

. DS_Store

path / to / web / fonts / folder / *

Тактики завантаження шрифтів

Завантаження веб-шрифтів може бути такою ж легкою, як @ font-face, але не факт, що продуктивність буде найкращою. Наприклад, це може привести до блимання нестілізованного тексту (МНТ), що вважається поганим UX в деяких випадках. Стаття Zach Leat « повне керівництво по стратегіях завантаження шрифтів »Розповідає про це і пропонує методи щодо поліпшення завантаження, які ощасливлять ваших користувачів і вас.

Файли шрифтів з кодуванням Base64

У деяких рідкісних випадках зручно кодувати шрифти в base64 через CSS. Однак у більшості випадків це не потрібно. У процесі кодування можна порушити ліцензійні угоди. При використанні base64 уважно прочитайте правила використання шрифту.

Декорація тексту через CSS

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

змінні шрифти

У 2017 вийшла OpenType специфікація шрифтів 1.8.2, що відкрило дорогу змінним шрифтів. Нова версія OpenType дозволяє включати безліч стилів шрифту в один файл, знижуючи кількість запитів на сервер і розмір файлу. Залежно від вибору дизайнера шрифт також може допускати використання довільної жирності між існуючою жирністю і шириною шрифту. на Axis Praxis можна погратися з існуючими тестовими шрифтами - знадобиться остання версія Safari або Chrome.

висновок

У статті було порушено багато тем! Сподіваюся, тепер ви розумієте різницю між файлами шрифтів, як з ними працювати, а також всі приголомшливі і потужні способи стилізації шрифтів з перевіреними і істинними методами і передовими можливостями.

Автор: Thierry Blancpain

джерело: https://css-tricks.com/

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

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

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3

Практика верстки сайту на CSS Grid з нуля