Типографика

Trace CSS оформляет нативные текстовые элементы HTML. Основной текст и заголовки используют соответствующие шрифты темы. Для кода, клавиш и примеров вывода используется моноширинный шрифт.

#Заголовки и адаптивные размеры

Выбирайте уровень заголовка по его месту в структуре документа. Trace CSS использует полужирное начертание и высоту строки 1,25 для всех шести уровней.

Элемент	От 48rem	Меньше 48rem
`h1`	3rem	2rem
`h2`	2.5rem	1.75rem
`h3`	2rem	1.5rem
`h4`	1.5rem	1.25rem
`h5`	1.25rem	1.125rem
`h6`	1rem	1rem

При ширине меньше 48rem (обычно 768 CSS-пикселей) медиазапрос уменьшает размеры h1–h5 на одну ступень. Высота строки основного текста остаётся равной 1,6. Длинные слова переносятся, а блоки с сохранённым форматированием можно прокручивать по горизонтали. Порог зависит от ширины области просмотра, в том числе в сборке с ограниченной областью.

<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвёртого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>

#Абзацы, списки и ссылки

Нижний отступ абзацев по умолчанию равен 1rem. Маркированные, нумерованные списки и списки описаний используют высоту строки основного текста. Цвет ссылок зависит от темы.

<p>Чтобы установить Trace CSS, откройте <a href="/ru/docs/">Быстрый старт</a>.</p>
<ul><li>Нативные элементы HTML</li></ul>
<ol><li>Подключите стили</li><li>Добавьте свою разметку</li></ol>
<dl><dt>Токен</dt><dd>Пользовательское свойство CSS, которое управляет оформлением.</dd></dl>

Чтобы установить Trace CSS, откройте Быстрый старт.

Нативные элементы HTML

Подключите стили
Добавьте свою разметку

Токен: Пользовательское свойство CSS, которое управляет оформлением.

#Строчные элементы

Элементы	Пример
`strong`, `b`	Важно, Ключевое слово
`em`, `i`, `cite`	Акцент, Термин, HTML Living Standard
`del`, `s`	~~Удалено~~, ~~Устарело~~
`ins`, `u`	Добавлено, С примечанием
`abbr[title]`	CSS
`mark`	Выделенный текст
`small`	Мелкий шрифт
`sub`, `sup`	H₂O, 2³
`code`	`display: grid`
`kbd`	`Enter`
`samp`	`Сборка завершена`

#Текст с сохранённым форматированием

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

<pre><code>Первая строка
  Строка с отступом</code></pre>

Первая строка
  Строка с отступом

#Цитата

У блочной цитаты тонированный фон и граница со стороны начала строки. Горизонтальная линия разделяет темы и учитывает текущую цветовую схему.

<blockquote>
  <p>Используйте нативный HTML как основу интерфейса.</p>
  <footer>— <cite>Документация Trace CSS</cite></footer>
</blockquote>
<hr />

Используйте нативный HTML как основу интерфейса.

— Документация Trace CSS

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