Типографика

Утилиты для управления размером шрифта, насыщенностью, начертанием, межстрочным интервалом и межбуквенным расстоянием.

Размер шрифта

Класс

font-size

fs-xs

12px

fs-sm

14px

fs-base

16px

fs-lg

18px

fs-xl

20px

fs-2xl

24px

fs-3xl

32px

fs-4xl

40px

Насыщенность шрифта

Класс

font-weight

fw-thin

100

fw-light

300

fw-regular

400

fw-medium

500

fw-semi-bold

600

fw-bold

700

fw-heavy

900

Межстрочный интервал

Класс

line-height

lh-none

1

lh-tight

1.25

lh-snug

1.375

lh-normal

1.5

lh-relaxed

1.625

lh-loose

2

Межбуквенное расстояние

Класс

letter-spacing

ls-tighter

-0.05em

ls-tight

-0.025em

ls-normal

0

ls-wide

0.025em

ls-wider

0.05em

ls-widest

0.1em

Начертание (font-style)

Класс

CSS

italic

font-style: italic

not-italic

font-style: normal

Шорткаты насыщенности

Наряду с fw-* классами доступна длинная форма font-weight-* — удобна при составлении имён классов в шаблонах или рядом с text-* цветовыми классами:

Класс

font-weight

font-weight-thin

100

font-weight-light

300

font-weight-regular

400

font-weight-medium

500

font-weight-semi-bold

600

font-weight-bold

700

font-weight-heavy

900

fw-bold и font-weight-bold дают одинаковый результат.

Адаптивные варианты

Все классы поддерживают адаптивные префиксы:

<p class="fs-sm md:fs-base lg:fs-lg">
  Адаптивный размер шрифта
</p>

<h1 class="fw-regular md:fw-bold">
  Адаптивная насыщенность
</h1>

Примеры

<p class="fs-xs fw-light lh-loose ls-widest">Маленький лёгкий текст</p>
<h2 class="fs-3xl fw-bold lh-tight ls-tight">Крупный заголовок</h2>
<span class="fs-base fw-medium lh-normal">Обычный текст</span>
<em class="italic fs-lg text-grey">Курсивная подпись</em>
<strong class="font-weight-bold fs-xl">Выделенное значение</strong>