Типографіка
Кожна вісь - драбина з лічильником читань і відношенням між сусідами. Значення прочитані з живого :root.
Три гарнітури і три різні роботи. --font-body читається один раз - у base.css на body; далі його успадковує все, і це правильно: гарнітуру тексту не оголошують сорок разів.
rem - етап 10, крок 2Ця сторінка задеплоєна з етапу 08 і показувала шкалу в пікселях. Десять щаблів переїхали в rem значення в значення: при типовому корені 16px кожен дає те саме число, що й до цього, тож жоден екран не зрушив на піксель. Купує це читача, який поставив у браузері шрифт 20px - у px шкала його ігнорувала. Таблиця нижче читає живий :root, тож вона вже показує нові значення.
Сама шкала лишилась сталою, і це навмисно. Вона загальна: --fs-30 носить і H1 сторінки, і живу ціну в геро-плитці, і гліф порожнього стану. Обгорнути щабель у clamp() означало б змусити іконку дихати разом із в'юпортом. Плинний розмір це окремий токен --fs-display з трьома поіменними читачами - .lh1, .acc-h1, .co-h1 - і font-size на точці не перемикається ніколи.
Плинна шкала, обидві точки і міра рядка - на сторінці «Адаптив»
Драбина знизу вгору. Праворуч - скільки разів систему цей крок читає, ліворуч від нього - відношення до сходинки нижче. Саме відношення, а не кількість кроків, каже, чи це шкала: під 1.08 два розміри читаються як один, і рядок підсвічений.
Чотири ваги. 700 і 800 обидві навантажені - це не дрейф: у парі Oswald + Inter вони роблять різну роботу, заголовок і акцент у рядку.
Чотири кроки, названі роботою. Система їх не мала взагалі: компоненти несли 117 літералів у 16 значеннях. Розріджувати літери - ніколи не вільне число: воно компенсує розмір і капс, а таких випадків тут рівно чотири.
Шість. 1.5 і 1.55 виглядають дублікатом, і я їх був злив - а потім відкотив. Один з дванадцяти читачів 1.55 це саме body, тому злиття тихо перевело весь продукт на інший ритм читання: 31 193 обчислені міжрядкові зрушили на тексті, який ніхто не просив чіпати. Базовий міжрядковий - це рішення про читання, а рішення не ухвалюють як побічний ефект прибирання. Запис лишається видимим, інакше та сама «оптимізація» повернеться наступного разу.
Шкала каже, які розміри є. Це - де вони стоять. Значення не вигадані: браузер обійшов 15 екранів і зняв обчислений стиль з кожної ролі, а колонка «варіантів» каже, скільки різних наборів під цією роллю знайшлося. Роль, у якої варіантів більше за один, ще не роль - це два рішення під одним іменем.
| Роль | Зразок | Гарнітура | Кегль | Вага | Рядок | Трекінг | Варіантів |
|---|
Найгірше тут посилання в рядку: 274 входження і 5 різних наборів. Це та сама знахідка, що на сторінці перепису посилань - найчисленніший компонент продукту і найменш вирішений.
| Вісь | Було | Стало | Чому |
|---|---|---|---|
| Кегль | 26 | 9 | Шість були півпіксельні - їх набрала рука, а не дизайн. Решта стояла так близько, що сторінка позначала 12 пар як ближчі за 1.08. Тепер парних чисел дев'ять і кожна пара тримає щонайменше 1.10: шкала проходить перевірку, яку сама ж і друкує. Нічия йде вгору - для тексту більший кегль легше читати. |
| Міжрядковий | 6 + 15 літералів | 3 | 1 · 1.3 · 1.6. Міжрядкові, що стоять за 0.05 один від одного, це не два рішення. Базовий ритм пішов з 1.55 на 1.6 - цього разу навмисно і вголос. |
| Трекінг | 0 токенів, 117 літералів | 4 | Системи не було взагалі. Чотири кроки, названі роботою: заголовок, великий рядок, капсова мітка, дрібний надрядок. |
| Вага | 4 | 4 | Не чіпали: 700 і 800 роблять різну роботу в парі Oswald + Inter. |
Понад 34px сходинок немає навмисно: 38, 44, 50 і 60 стоять по одному разу на маркетинговому блоці, а розмір, ужитий один раз, - це вимір, а не щабель.