Оформление текста

Классы задают регистр, в котором показан текст, не меняя сам текст в разметке. Берите их для подписей, кнопок и заголовков разделов, которые по дизайну набраны прописными.

Пример

Подпись над образцом — класс, который на нём стоит.

<div class="grid grid-col-1 sm:grid-col-2 gap-3 p-3 bg-surface border border-outline-variant radius-surface color-on-surface">
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">uppercase</code>
    <p class="m-0 text-2 uppercase">Заголовок раздела</p>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">lowercase</code>
    <p class="m-0 text-2 lowercase">ТЕКСТ, НАБРАННЫЙ ПРОПИСНЫМИ</p>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">capitalize</code>
    <p class="m-0 text-2 capitalize">каждое слово с прописной</p>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">normalcase</code>
    <p class="m-0 text-2 uppercase"><span class="normalcase">регистр как в разметке</span> внутри uppercase</p>
  </div>
</div>

Классы

Условия (что это): ширина экрана — нет; состояния — нет.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Применение

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

<p class="uppercase tracking-wide text-1/2">Раздел</p>
<h2 class="uppercase">Заголовок <span class="normalcase">iOS</span></h2>

Прописные буквы читаются плотнее: для коротких подписей добавляйте межбуквенный интервал tracking-wide.

Ограничения

• capitalize делает прописной первую букву каждого слова, включая предлоги, и не делает строчными остальные буквы.
• Результат зависит от языка: задавайте lang у документа или блока, чтобы браузер выбрал правила регистра.
• Длинный текст прописными читается труднее: ограничьтесь подписями и короткими заголовками.

См. также

• Трекинг текста
• Начертание шрифта (капитель)