Типографика

Использование

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

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

Когда использовать

Шкала

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

<div class="inst-stack inst-stack--tight">
  <span style="font-size:var(--text-2xs)">2xs · 11px · бейдж, подпись оси</span>
  <span style="font-size:var(--text-xs)">xs · 12px · время, метаданные</span>
  <span style="font-size:var(--text-sm)">sm · 13px · база интерфейса</span>
  <span style="font-size:var(--text-md)">md · 15px · проза</span>
  <span style="font-size:var(--text-lg)">lg · 17px · заголовок блока</span>
  <span style="font-size:var(--text-xl)">xl · 21px · заголовок раздела</span>
  <span style="font-size:var(--text-2xl)">2xl · 27px · число-герой</span>
</div>

Шаг между соседними ступенями внизу шкалы — один-два пикселя, и это не недоработка: 11, 12 и 13 различают роль, а не важность. Заметный скачок начинается там, где начинается иерархия.

Кегль — единственный ярус в 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 запрещены: только обычное предложение.

Варианты

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

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

Связанное

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