Типографика
Утилиты для управления размером шрифта, насыщенностью, начертанием, межстрочным интервалом и межбуквенным расстоянием.
Размер шрифта
| Класс | 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 дают одинаковый результат.
Адаптивные варианты
Все классы поддерживают адаптивные префиксы:
html
<p class="fs-sm md:fs-base lg:fs-lg">
Адаптивный размер шрифта
</p>
<h1 class="fw-regular md:fw-bold">
Адаптивная насыщенность
</h1>Примеры
html
<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>