Типографика

Контракт

Кегль берётся из шкалы, начертание — из трёх. Заголовок не имеет права кричать громче данных, которые он подписывает.

.my-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-ui);
}

Доступность

Шкала

Семь ступеней, не больше. Каждая лишняя — это решение, которое кто-то примет неправильно.

Ступень существует, только если её видно. В рабочей части шкалы отношения держатся в полосе 1.12–1.143. Это порог: ниже него глаз перестаёт различать кегли, и соседние ступени начинают работать как одна — иерархию приходится целиком перекладывать на цвет и вес, а их разрядов мало. Дисплейные ступени расходятся шире, 1.222 и 1.273, и тоже намеренно: заголовок отличается от заголовка на бо́льшую долю, чем подпись от подписи.

Шкала считается снизу вверх, от пола в 11px, а не от корня документа. То, что --text-md совпал с 16px, — удобное совпадение, а не привязка.

Начертаний по-прежнему два, и 700 запрещён. Значит, крупную иерархию несёт только размер — тем более он обязан быть различимым.

Кегль — единственный ярус в rem. Интерфейс обязан уважать увеличенный размер шрифта по умолчанию в браузере: в админке сидят весь день, и это первая настройка, которую делает человек с ослабленным зрением. Масштабирование страницы работает и с px, но настройку «размер шрифта по умолчанию» px игнорирует молча.

Всё остальное остаётся в px, потому что это геометрия, а не текст: хайрлайн, точка состояния, жёлоб, радиус. Следствие, которое нельзя игнорировать: если текст растёт, а высоты контролов заданы в px, текст однажды упрётся в потолок — поэтому высоты применяются как min-block-size, а не block-size.

Заголовки

Умолчания элементов, класса не требуют. Все несут --weight-medium, --leading-tight, --tracking-tight и text-wrap: balance.

<div class="inst-prose">
  <h2>Заголовок раздела</h2>
  <p>Внутри <code>.inst-prose</code> у заголовка свой ритм: воздуха сверху
  вдвое больше, чем снизу. Заголовок принадлежит тому, что под ним, и
  разделять текст поровну ему нельзя.</p>
  <h3>Подзаголовок</h3>
  <p>Без этого правила заголовок висит посередине между своим абзацем и
  чужим — и не отделяет ни одного от другого.</p>
</div>

ЗАГОЛОВКИ КАПСОМ и Title Case запрещены: только обычное предложение.

Варианты

Два. 700 в шрифте есть и всё равно запрещён: на макете из хайрлайнов и воздуха он читается как крик.

Медиум — 600, а не 500, и это признание факта. У Segoe UI настоящего 500 нет, и системный стек снапает его к Semibold: замер по пикселям показал, что 500 и 600 совпадают строка в строку. На macOS SF Pro даёт настоящий Medium — то есть рисунок различался на двух платформах, и выбирал это шрифт, а не автор.

<div class="inst-stack inst-stack--tight">
  <span>400 — обычный текст, ячейки, подписи полей</span>
  <span style="font-weight:var(--weight-medium)">600 — заголовок, кнопка, шапка таблицы</span>
  <span style="font-weight:700">700 — в библиотеке запрещено: на плоском макете читается как крик</span>
</div>

Интерлиньяж

Трекинг

Оптическая коррекция, не стиль: крупный кегль по умолчанию выглядит разреженным.

Мелкий кегль не разрежается никогда: разрядка на 11px — это не акцент, а потеря слова.

Семейства

Шрифт системный: веб-шрифт добавил бы сетевой запрос и вспышку подмены ради эффекта, который в плоском инструментальном интерфейсе не читается.

Моноширинный приходит вместе с оптической поправкой 0.925em — моно воспринимается крупнее санса на том же кегле. Поправка объявлена один раз на code, kbd, samp, pre и .inst-u-mono: когда у утилиты было своё правило, <code class="inst-u-mono"> получал 0.925 × 0.925 и уезжал под пол в 11px. Внутри блока кода поправка уже применена контейнером и второй раз не накладывается.

Табличные цифры

font-variant-numeric: tabular-nums стоит на body, то есть по умолчанию на всём. В инструментальном интерфейсе почти любое число либо стоит в колонке, либо обновляется на месте, и пропорциональные цифры дёргают оба случая.

Обратного переключателя нет: табличные и так везде.

Композиции

Опт-ин, а не умолчание. Базой должен быть частый случай, иначе каждый компонент вынужден переобъявлять размер, а любой div приложения без класса наследует не тот кегль.

<div class="inst-prose">
  <p>Тело ответа агента.</p>
  <p>Второй абзац отступает от первого сам.</p>
</div>

Отдельного компонента для стриминга нет и не нужно: тело — это .inst-prose, а признак того, что текст ещё поступает, — .inst-caret.

Клавиши

Инструмент живёт на клавиатуре, поэтому клавиша — элемент интерфейса, а не безымянный моноширинный кусок. <kbd> оформлен в базе и класса не требует.

<span><kbd>Ctrl</kbd> <kbd>K</kbd> — поиск по прогонам</span>
<span><kbd>Esc</kbd> — остановить прогон</span>

Правила

Что брать, а что нет

API

Связанное

Цвет Плотность Блок кода Метрика Строка лога