От автора: в ноябре этого года 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 для текста:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
@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 шрифтов, таких как капители и лигураты из-за того, что многие графические дизайнеры даже не знают про их существование.
Точно так же, дизайнеры шрифтов не могут просто пересобрать шрифт с добавлением новых переменных. Им приходится разрабатывать шрифт с нуля на первых этапах проекта, встраивая новую технологию.
Подводим итоги
Я считаю, что у нового формата изменяемых шрифтов есть все шансы занять ключевое место в наборе инструментов дизайнера. Помимо этого, значительно повысится читаемость текста для пользователей. Но это не значит, что мы можем игнорировать множество проблем, мешающих созданию рабочей спецификации.
А что вы думаете? Примете ли вы формат изменяемого шрифта с распростертыми объятиями? Или все это идеализированная несбыточная мечта? С радостью ответим на все ваши комментарии.
Автор: Robin Rendle
Источник: //css-tricks.com/
Редакция: Команда webformyself.
