fontstay.devЗаметки · №7 · Типографика и скорость
Почему страница прыгает при загрузке шрифта
Веб-шрифт приходит чуть позже, чем текст впервые рисуется. До этого браузер показывает запасной шрифт, а когда настоящий вступает в силу, каждая строка может поменять ширину, а каждый блок — высоту.
Ширина символов
У каждой гарнитуры буквы шире или уже, поэтому одно и то же предложение переносится на другом слове.
Высота строки
Подъём и спуск самого шрифта и правило line-height решают, сколько места занимает строка.
Вертикальные метрики
Подъём, спуск и межстрочный зазор записаны в файле шрифта; замена с другими числами сдвигает базовую линию.
Письменности и замены
Символы, которых нет в веб-шрифте, берутся из другой семьи, и одна строка может стать выше соседних.
Что сдвигается и почему
Возьмём обычный абзац. В запасном шрифте он занимает четыре строки, в веб-шрифте те же слова требуют пяти. Всё ниже сползает на строку — это сдвиг вёрстки.
Ширина — лишь половина дела. У каждого шрифта свои ascent, descent и line gap. При line-height: normal браузер строит из них строку, поэтому другой шрифт даёт другую высоту при том же размере.
Встроенные элементы добавляют своё: жирный фрагмент, курсивная фраза, верхний индекс2 или символ вроде ™ могут прийти из другой гарнитуры и растянуть строку.
Заголовки страдают заметнее всего. Крупный заголовок, прыгнувший на пару пикселей, тянет за собой всю статью, поэтому для заголовков и основного текста нужны отдельные запасные шрифты.
Текст ещё и перебалансируется. Современные text-wrap: balance и text-wrap: pretty меняют места переносов — проверяйте с ними и без них.
Лекарство скучное, но работает: масштабируйте запасной шрифт через size-adjust и задайте ему метрики веб-шрифта через ascent-override, descent-override и line-gap-override.
Лучший сдвиг вёрстки — тот, которого никто не заметил.
Чек-лист перед релизом
- Подбирайте запасной шрифт под каждую систему, а не один на всех.
- Сравнивайте обычное, жирное и курсивное начертания отдельно.
- Проверяйте длинные и короткие строки, а также с включённым
text-wrap. - Смотрите письменности, которых вы не читаете: арабскую, японскую, кириллицу.
Откуда у строки берётся высота
| Причина | Следствие |
|---|---|
| Размер шрифта | Масштабирует все метрики |
| line-height | Перекрывает метрики самого шрифта |
| Подъём и спуск | Задают область содержимого строки |
| Символы из запасного шрифта | Могут поднять одну строку |
| Верхний и нижний индексы | Сдвигают строку вверх или вниз |
Специальные символы
& © ® ™ § ¶ † ‡ • … – — « » „ “ ‘ ’ № € £ ¥ ¢ % ‰ ° ± × ÷ ≈ ≠ ≤ ≥ ∞ √ π → ← ↑ ↓ ½ ¼ ¾ ¹ ² ³ ℃ ё Ё
@font-face {
font-family: "Brand Fallback";
src: local("Arial");
size-adjust: 104.5%;
ascent-override: 92%;
descent-override: 24%;
}
body {
font-family: "Brand", "Brand Fallback", sans-serif;
}