Створення системних шрифтів Booking.com — вивчено урок

17

Від автора: надихнувшись останньою роботою 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 був замінений на новий системний стек шрифтів:

-apple-system, BlinkMacSystemFont, «Segoe UI», Roboto, Helvetica, Arial, sans-serif

Виглядає складно, але насправді ми лише просимо Safari і Сһгому на macOS рендери San Francisco. Windows буде використовувати Segoe UI. Ос chrome і Android – Roboto. І тільки після цього ми повертаємося до нашого стандартного набору шрифтів (щоб переконатися, що ми надали адекватне напрямок для більш старих і менш популярних ОС).

Виправлення помилок

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

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

Наше оголошення було таким:

body {
font: 16px/1.2 -apple-system, BlinkMacSystemFont, «Segoe UI», Roboto, Helvetica, Arial, sans-serif;
}

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

body {
font: 16px/1.2 «-apple-system», BlinkMacSystemFont, «Segoe UI», Roboto, Helvetica, Arial, sans-serif;
}

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

Якщо подивитися на стек шрифтів уважніше, можна помітити, що перші два шрифти – це взаємовиключні способи оголошення одного і того ж шрифту. В обох випадках повертається San Francisco на macOS в залежності від браузера. Тому ми могли б безпечно перенести ці два шрифту без зміни шрифтів під Safari і Chrome. Наша наступна спроба була такою:

body {
font: 16px/1.2 BlinkMacSystemFont, -apple-system, «Segoe UI», Roboto, Helvetica, Arial, sans-serif;
}

Запрацювало. IE і Edge рендерили Segoe UI, Chrome/Safari на macOS рендерили San Francisco.

Також ми з’ясували, що довге оголошення сімейства шрифтів можна безпечно починати з -apple-system, як ми робили раніше:

body {
font-family: -apple-system, BlinkMacSystemFont, «Segoe UI», Roboto, Helvetica, Arial, sans-serif;
}

Здається, відбувається наступне – IE доходить до -apple-system і думає, що вся рядок далі це властивість CSS з вендорным префіксом і тому повністю її ігнорує. Браузер працює так, як якщо б був відсутній шрифт рівня body, і він повертався до стандартного шрифту — Times New Roman. Чому це не працює всередині оголошення сімейства шрифтів, не знаю.

Повернемося до чудової статті на Medium, там Marcin Wichary говорить, що він поставив на початок стека шрифтів system, щоб уникнути ризику, описаного вище, але потім він випадково воскресив шрифт з 1980-х. Medium оголошує шрифт через font-family, тому вони акуратно переступили виявлену помилку. На жаль, у нас цього не вийшло.

Висновок

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

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

По мірі розвитку специфікації системних шрифтів ми повернемося до нашої реалізації і будемо використовувати самі останні практики в цій галузі. Враховуючи наш успіх поліпшення читаності сайту, ми будемо стежити за подіями в цій області, наприклад, за Google Noto.