Smashing Podcast Episode 5 с Джейсоном Паменталем: что такое вариативные шрифты?

Каждые две недели мы публикуем подкаст, в котором я общаюсь с кем-то из веб-индустрии на разные темы. В этом эпизоде ​​давайте узнаем обо всем, что касается вариативных шрифтов! Я говорю с источником знаний по этому вопросу, Джейсоном Паменталем.

Показать примечания

Еженедельное обновление

• «Системы иллюстраций бренда: создание сильной визуальной идентичности», Yihui Liu
• «Изо всех сил пытаясь справиться с всплеском трафика», Сюзанна Скакка.
• «Создание макета CSS: прямая трансляция с Рэйчел Эндрю», Рэйчел Эндрю
• «Сводка новостей о веб-дизайне и разработке в 2019 году», Рэйчел Эндрю.
• «Должен ли ваш сайт портфолио быть PWA?», Сюзанна Скакка

Переменные шрифты

• Найдите Джейсона в Интернете на сайте rwt.io.
• Информационный бюллетень новостей веб-типографии
• «Вариабельные шрифты: что нужно знать веб-авторам», Джейсон Паменталь
• Книга Эллен Луптон «Думая шрифтом».
• Книга Эрика Шпикермана «Хватит красть овец и узнайте, как работает шрифт»

Стенограмма

Дрю Маклеллан: стратег по дизайну, лидер UX, технолог, эксперт в области веб-типографики и приглашенный эксперт в рабочую группу W3C по веб-шрифтам. Он пишет, говорит и работает с командами и владельцами брендов над тем, как лучше набирать текст на цифровых платформах. Он общался с такими организациями, как Adobe, Audible, Conde Nast, GoDaddy, IBM, выступал с презентациями, семинарами и конференциями по всему миру. Его информационный бюллетень Web Typography News популярен среди тех, кто хочет получить последние новости и советы по типографике в Интернете. Он явно эксперт в веб-типографике. Но знаете ли вы, что он представлял Швецию в крокете на лужайке на Олимпийских играх 1984 года? Мои потрясающие друзья, пожалуйста, поприветствуйте Джейсона Паменталя. Привет, Джейсон. Как твои дела?

Джейсон Паменталь: Я разбиваю. Особенно после этого интро.

Дрю: Я хотел поговорить с вами сегодня о веб-типографике, потому что это действительно ваша тема. Вы настоящий эксперт в веб-типографике. Об этом в целом, а в частности, поговорим немного о вариативных шрифтах. Я буду первым, кто признает, что я не эксперт по типографике. Я имею в виду, пожалуйста, считайте меня таким же неосведомленным, как и всех, кто слушает. Вы не можете опекать меня какой-либо информацией о типографике. Я предполагаю, что веб-шрифты, которые можно использовать, существуют в Интернете уже около десяти лет. Это правильно?

Джейсон: Да. На самом деле, разве это не вы начали что-то в Твиттере пару дней назад? Это было 9 ноября 2009 года. С момента запуска Typekit исполнилось 10 лет за два дня. Я знаю, что Font Deck был прав в те же временные рамки. Затем вскоре появились Google Fonts и Monotype Service. У меня было приглашение на бета-тестирование, которое дал мне мой друг Джон Чианчи, который на самом деле до сих пор является коллегой моей жены в агентстве, где она работает с Typekit где-то в 2009 году. Это было полное переосмысление моего интереса к сети. . Я имею в виду, что для меня это было не чем иным, как революцией. Я имею в виду, я всегда любил типографику, когда изучал ее в школе, но мы ничего не могли сделать с ней в Интернете в течение 15 лет. Это было довольно удивительно.

Дрю: Должны быть дизайнеры, работающие в сети сейчас, у которых есть веб-шрифты в течение 10 с лишним лет. Сейчас в Интернете работают дизайнеры, которые никогда не проектировали сайт без возможности выбора из огромного количества шрифтов.

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

Дрю: К тому времени, когда мы получили веб-шрифты, это был огромный сдвиг в том, как мы начали использовать типографику в Интернете, потому что мы действительно могли начать использовать типографику в Интернете. Конечно, были вещи, которые мы могли делать с веб-безопасными шрифтами, но мы были довольно ограничены очень узкой палитрой. Но потенциально теперь есть еще один большой сдвиг, почти столь же значительный, возможно, с вариативными шрифтами. Я имею в виду, что такое вариативные шрифты? Что они делают для нас? С чего начать?

Джейсон: Я всегда стараюсь начать с того, чтобы дать людям точку отсчета. Поэтому, когда мы думаем об использовании шрифтов в Интернете, мы должны помнить, что в настоящее время с «традиционными» шрифтами каждый шрифт имеет индивидуальную ширину, толщину, наклон, вариант этого шрифта. Для каждого, который мы хотим использовать в Интернете, мы должны загрузить файл. Для типичного веб-сайта, где вы используете его для основного текста, вы загружаете, как правило, четыре шрифта: обычный, полужирный, курсив и полужирный курсив. Все эти вещи должны быть загружены. Каждый из них представляет собой небольшой фрагмент данных, который необходимо загрузить, обработать и отобразить.

Джейсон: Как правило, то, что мы делали на протяжении многих лет, ограничивали себя использованием очень небольшого количества шрифтов, что на самом деле не является особенно хорошей типографской практикой. В графическом дизайне гораздо чаще используется гораздо более широкий диапазон. Вы можете использовать восемь или десять различных начертаний и вариантов шрифта в данном дизайне. В Интернете мы были очень ограничены из-за производительности. Большая разница в вариативном шрифте заключается в том, что все эти перестановки, эти варианты содержатся в одном файле. Этот формат действительно эффективен, потому что он сохраняет правильную форму этого символа, а затем то, что называется дельтами, где точки вдоль этих кривых будут перемещаться, чтобы сделать его жирным, тонким, широким или узким.

Джейсон: Таким образом, сохраняя только различия, вам не нужно хранить весь план. Это гораздо более эффективный формат. Хотя он не такой маленький, как отдельный файл шрифта, он все же намного меньше, чем все отдельные шрифты, взятые по отдельности. Если вы посмотрите на что-то вроде Plex Sans от IBM, все эти отдельные файлы могут занимать почти мегабайт, где два файла с переменными шрифтами, которые содержат всю ширину и вес в вертикальном направлении в одном файле, а курсив в другом, составляют около 230 КБ. Это для очень, очень полных наборов символов. Большинство людей могли бы использовать подмножество этого и сделать его еще меньше. Обычно я видел эти файлы размером от 50 до 100 КБ для типичного веб-сайта на западном языке. Это не так уж отличается от загрузки… Когда вы загружаете три или четыре отдельных файла шрифтов, вы, вероятно, загружаете больше данных. Это интересная победа в производительности, но она также открывает нам весь спектр шрифтов для использования в Интернете через CSS.

Дрю: Так что это похоже на доставку рецепта, а не еды. Здесь не курсив, а жирный шрифт. Это как: «Вот обычная версия, и чтобы выделить ее курсивом, вы бы сделали это, чтобы сделать жирным, вы бы сделали это». Это уменьшает размер файла, передаваемого по сети.

Джейсон: Да. Ну, в некотором смысле, это дает вам все ингредиенты, а затем вы можете приготовить любой рецепт, какой захотите. Потому что вы действительно можете пойти куда угодно из… Возвращаясь к примеру с Plex, от 100 до 700 веса, где 700 — это типичный полужирный шрифт, 400 — нормальный вес. Но тогда у вас гораздо легче. Таким образом, вы могли бы сделать действительно большие и очень тонкие заголовки строк, кавычки или другие элементы или сделать акцент, а затем иметь возможность модулировать то, что вы хотите, чтобы жирный шрифт был в разных размерах. Есть много разных вещей, которые вы можете сделать для улучшения типографики, лучшего взаимодействия с пользователем, при этом повышая производительность. Это привратник.

Дрю: Значит, между тем, что мы сегодня считаем обычным и смелым, существует почти бесконечное количество корректировок шагов? У вас действительно есть возможность перемещаться по этой оси, чтобы переключаться между ними?

Джейсон: Верно. Меня как человека, изучавшего графический дизайн и довольно внимательно изучавшего полиграфический дизайн в течение многих лет, я считаю очень интересным: представление о том, что такое полужирный шрифт, должно меняться в зависимости от размера отображаемого текста. Таким образом, по умолчанию 400 и 700 для нормального и полужирного шрифта — это то, что по умолчанию используется в Интернете. Но, по правде говоря, единственная причина, по которой вы выделяетесь жирным шрифтом, заключается в том, что вы хотите сделать акцент, хотите, чтобы что-то выделялось. Но чем тяжелее шрифт выходит из маленького размера, тем труднее его читать. Он как бы заполняет небольшие открытые пространства. Вместо того, чтобы использовать 700 для основного текста, когда он установлен примерно на 16 пикселей или что-то еще, что мы там используем, вы можете использовать, может быть, 550, 575, где вы получаете достаточное внимание, но формы букв все еще более открыты. Затем, когда он станет больше, вы можете использовать более тяжелый вес.

Джейсон: Но опять же, на данный момент это вроде как твой выбор. Модулируя это для получения правильного уровня акцента, но при этом сохраняя действительно хорошую разборчивость, мы получаем гораздо больше гибкости. Я действительно надеюсь, что по мере того, как они станут более популярными и более широко используемыми, мы сможем начать учить людей быть немного более тонкими в том, как они используют этот диапазон, и на самом деле станут более выразительными и в то же время более читабельными. .

Дрю: Одна вещь, которую я заметил при внедрении дизайна в качестве внешнего интерфейса и реализации дизайна, который мне дали, заключается в том, что разные комбинации цветового контраста и светлый текст на темном фоне по сравнению с темным текстом на светлом фоне, веса могут выглядеть совершенно по-разному. Так что, по-видимому, это поможет выровнять и улучшить визуальное восприятие и опыт чтения на основе подобных изменений?

Джейсон: Абсолютно. Это одна из вещей, которые я обычно демонстрирую на семинарах и докладах, — добавление поддержки этого медиа-запроса в облегченном режиме. Вы можете перевернуть этот контраст, но тогда вы захотите сделать это в каком-то нюансированном виде. В зависимости от шрифта, шрифт с засечками может выглядеть очень тяжелым или несколько тонким. Иногда вы хотите сделать немного тяжелее или немного светлее, но тогда вам также, как правило, нужно расставить буквы, когда они у вас на темном фоне, иначе буквы образуют как бы кровоточащие друг друга. Есть мелочи, которые вы можете настроить в типографике. Медиа-запрос очень прост. Я имею в виду, это как две строки кода, чтобы добавить это на ваш сайт. Тогда это то, что вы делаете с этим. Это не обязательно просто инвертирование цветов. Иногда вам нужно настроить контрастность, а также настроить сам шрифт для лучшей читаемости.

Дрю: По-видимому, в вариативном шрифте можно менять не только начертание. Есть ли другие способы изменить отображаемый шрифт?

Джейсон: Да. Это полностью зависит от шрифтового дизайнера. Я думаю, что это действительно хорошо, чтобы подчеркнуть, что это не бесплатно для всех в браузере. Браузер может отображать только то, что было включено в шрифте. В конце концов, шрифтовой дизайнер говорит, что вес варьируется от этого до этого. У вас может быть ось ширины. Он станет немного уже или немного шире, но также есть возможность иметь так называемые зарегистрированные оси. Есть ширина, вес, наклон, курсив и оптический размер. Это все основные вещи, которые сопоставляются со свойствами CSS. Наклон допускает угол между одним и другим, поэтому вертикальный, и я действительно видел, как с обратным наклоном, так и с наклоном вперед. Это полностью открыто. Курсив обычно включен или выключен, но не обязательно. На самом деле вы можете… Ну, есть дизайнеры шрифтов, которые экспериментировали с постепенным изменением форм букв, когда вы переходите от обычного к курсиву, и как бы заменяя буквы по ходу дела. Это довольно интересная вещь.

Джейсон: Но есть возможность иметь собственные топоры. Дизайнер шрифтов может определить любые пользовательские оси, которые он хочет изменить. Вы видели те, которые добавляют своего рода капельность гравитационного распространения и всевозможные забавные скручивающиеся формы или расширяющиеся засечки, изменяющие высоту надстрочных и подстрочных элементов. На формах строчных букв, изменяющихся независимо от того, являются ли они засечками или нет. Есть все виды вещей, которые вы можете сделать. Это действительно зависит от воображения шрифтового дизайнера. Я думаю, что мы только царапаем поверхность относительно того, что на самом деле может произойти со всеми этими вещами. Все это доступно через CSS.

Дрю: Ага. Все эти свойства можно настроить с помощью обычного CSS, который вы предоставляете с остальной частью вашего дизайна. Что мы можем сделать в CSS, чтобы вызвать эти изменения? Точно так же, как мы сделали бы с адаптивным макетом, где у нас есть медиа-запросы для запуска этого?

Джейсон: Есть много способов сделать это. Есть небольшое изменение, которое вы должны сделать. Я предполагаю, что мы предоставим кучу ссылок на некоторые вещи, которые помогут людям поиграть с этими вещами. Я имею в виду, я написал кучу. Надеюсь, это поможет людям. Затем на стороне использования ось веса шрифта просто сопоставляется с весом шрифта. Вместо обычного жирного шрифта вы просто указываете число. Вы можете изменить это с помощью медиа-запросов. Вы можете изменить его с помощью JavaScript. Вы можете делать с этим все, что хотите. Я использовал метод под названием CSS Locks, которому я научился у Тима Брауна, чтобы в основном использовать математику. Пользовательские свойства CSS и расчеты для его масштабирования, как только вы нажмете небольшую точку останова до большой точки останова, он как бы плавно масштабирует размер шрифта и высоту строки.

Джейсон: Тогда вы также можете использовать немного JavaScript, чтобы сделать то же самое с их весом, если хотите. Ось веса сопоставляется с весом шрифта, свойством CSS. Ось ширины в шрифте будет отображаться на растяжение шрифта, и это просто выражается в процентах. Я должен отметить, что многие дизайнеры шрифтов не обязательно продумывают, как это выражается, поэтому вы можете увидеть диапазоны веса, которые делают странные вещи, например, от 400 до 650. Вам все равно нужно выразить это в процентах, но это работает. Все хорошо. Вам просто нужно знать, что такое норма, и все шрифты задокументированы. Затем с чем-либо, кроме этих двух, в настоящее время в реализации есть немного неравномерная поддержка наклона и курсива. Многие из этих вещей, которые вам нужно использовать, используют настройки изменения шрифта, а затем вы можете указать несколько вещей одновременно. Это похоже на настройки функции шрифта. Это своего рода синтаксис более низкого уровня, где вы можете указать разделенный запятыми список этой четырехбуквенной оси и значения, следующего, следующего.

Джейсон: Единственное, что люди должны помнить, это то, что когда вы используете настройки изменения шрифта, вы теряете все семантическое понимание этого и теряете запасной вариант. Вес шрифта и его растяжка поддерживаются во всех браузерах. Вы обязательно должны использовать эти атрибуты. Для чего-либо еще вы можете использовать настройки изменения шрифта. Но преимущество использования веса шрифта обычным способом заключается в том, что если переменный шрифт не загружается, браузер все равно может что-то с ним сделать. Принимая во внимание, что если он не понимает вариативные шрифты или не загружается, если все находится в настройках вариантов шрифта, вы теряете всю информацию о стилях. Это всего лишь небольшая заметка о том, что и где поддерживается. Но я также должен сказать, что он поддерживается во всех поставляемых браузерах, с которыми вы, вероятно, столкнетесь в большинстве случаев. I-11 не работает, но вы можете использовать статические веб-шрифты, а затем использовать поддержку рекламы в CSS для перехода на вариативные шрифты. Тогда вы избежите дублирующих загрузок ресурсов, и это работает очень хорошо. У меня это уже есть на нескольких сайтах.

Дрю: Я думаю, как и многие из более современных веб-технологий, которые вы видите, если есть вариативный шрифт, который какое-то время тихо бурлил, и только тогда, когда он, наконец, выплескивается, и мы получаем поддержку в браузерах. и такие люди, как вы, поднимают об этом шум и дают всем знать, что это там. Это может почти ощущаться стандартным дизайнером или разработчиком, который изо дня в день занимается своей работой и не отслеживает все последние загрузки. Может показаться, что оно появилось из ниоткуда. Но я предполагаю, что это уже довольно давно... Я имею в виду, вы упомянули две немного разные реализации, с которыми мы сейчас имеем дело. Есть какой-то старый и новый стандарт реализации?

Джейсон: Ну, на самом деле это не старее и не новее. Они оба очень преднамеренны. Я вернусь к этому через секунду, потому что действительно стоит понять, в чем разница между ними. Но ты прав. Формат был представлен чуть более трех лет назад, это было в сентябре 2016 года. Собственно, первая рабочая реализация в ночной сборке Safari у нас появилась через три недели. Довольно быстро у нас появился работающий браузер. Safari был первым, кто полностью его поддерживает. Я думаю, что это было, когда вышла High Sierra. Я не знаю, это было похоже на Safari 12 или что-то в этом роде.

Джейсон: Но вскоре после этого мы получили поддержку в Firefox, Edge и Chrome. На самом деле у нас была поддержка браузера почти два года. Но там не было тонны шрифтов. Там была своего рода устойчивая эволюция. Поддержка их использования в Интернете на самом деле существует дольше, чем где-либо еще. Я имею в виду, что технически этот формат работает и на настольных ОС. Поэтому, если у вас есть формат TTF, вы можете установить его в настольную ОС на Windows или Mac и использовать его в любом приложении. Вы не всегда можете изменять оси так, как вы хотели бы играть с ними бесконечно, но есть понятие именованных экземпляров, встроенных в этот файл шрифта, которые сопоставляют его с тем, к чему мы привыкли.

Джейсон: В Keynote, например, нет явной поддержки вариативных шрифтов, но формат работает, если есть такие вещи, как в Tech Sense, опять же, сжатые, легкие. У вас будут эти обычные, обычные, обычные полужирные, узкие и т. Д., Все они будут доступны в раскрывающемся меню, как при установке всего семейства. Затем, если вы работаете в Illustrator или Photoshop, или сейчас в InDesign, выпущенном на прошлой неделе, или в Sketch, выпущенном пару недель назад, все они теперь поддерживают вариативные шрифты, так что вы можете получить доступ ко всем различным осям и поиграть с ними на своем компьютере. что душе угодно. Но в браузере у нас было гораздо больше работы. Следуя примеру вашей жены, я какое-то время бил по этому поводу, пытаясь привлечь внимание людей к этому. Затем благодаря работе, проделанной командой Firefox по созданию инструментов разработчика. Благодаря тому, что Джен Симмонс продвигает это вперед, у нас есть невероятные инструменты для работы в браузере, которые помогают нам понять, на что способны шрифты.

Дрю: Вы упомянули дизайнеров шрифтов и возможности шрифтов. Есть много доступных шрифтов?

Джейсон: Ну, многие люди делают это сейчас. Вероятно, лучшее и наиболее полное место для их поиска — это сайт Ника Шермана, v-fonts.com, v-fonts.com. Это просто сайт-каталог. Он быстро становится очень, очень большим. Сейчас постоянно появляются новые вариативные шрифты. Их не так уж много с открытым исходным кодом, но если вы поищете на GitHub вариативные шрифты, то на самом деле найдете там целую кучу проектов. Но Google запустил бета-версию своего нового API, где доступно около дюжины вариативных шрифтов. От них исходит больше. Они только что выпустили Recursive в recursive.design, фантастический новый шрифт от Стивена Никсона. Переменная Plex, одна доступна, с открытым исходным кодом. Тогда есть тонны коммерческих.

Джейсон: Самое классное в этом то, что Monotype выпустила несколько довольно больших альбомов. Но многие небольшие литейные заводы и отдельные дизайнеры как бы лидируют в экспериментах с этим форматом. Я думаю, что это действительно здорово для дизайна и для Интернета, что мы видим все эти новые дизайны от новых дизайнеров или дизайнеров поменьше, которые как бы открывают новые горизонты. Потому что мне нравится видеть, как они преуспевают в этом, потому что они действительно взяли на себя инициативу по выпуску отличных вещей.

Дрю: Видим ли мы какое-либо обновление существующих шрифтов, чтобы они стали вариативными шрифтами, чтобы семейства были заменены одним вариативным шрифтом? Это вообще происходит?

Джейсон: Это так. Те, что выпущены Monotype, являются обновлениями некоторых действительно классических шрифтов. Я помог им запустить FF Meta, разработав демо для него в прошлом году. У них есть это. Univers, Frutiger, Avenir, я думаю, это те, что они выпустили до сих пор, эти четыре. Это действительно классические фирменные шрифты. Они работают над большим. Я знаю, что у них есть по крайней мере еще полдюжины или около того, которые находятся на разных стадиях производства. Я знаю, что у Dalton Maag, который делает массу пользовательских шрифтов для крупных корпораций, есть несколько действительно хороших вариативных шрифтов. Я немного поработал с TypeTogether. У них также есть несколько действительно отличных шрифтов. Я знаю тот…

Джейсон: На ​​некоторых конференциях, где я говорил об этих вещах, я показывал, что у Adidas тоже есть свои собственные, которые они используют для всей работы над своим брендом в печати уже почти два года. Что действительно, действительно замечательно. Но также Марк Симонсон работает над вариативной версией Proxima Nova. Это большое дело. Это был один из самых продаваемых веб-шрифтов всех времен. Это происходит. Это происходит по крупицам, то вверх, то вниз по шкале. Но даже такая простая вещь, как подписка на David Jonathan Ross, Font of the Month Club, позволит вам получать вариативный шрифт почти каждый месяц. Я имею в виду, он был действительно невероятен в том, что он выпускал. Это около 72 долларов в год или что-то в этом роде. Он выпускал всевозможные действительно красивые вещи.

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

Джейсон: Да, абсолютно. Вот некоторые из вопросов, которые я получаю довольно регулярно. Недавно я просматривал довольно большой веб-сайт спортивных трансляций, и команда разработчиков задала мне тот же вопрос. Я посмотрел, и действительно, для двух шрифтов, которые они используют, есть доступные вариативные шрифты. Небольшое исследование показало, что мы можем заменить четыре экземпляра одного шрифта и три других двумя файлами с переменными шрифтами и убрать более 70% размера файла за пять запросов. Я имею в виду, это был бы вопрос победы с точки зрения производительности. Для действительно крупного сайта, когда вы смотрите на удаление почти 300 КБ данных, загружаемых миллионами пользователей, это на самом деле означает реальную экономию долларов и затраты на пропускную способность. Даже с этой чисто практической точки зрения, не переписывая какой-либо CSS, просто заменяя эти шрифты, это уже будет для них значительным выигрышем в производительности, во времени рендеринга страницы, а затем в фактических затратах на пропускную способность для них.

Дрю: С практической точки зрения, так ли это просто, как кажется, просто поменять одно на другое?

Джейсон: Может быть. Я думаю, что прекрасным примером этого является то, что Google как бы небрежно проговорился на ATypI в сентябре, что они начали делать это с Освальдом по 150 миллионов раз в день. Они сделали его версию с переменным шрифтом и просто начали просматривать его на веб-сайтах, которые использовали достаточное количество экземпляров, где это могло принести значительную пользу. Они никому не сказали. Они не сказали владельцам сайта. Никто ничего не должен был делать. Потому что у него было правильное отображение оси веса, поэтому значения по умолчанию просто работали. 150 миллионов раз в день — это очень много. Это начинает давать им лучшее представление о том, как бы выглядел этот ландшафт для них, если бы они могли начать переключаться между пятью основными веб-шрифтами, которые они обслуживают? Я предполагаю, что Open Sans, вероятно, один из них. Я знаю, что Лато, вероятно, там, Робото.

Джейсон: Итак, если вы посмотрите на них и посмотрите, как могут выглядеть их оптимизированные версии, то вы увидите, что есть несколько очень четких причин, по которым Google может заинтересоваться этим. Затем, если вы посмотрите с другой стороны, просто пространство для дизайна и насколько более верным голосу бренда может быть компания, если они будут работать со всем набором собственных фирменных шрифтов, а не менять местами другие или быть более ограничены в своей палитре. Так что есть действительно интересные вещи для изучения и изучения на обоих концах этого спектра.

Дрю: Звучит как захватывающий дивный новый мир типографики и возможностей для более чувствительного и потенциально более творческого шрифта в Интернете, чем мы могли делать раньше.

Джейсон: Ну, я, конечно, на это надеюсь. Я думаю, что одним из самых больших препятствий для принятия шрифтов в Интернете на всех этапах была производительность. Так что же происходит? Сколько времени занимает загрузка? Что это значит для времени рендеринга на странице? У нас есть такие проблемы, как вспышка невидимого текста или нестилизованный текст. Борьба со всеми этими вещами, на самом деле, возвращает нас к тому, сколько времени нужно, чтобы добраться туда? Как на это реагирует браузер? Есть много вещей, которые мы можем сделать, чтобы смягчить некоторые из этих проблем. Но на самом деле все сводится к тому, что если у нас будет лучший шрифт и лучший способ его обслуживания, то все эти проблемы станут гораздо менее важными. Так что, имея это на месте, мы становимся более выразительными. Мы действительно можем попытаться продвинуться дальше в области дизайна и попытаться быть немного более креативными.

Дрю: Потому что в последнее время вы как бы выражали ощущение, что, возможно, сеть попала в ловушку разработки шаблона статьи для каждого сайта, возможно, с некоторыми вариациями для нескольких разных типов контента. Но все как бы дрейфуют к этому стилю medium.com с одной колонкой текста, очень удобочитаемой для моих глаз. Красиво набрано. Это так плохо?

Джейсон: Я не думаю, что это плохо. Я просто думаю, что это станет скучным. Я имею в виду, когда вышел Medium, это было довольно ново. Я имею в виду, я думаю, что одна колонка… Как вы сказали, это была довольно хорошо набранная копия. Он имеет хороший район. Было не многолюдно. Там не было тесноты, боковых панелей и всего прочего. Всегда будут вопросы о бизнес-модели и о том, что ее поддержит. Вот почему действительно красивый редизайн, я думаю, был Seattle Times, который Майк Монтейро для Mule Design сделал несколько лет назад. Абсолютно великолепен, пока не был запущен. Затем у них были эти массивные баннеры по обеим сторонам колонны, и это просто убрало все это пустое пространство. Это был настоящий позор.

Джейсон: Я понимаю, что компании должны зарабатывать деньги. У этого есть разветвления. Так что было бы замечательно, если бы это был один из вариантов. Чтобы иметь этот хороший чистый макет. Но он не должен быть единственным. У нас есть все эти возможности в CSS, которые позволяют нам делать действительно интересные вещи с полями и макетом. Я имею в виду, дело даже не только в том, что у нас теперь есть сетка. Но тот факт, что мы можем выполнять вычисления в браузере в CSS, позволяет нам делать гораздо больше интересных вещей. Вы добавляете к этому способность быть намного более выразительным с помощью шрифта, тогда мы могли бы начать смотреть на то, что они делают в журналах. У Vanity Fair нет одного шаблона статьи. Их шесть, или семь, или восемь. Если вы действительно посмотрите на то, как они излагают эти вещи, вы увидите огромное количество вариаций, но они играют внутри системы.

Джейсон: Итак, когда мы создаем дизайн-систему для нашего веб-сайта, вместо того, чтобы останавливаться только на одном макете, у нас есть относительно простой способ встроить некоторые переключатели в наши системы управления контентом. Большинство из них поддерживают достаточную гибкость. Нет причин, по которым мы не могли бы дать людям выбор. Я хочу использовать макет один, два, три, четыре, пять, шесть. Это приведет к разным полям, разным смещениям. Возможно введение возможности создавать некоторые столбцы. Есть много разных вещей, которые мы могли бы сделать, чтобы сделать сеть намного интереснее. Я думаю, что этот тип может сыграть очень большую роль в этом.

Дрю: Является ли шрифт нашим спасителем, когда дело доходит до придания вебу большей индивидуальности?

Джейсон: Ну, я думаю, что это возможно. Я думаю, что у нас была долгая эволюция в Интернете в сторону лучшего удобства использования. Но я думаю, что одна из жертв, когда все, о чем мы когда-либо беспокоимся, это этот утилитарный, полезный ли это подход? Это имеет тенденцию выбивать личность. Затем, когда каждый веб-сайт… Опять же, у нас появились веб-шрифты, и это создало новый уровень выразительности, которого у нас не было раньше. И вдруг мы смогли… Дисплеи стали лучше. Таким образом, засечки вернулись в микс. Мы могли бы использовать их снова в Интернете. Эти вещи добавили немного жизни. Затем мы как бы оптимизировали, чтобы все использовали один или два шрифта без засечек. Это Open Sans, или Roboto, или Oswald, или что-то еще. Мы как бы вернулись к тому же, что и куча действительно хороших, действительно читаемых шрифтов. Мы так и не научили нынешнее поколение UX-дизайнеров, которые часто занимаются типографикой. Что-нибудь о том, насколько выразительным он может быть, насколько он может изменить настроение и тон.

Джейсон: Итак, у нас есть огромное количество людей, которые диктуют направление дизайна вещей в Интернете, у которых есть идеи о шрифтах, которые, возможно, не так хорошо информированы, как те, кто изучал графический дизайн и эти понятия удобочитаемости. Нам нужно объединить эти вещи. Это не то и не другое. Это и. Это должно быть.

Дрю: Особенно когда мы говорим о личности, о тоне и настроении. С точки зрения бизнеса или с точки зрения того, о чем мы говорим, это аспекты бренда. Таким образом, делая все одинаковым, теряем ли мы способность донести бренд до клиентов?

Джейсон: Абсолютно. Не для того, чтобы погружаться в политику, но я думаю, что в целом… Одна из основных проблем, с которой мы, безусловно, столкнулись в США, и я уверен, что она не сильно отличается от того, что произошло в Великобритании за последние несколько лет. Когда все новости потребляются через единую платформу, и все выглядит одинаково, голоса не различаются. Таким образом, примерно 75% взрослых в США говорят, что они получают значительную часть своих новостей из Facebook. Я имею в виду, давайте отложим в сторону, насколько это вообще ужасно. Но учитывая, что все представлено одинаково, нет никакой разницы между статьей из The Guardian, New York Times, The Wall Street Journal, The Washington Post и правыми новостями Джо. Все представлено точно так же.

Джейсон: Когда мы видим этот логотип, этот стиль шрифта, Guardian так характерен. Wall Street Journal очень характерен. Мы мгновенно узнаем, когда видим это, даже просто заголовок. Мы знаем, откуда это взялось. Затем возникает автоматическая ассоциация с этим брендом и подлинностью. Когда вы уберете все это, у вас останется: «Хорошо, я собираюсь оценить это в заголовке. Тогда это на, кто написал лучший заголовок? Это не так много, чтобы продолжать. Так что я думаю, что мы потеряли огромную сумму. Если вы посмотрите на то, что пытается сделать Apple News Plus, то увидите, что некоторые компании предпринимают некоторые усилия, чтобы попытаться снова ввести это. Бланделл проделал действительно интересную работу в Европе. Они были запущены в США, но я не уверен, что они когда-либо будут настолько успешными. That was a platform that would allow you to subscribe and see content from all these different top level newspapers and publications. It would always be in their own design. So that was really kind of an interesting approach there. It was always preserving the brand voice, that authenticity and that authority that would go along with that news. It really helped provide some cues for you as a reader to kind of evaluate what you're reading.

Jason: I think that's important. I think it's not something to be taken lightly.

Drew: Thinking back to RSS readers in days gone past, the same sort of problems we were seeing then where everyone's content was being just distributed via RSS and appearing in a reader in identical format, identical layout. I think you do lose something of the personality and the voice.

Jason: Yeah. Это верно. I don't think that's an entirely solvable problem. I think if you can imagine an RSS reader with a different typeface for every headline, it would be crazy. There's a reason why that that doesn't work that well, but there has to be some middle ground. Type does play a role in that. Then certainly, once you get back to the website, there is that sort of instant recognizability that will help that experience stand apart from seeing it anywhere else.

Drew: So say I'm a designer. I'm working in a small agency. I'm turning out designs for all sorts of different clients. I look at my work. I think, “This is all good. This is readable, but it's got no personality in it.” Where do I start to actually put back some interest, some excitement, and not just lean on this sort of uniform UX driven layout that I've sort of conditioned myself to use?

Jason: Well, I think the thing to do is if you've never studied typography, you haven't necessarily kind of trained your eyes to see what the differences are in one typeface to another. Even when you have studied graphic design, you have to remind yourself of these things all the time. So I think oftentimes that I'll recommend, and actually, I wrote about this a few weeks ago because I kept getting asked like, “Where do you start?” I made a list of books that I think are really helpful. So something like Ellen Lupton's book, Thinking with Type is a fantastic introduction to looking at type and seeing it. Erik Spiekermann's book, Stop Stealing Sheep is a great one although I think at the moment, it's out of print. I think that he might be working on another edition but that's so… If you find that one, that's a good one as well.

Jason: Those will help introduce you to the terminology and understanding what the differences are between the different styles of text. Then once you have that basic introduction, it gives you a better frame of reference when you look at other websites. Getting a sense of like, why does this one feel warmer than that one? What are the combinations of type? What are the characteristics? As a web developer often does or web designer often does, you inspect an element, see what the typeface is that's being used there, and that can start to help build a palette of ones that you become familiar with. Very often, designers do hone in on a few that they get to know well and they tend to use them on a lot of different projects. That's not necessarily a bad thing. It's certainly better now if you're working with a variable font and you can be that much more varied.

Jason: So you can decide that on this website, this is what I want to call normal. This is the width that I want to use and the other aspects of it. So even using the same typeface across websites because you have access to the full range of characteristics, it could still look quite different.

Drew: So I think there's a lot of reading to be done. I'm sure we'll add some links to the show notes of all the excellent articles you've written up and some references to these books and what have you. Because I think there's so much to learn. I think we've always got to be learning with these things. The learning never ends.

Jason: It's true. It is true. That is something that I've enjoyed immensely when I started writing this newsletter. Every week when I'm writing it, I'm reading more of the specs. I'm reading more of what other people have discovered and written. There's tremendously knowledgeable folks out there. Rich Rutter, for instance, from Clearleft, wrote a fantastic book called Web Typography. He was one of the founders of Font Deck, which was one of the very first services to launch. He's always been kind of the most scholarly of authors about this stuff. I mean, he's really tremendously thoughtful in the way he puts those things together. But there's a bunch of people doing really interesting stuff. That has kind of forced me to kind of keep up with what other people are doing all the time, which is really fantastic.

Drew: Is there anything in particular that you've been learning lately?

Jason: The stuff that I've been learning the most is actually the corners of the specs. I think it's something that… I mean, again, probably the biggest influence for me on that is probably Rachel [Andrew]. That she's always talking about like, “Well, if you actually read what's written here, there's actually really good stuff to know.” So in reading exactly what the specs are, there's a tremendous amount of great typographic control that is available to us. Then layering into that different things like mix blend modes and CSS and learning more about different size units and how they interact together and learning how to use and where you can use CSS custom properties. I keep reading little bits more and more and then kind of compare that to what the browsers are doing. It really has been a tremendous experience for me in what I've been learning every week. Even having been doing this stuff for 25 years, there's still like a new gem every time I dig into one of these things.

Drew: That's fantastic. Спасибо. So if you dear listener would like to hear more from Jason or perhaps hire him to work with you on your web typographic challenges, you can follow him on Twitter where he's @jpamental, or find his website at rwt.io where you can also find the web typography newsletter to sign up to. So thanks for talking to us today, Jason. Do you have any parting words?

Jason: Yeah, experiment. I mean, there's lots of open source stuff to play with. I think once people get this in their hands and get familiar with it, that I think they'll start to see more and more how much fun they can have with this stuff and how much more expressive they can be. I think I was talking to the design director at The Wall Street Journal actually on Friday. I was then talking to their design team. We were talking about it's great that you have a design system that standardizes things, but it's then like any good design where you break that rule. That's where the exciting things really happen. So we've gotten this necessary evolution of like getting really good at the system. Now we've got to break it some. That's when we can get excited again. Break the rules. That's my best advice, I think.