Типографіка

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="/uk/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

Використовуйте токени типографіки для шрифтів і відступів, токени оформлення контенту для цитат і рядкових елементів і токени палітри й тем для кольорів.