Typography

Font family

font-primary (Plus Jakarta Sans), font-secondary (DM Sans), font-code (monospace).

Font size

Fluid sizes that scale with the viewport:

• Large: fs-xl-100, fs-100, fs-200, fs-300, fs-400, fs-500, fs-600
• Small: fs-sm-100 … fs-sm-500

Font weight

fw-400, fw-500, fw-600, fw-700, fw-800.

<p class="font-primary fs-300 fw-700">Bold display text</p>

Alignment, wrapping & transform

• Align: text-left, text-start, text-center, text-right, text-end (+ responsive text-{bp}-center, …)
• Wrap: text-wrap, text-nowrap, text-break, text-keep-all, text-wrap-balance, text-truncate
• Transform: text-lowercase, text-uppercase, text-capitalize
• Line height: lh-1, lh-sm, lh-base, lh-md, lh-lg

Semantic text styles

Ready-made hierarchy styles:

• text-hero — largest display text
• text-heading (+ heading-lg, heading-xl) — section headings with variable-font weight
• text-subheading (+ subheading-m0 / m1 / m2) — subheadings, with an optional anchor hash on data-link
• text-title-description — title with an animated underline on a following .subtitle-1

<h1 class="text-hero">Build vibrant UIs</h1>
<h2 class="text-heading heading-lg">A bold section title</h2>

Extras

tabular-numbers (aligned figures), text-decoration-side-lines (centered text with flanking rules), and text-gradient (see Colors & Gradients).