Типография

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

Семейства

Три, потому что именно это отличает страницу: на чем написано, как называется, и что должно читаться как напечатанное, а не сказанное. Набор может дать одинаковый шрифт для всех трех — системный шрифт делает именно это.

--font-family-base

Быстрая коричневая лиса перепрыгивает через ленивую собаку — 0123456789

--font-family-heading

Быстрая коричневая лиса перепрыгивает через ленивую собаку — 0123456789

--font-family-mono

Быстрая коричневая лиса перепрыгивает через ленивую собаку — 0123456789

Вес

Названы по тому, насколько они настойчивы, никогда по числу. Шрифт, у которого 500 не существует, отображает его на том, что у него есть, и формы, которые требуют среднего, продолжают требовать среднего.

--font-weight-normal — Быстрая коричневая лиса перепрыгивает через ленивую собаку — 0123456789

--font-weight-medium — Быстрая коричневая лиса перепрыгивает через ленивую собаку — 0123456789

--font-weight-strong — Быстрая коричневая лиса перепрыгивает через ленивую собаку — 0123456789

--font-weight-bold — Быстрая коричневая лиса перепрыгивает через ленивую собаку — 0123456789

Масштаб шрифта

Дизайн-система — строительные блоки для отличных интерфейсов

Используется один раз на странице. Устанавливает основной контекст. Сочетается с коротким вводным абзацем.

Типография устанавливает иерархию и ритм

Заголовок уровня секции. Группирует связанные материалы. Обычно за ним следует основной текст или подсекции.

Пространство и пропорции формируют читаемость

Заголовок подсекции. Вводит сосредоточенную тему в рамках секции.

Цвет и контраст направляют взгляд

Используется для заголовков карточек, секций боковой панели или мелких группировок.

Интерактивные состояния должны быть очевидны

Ярлыки, заголовки метаданных, небольшие группировки. Ненавязчиво, но отличается от основного текста.

Доступность — это функция, а не после мысли

Самый мелкий уровень заголовка. Используйте умеренно — для сносок, юридических блоков или вспомогательных ярлыков.