Новий адаптивний шрифт для сайту

25

Від автора: в листопаді цього року Nick Sherman виступив з доповіддю для сайту Ampersand. Виступ в основному було побудовано за його статті «нові шрифти в адаптивному дизайні». І в статті і в своєму виступі автор пропонує новий адаптивний шрифт для сайту для вирішення складних проблем адаптивного дизайну:.

«…символи задаються однією, статичною, конкретною формою. Будь-які варіації насиченість шрифту, ширини літер, контрасту – не важливо чого вимагають підключення окремих файлів. В області дизайну реальних друкованих документів, де макет повністю статичний, дана концепція може бути не так вже й погана. В інтернеті ж це обмеження я називаю «скляна підлога» адаптивної типографіки: змінні високого рівня типу відступів між символами, міжрядкового інтервалу і розміру шрифту можна налаштовувати динамічно. Однак на нижчому рівні, де змінні задаються всередині шрифту, гнучкість відсутня. Кожен символ подібний кубику льоду, плаваючого в море адаптивного дизайну.»

Дизайнерське співтовариство займається подібними маніпуляціями з символами: дизайнери вибирають кілька пікових протилежних значень товщини і тонкощі, вузький або широкий символ і з допомогою розумного алгоритму заповнюють проміжні значення. Цей процес добре пояснений в Andrew johnson’s SVG interpolation experiment.

Новий адаптивний шрифт для сайту

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

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

Чи потрібні нам такі можливості в шрифтах? Як адаптивні шрифти допоможуть вирішити дизайнерські проблеми?

Переваги формату змінюється шрифту

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

Також ми, нарешті, зможемо створити шаблон, текст якого буде займати весь простір контейнера, як в демо Font to Width:

Новий адаптивний шрифт для сайту

Даний метод схожий з FitText і зі способом застосування одиниць вимірювання для налаштування адаптивного тексту. Але є і чітке відміну, які висловив Erik van Blokland:

«Ширина тексту миттєво підлаштовується під цільовий розмір прямокутника. Слова повинні вміти реагувати на зміну геометрії сторінки.»

Тобто для більш точного підстроювання під «геометрію сторінки» необхідно повністю контролювати використовуваний шрифт. Зокрема, ширина кожного символу так само важлива, як і можливість встановлювати адаптивні значення властивості font-size.
Продуктивність це ще одна причина, чому краще використовувати формат змінюваного шрифту. З таким форматом нам знадобиться всього один файл, в той час як зараз нам потрібно безліч різновидів одного шрифту для роботи з системами, які запитують ціле сімейство шрифтів, серед яких экстратонкие, тонкі, звичайні, середньої жирності, напівжирні, жирні і сверхжирные варіації.

Ідея адаптивного шрифту не нова, і в минулому робилося безліч спроб створення чогось схожого. Adam Twardoch, директор розділу Products на сайті Fontlab, закликав до відродження цієї ідеї ще в 2013 році:

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

Nick продовжив і проссумировал переваги:

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

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

Як новий формат повинен працювати в CSS

У своєму виступі Nick запропонував практичний приклад CSS коду. Я написав щось схоже і додав вигадане властивість font-width. Дана властивість дозволяє задавати ширину символу точно так само, як з допомогою font-weight тексту:

@font-face {
font-family: WebFont;
src: url(‘webfont.new’) format(‘new format’);
}
body {
font-family: WebFont;
font-weight: 450;
font-width: 200;
}
h1 {
font-weight: 600;
font-width: 999;
}

Можна поставити ще один елемент зі значенням font-weight: 601или 411, або будь-яким іншим значенням, яке потрібно в дизайні. Даний елемент буде реагувати на зміни дизайну.

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

А що з WOFF?

В даний час є ще один формат, що набирає популярність, WOFF 2.0. У цьому шрифті істотно поліпшений алгоритм стиснення у порівнянні з його попередником. Стиснення буде вкрай корисно для мов азіатсько-тихоокеанського регіону та інших мов з великою кількістю символів. І все ж, в WOFF 2.0 досі немає тієї особливості форматів змінюваних шрифтів, які дозволяють змінювати текст динамічно. Доводиться використовувати кілька файлів з різними значеннями ширини символів та їх насиченості.

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

Потенційні проблеми

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

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

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

А з іншого боку: чи потрібно, щоб на пристрої користувача шрифт був динамічним?

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

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

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

Підводимо підсумки

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

А що ви думаєте? Чи приймете формат змінюваного шрифту з розпростертими обіймами? Або все це ідеалізована нездійсненна мрія? З радістю відповімо на всі ваші коментарі.