Создание системных шрифтов на Booking.com  — урок выучен

От автора: вдохновившись последней работой GitHub и Medium, которые улучшили свои шрифты, и тем самым сделали чтение на своих сайтах намного лучше, мы в Booking.com задумались о том, чтобы создать системные шрифты на долгую перспективу.

Очень долгое время у нас стоял самый стандартный стек шрифтов Helvetica, Arial, Sans-serif. Мы понимали, что это полностью безопасный, безотказный стек, хотя и пустой, который будет представлять наш сайт.

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

Системные шрифты

Затем, в 2015 появились системные шрифты. Так их назвал в самом начале Marcin Wichary с сайта Medium и Craig Hockenberry. Они дали нам соблазнительную возможность попробовать что-то новое – набор шрифтов, которые вшиты в их операционных системы, которые по-настоящему спроектированы под современные сайты и экраны с большим разрешением. Работа Apple, Google и Microsoft над San Francisco, Roboto и Segoe UI потрясает. Мы понимали, что читаемость этих шрифтов может быть полезна нашим клиентам, особенно потому, что мы часто рендерим шрифты в маленьких размерах, а новый шрифты могут предложить существенные улучшения.

В стиле Booking.com мы протестировали эти изменения, и наши гипотезы подтвердились. Поведенческие сигналы в нашем большом исследовании показали улучшенную читаемость, и общий эффект от эксперимента позволил нам развернуть эти изменения в шрифтах для всех покупателей. Новые системные шрифты позволили нам использовать шрифты, спроектированные под экран на нашем сайте, где мы заставляем их рендерить крайне разнообразные типы контента на многих языках. Собрав отзывы по всему миру, мы также поняли, что с нашими предложениями согласны множество людей, что шрифты более читаемы, а пользователи чувствуют себя как дома на своих ОС. Обновление означало, что мы можем использовать одни шрифты на сайте и в приложениях (на Android и iOS), так как там уже использовались стандартные системные шрифты.

Наш старый стек Helvetica, Arial, sans-serif был заменен на новый системный стек шрифтов:

Выглядит сложно, но на деле мы всего лишь просим Safari и Chromу на macOS рендерить San Francisco. Windows будет использовать Segoe UI. ChromeOS и Android – Roboto. И только после этого мы возвращаемся к нашему стандартному набору шрифтов (чтобы убедиться, что мы предоставили адекватное направление для более старых и менее популярных ОС).

Устранение ошибок

Всего через пару часов после запуска и включения нового блестящего стека шрифтов прилетел странный баг со скриншотом, на котором весь текст на Booking.com был отрендерен шрифтом Times New Roman. Да, вы правы – его же нет в стеке шрифтов! Более глубокое тестирование показало, что баг живет во всех версиях IE и Edge.

Баг был критичен, поэтому мы начали искать фикс сразу же. Проблему решило удаление стека шрифтов, что смело сузило поиск бага до чего-то в IE, что было вызвано нашим новым объявлением шрифтов.

Наше объявление было таким:

Сперва мы подумали попробовать обернуть необычный шрифт -apple-system в кавычки, предполагая, что знак минус в названии шрифта заставлял IE падать на всем объявлении и откатываться до стандартного шрифта браузера Serif.

Проблема в IE решилась, однако тесты этого стека в Safari показали, что теперь уже macOS игнорирует часть объявления и возвращается к Helvetica.

Если посмотреть на стек шрифтов внимательнее, можно заметить, что первые два шрифта – это взаимоисключающие способы объявления одного и того же шрифта. В обоих случаях возвращается San Francisco на macOS в зависимости от браузера. Поэтому мы могли бы безопасно перенести эти два шрифта без изменения шрифтов под Safari и Chrome. Наша следующая попытка была такой:

Заработало. IE и Edge рендерили Segoe UI, Chrome/Safari на macOS рендерили San Francisco.

Также мы выяснили, что длинное объявление семейства шрифтов можно безопасно начинать с -apple-system, как мы делали раньше:

Кажется, происходит следующее – IE доходит до -apple-system и думает, что вся строка далее это CSS свойство с вендорным префиксом и поэтому полностью ее игнорирует. Браузер работает так, как если бы отсутствовал шрифт уровня body, и он возвращался к стандартному шрифту — Times New Roman. Почему это не работает внутри объявления семейства шрифтов, не знаю.

Вернемся к замечательной статье на Medium, там Marcin Wichary говорит, что он поставил в начало стека шрифтов system, чтобы избежать риска, описанного выше, но затем он случайно воскресил шрифт из 1980-х. Medium объявляет шрифт через font-family, поэтому они аккуратно перешагнули обнаруженную ошибку. К сожалению, у нас этого не получилось.

Заключение

Урок выучен. Не ставьте -apple-system в начало сокращенного объявления шрифтов и проводите полное тестирование, особенно когда работаете с проприетарными вещами, как объявления системных шрифтов. Если строка похожа на вендорный префикс и пахнет как вендорный префикс, есть вероятность, что хотя бы один браузер распознает ее как вендорный префикс.

После устранения бага мы смогли развернуть системные шрифты на сайте, что дало нам более читаемый и последовательный шрифт. Эксперименты продемонстрировали, что клиентам он нравится.

По мере развития спецификации системных шрифтов мы вернемся к нашей реализации и будем использовать самые последние практики в этой области. Учитывая наш успех в улучшении читаемости сайта, мы будем следить за событиями в этой области, например, за Google Noto.

Автор: Stuart Frisby

Источник: //booking.design/

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

Комментарии Вконтакте: