«... символи задаються однією, статичної, конкретною формою. Будь-які варіації насиченості шрифту, ширини букв, контрасту - не важливо чого - вимагають підключення окремих файлів. В області дизайну реальних друкованих документів, де макет повністю статичний, дана концепція може бути не так вже й погана. В інтернеті ж це обмеження я називаю «скляна підлога» адаптивної типографіки: змінні високого рівня типу відступів між символами, міжрядкового інтервалу і розміру шрифту можна налаштовувати динамічно. Однак на нижчому рівні, де змінні задаються всередині шрифту, гнучкість відсутня. Кожен символ подібний до кубику льоду, що плаває в морі адаптивного дизайну. »
Дизайнерське співтовариство займається подібними маніпуляціями з символами: дизайнери вибирають кілька пікових протилежних значень типу товщини і тонкощі, вузький або широкий символ і за допомогою розумного алгоритму заповнюють проміжні значення. Даний процес добре пояснений в Andrew Johnson's SVG interpolation experiment.
Як сказав Nick, на жаль, звичайний формат шрифтів не підходить для динамічної зміни значень зі звичайного на жирний або з тонкого на широкий. Але все ж він не єдиний дизайнер, що пропонує поліпшення в цій галузі веб-дизайну. Andrew Johnson виступав зі схожою заявою щодо адаптивного формату шрифтів:
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Чи потрібні нам такі можливості в шрифтах? Як адаптивні шрифти допоможуть вирішити дизайнерські проблеми?
Переваги формату змінюється шрифту
Даний формат пропонує найтоншу налаштування шрифту. Особливо це стане в нагоді, коли тонкий шрифт виглядає занадто тонко, а жирний занадто жирно. Замість цього можна вибрати щось посередині, а шрифт відразу відобразить те, що потрібно - іншими словами, дизайнери зможуть значно підвищити розбірливість тексту.
Також ми, нарешті, зможемо створити шаблон, текст якого буде займати весь простір контейнера, як в демо Font to Width:
Даний метод схожий з FitText і зі способом застосування одиниць вимірювання для настройки адаптивного тексту. Але є і чітке відміну, які висловив Erik van Blokland:
«Ширина тексту моментально підлаштовується під цільової розмір прямокутника. Слова повинні вміти реагувати на зміну геометрії сторінки. »
Тобто для більш точного підстроювання під «геометрію сторінки» необхідно повністю контролювати використовуваний шрифт. Зокрема, ширина кожного символу так само важлива, як і можливість встановлювати адаптивні значення властивості font-size.
Продуктивність це ще одна причина, чому краще використовувати формат змінюваного шрифту. З таким форматом нам знадобиться всього один файл, в той час як зараз нам потрібно безліч різновидів одного шрифту для роботи з системами, які запитують ціле сімейство шрифтів, серед яких екстратонкіе, тонкі, звичайні, середньої жирності, напівжирний, жирні і сверхжірние варіації.
«Я вважаю, що в контексті поточного становища в інтернеті принаймні один з форматів змінюються шрифтів заслуговує воскресіння - даний підхід створює величезний потенціал зі стиснення файлів, а також добре вписується в парадигму« адаптивного інтернету ». Крім усього іншого цей підхід пропонує нові способи розміщення тексту в інтернеті і, перш за все, сам підхід можна набагато легше втілити в життя, ніж будь-коли в історії десктопних комп'ютерів. »
Nick продовжив і проссуміровал переваги:
«Формат змінюється шрифту зменшує навантаження на мережу, скорочує кількість запитів на сервер і назад, прискорює завантаження сторінок, і крім всього він ще й гнучкий. Це перемога по всіх фронтах. (Єдина непротестованих змінна це скільки часу знадобиться на додаткові обчислення). »
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Існує безліч технічних питань, як правильно ввести в експлуатацію новий формат шрифтів, і як використовувати ці нові властивості в дизайні.
Як новий формат повинен працювати в CSS
У своєму виступі Nick запропонував практичний приклад CSS коду. Я написав щось схоже і додав вигадане властивість font-width. Дана властивість дозволяє задавати ширину символу точно так же, як за допомогою font-weight для тексту:
Можна задати ще один елемент зі значенням font-weight: 601ілі 411, або будь-яким іншим значенням, яке потрібно в дизайні. Даний елемент буде реагувати на зміни дизайну.
Тепер, можна чіткіше розглянути недоліки в прикладі вище. Однак я думаю, що приклад потрапляє в саму суть проблеми, сайти будуть підлаштовуватися під будь-які тонкощі і нюанси, під які раніше не могли. Я можу придумати ще безліч прикладів, в яких новий формат дозволить створювати набагато красивіші макети, не кажучи вже про те, як корисний б він був при масштабуванні інтерфейсів.
А що з WOFF?
В даний час є ще один формат, що набирає популярність, WOFF 2.0. В даному шрифті істотно покращено алгоритм стиснення в порівнянні з його попередником. Стиснення буде вкрай корисно для мов азіатсько-тихоокеанського регіону і інших мов з великою кількістю символів. І все ж, в WOFF 2.0 досі немає тієї особливості форматів змінюваних шрифтів, які дозволяють змінювати текст динамічно. Доводиться використовувати кілька файлів з різними значеннями ширини символів і їх насиченості.
Я вважаю WOFF формат хорошим інструментом в короткостроковій перспективі. Однак в довгостроковій перспективі даний формат не допоможе нам зробити шрифт повністю адаптивним.
потенційні проблеми
Крім переваг, про які сказано вище, у нового формату існують також і недоліки з точки зору дизайну і розвитку. Нижче я склав список придуманих можливих в майбутньому проблем:
Якщо алгоритм запускається на стороні клієнта, то справедливості заради слід зазначити, це може погано позначитися на продуктивності.
Необхідно буде переглянути систему ліцензування шрифтів, так як користувачу більше не потрібно завантажувати безліч файлів з різними значеннями ширини і насиченості.
А з іншого боку: так чи потрібно, щоб на пристрої користувача шрифт був динамічним?
Я розмовляв на цю тему з кількома дизайнерами, і вони сказали, що краще мати недінаміческій шрифт, ніж половину робочих можливостей.
Дизайнери шрифтів повинні зрозуміти, як правильно вчити підростаюче покоління і як пояснити їм переваги від нової системи в цілому і те, як вона повинна їм допомогти в роботі. Нещодавно я розмовляв з веб-дизайнером, і він розповів мені, як він уникає окремих символів OpenType шрифтів, таких як капітелі і лігурати через те, що багато графічні дизайнери навіть не знають про їх існування.
Точно так же, дизайнери шрифтів не можуть просто пересобрать шрифт з додаванням нових змінних. Їм доводиться розробляти шрифт з нуля на перших етапах проекту, вставляють нову технологію.
підводимо підсумки
Я вважаю, що у нового формату змінюваних шрифтів є всі шанси зайняти ключове місце в наборі інструментів дизайнера. Крім цього, значно підвищиться читаність тексту для користувачів. Але це не означає, що ми можемо ігнорувати безліч проблем, що заважають створенню робочої специфікації.
Редакція: Команда webformyself.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
