Typography

Utilities for controlling font size, weight, style, line height, and letter spacing.

Font size

Class

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

Class

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

Class

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

Class

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

Class

CSS

italic

font-style: italic

not-italic

font-style: normal

font-weight shortcuts

In addition to fw-* classes there is a longer font-weight-* form — handy when composing class names in templates or alongside text-* color classes:

Class

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

Both fw-bold and font-weight-bold produce the same result.

Responsive variants

All classes support responsive prefixes:

<p class="fs-sm md:fs-base lg:fs-lg">
  Responsive font size
</p>

<h1 class="fw-regular md:fw-bold">
  Responsive weight
</h1>

Examples

<p class="fs-xs fw-light lh-loose ls-widest">Small light text</p>
<h2 class="fs-3xl fw-bold lh-tight ls-tight">Large heading</h2>
<span class="fs-base fw-medium lh-normal">Regular body text</span>
<em class="italic fs-lg text-grey">Italicized caption</em>
<strong class="font-weight-bold fs-xl">Highlighted value</strong>