Typography

Bootstrap 5.3 type system with data-bs-theme-aware colors, RFS heading classes, display scale, editorial patterns, tabular figures, line clamps, and more than the basics in the docs — toggle light/dark to verify contrast.

Readable defaults + expressive variants

Prefer semantic utilities (text-body-secondary, text-emphasis) over hard-coded grays. Pair .lead with tight subheads for marketing blocks.

Typography docs Text utilities

Headings

Tags & .h1–.h6

<h1>

Canvas heading

<h2>

Section title

<h3>

Subsection

<h4>

Card title

<h5>
Label scale
<h6>
Fine heading

Paragraph styled as heading level (for accessibility keep real <h*> when it’s a heading):

Looks like h4

Supporting line with muted tone

Display

Display 1–6 + gradient headline

Display 6 — hero subline

Display 5

Display 4

Gradient display (decorative)

Gradient uses theme primary/info/purple; reserve for marketing, not body copy.

Editorial

Eyebrow · title · subtitle

Release notes

Ship logs, changelogs, and announcements

Use a short eyebrow in brand color, one clear title, then a relaxed subline. This stack reads well in light and dark because every line uses Bootstrap semantic color tokens.

Featured

Nested pattern with kicker

Kickers are slightly bolder than body; keep them one step above captions.

Lead

Lead & tight intro

Default .lead — slightly larger, relaxed line height for opening paragraphs.

Tight lead (.type-lead-tight) for dense dashboards where .lead feels tall.

RFS

fs-*

fs-1

fs-3

fs-5

fs-6 secondary

Line height

lh-*

lh-1 — tight lines for big numerals or headlines. Avoid long paragraphs.

lh-sm — compact UI copy.

lh-lg — comfortable reading for multi-sentence blocks.

Weight & style

fw-* · fst-*

fw-lighter

fw-normal

fw-semibold

fw-bold

fst-italic for emphasis, not fake headings.

Color tokens

Theme-safe text utilities

text-body-emphasis

text-body

text-body-secondary

text-secondary

text-primary

text-success

text-danger

text-warning

text-info

text-muted (prefer secondary in new work)

text-primary-emphasis

text-success-emphasis

text-danger-emphasis

opacity 100
75
50
25

Links

Underline & offset

Primary link with animated underline

Secondary, underline on hover only

Success, no underline

Combine link-* with link-offset-* and link-underline-opacity-*.

Transform & align

Case & responsive alignment

Uppercase tracked

capitalized heading words

LOWERCASE OVERRIDES

Center on small, start on md, end on lg — text-center text-md-start text-lg-end

Inline

Marks & edits

You can use the mark tag to highlight.

Deleted · strikethrough (no semantic delete)

Inserted · underlined

Small / fine print

Bold · italic · HTML

Press ⌘ + K to search.

const x = 42; · sample output · y = 23 + xi

Code block

Pre + monospace

function greet(name) {
  return `Hello, ${name}`;
}

Use .type-code-block for bordered, theme-aware panels.

Blockquotes

Bootstrap + accent rails

Design is not just what it looks like — design is how it works.

Success accent rail for positive callouts.

Figure · footer

Quote card & attribution

Typography is the detail and the presentation of a story — it represents the voice of an atmosphere, or historical setting of some kind.

Cyrus Highsmith Inside Paragraphs

Right-aligned blockquote for testimonials.

Customer ops lead

Lists

Ordered · unordered · unstyled

  1. First deployment step
  2. Second step with nested list:
    • Sub item A
    • Sub item B
  3. Third step
  • — Unstyled row one
  • — Unstyled row two

Lists

Inline · checklist

  • Design
  • Eng
  • Ship
  • Accessibility review passed
  • Contrast checked in dark mode
  • Copy reviewed for inclusive language

Description list

Horizontal dl

Token
Maps to CSS variables under :root and [data-bs-theme].
RFS
Responsive font sizes scale down on narrow viewports automatically.
Truncated term…
Pair .text-truncate with a title for full text.
Nested
Child term
Nested definition value.

Figures · numbers

Tabular nums · clamp

Subtotal $1,249.00
Tax $112.41

This paragraph is clamped to two lines with .type-line-clamp-2. Extra words are hidden from view but remain in the DOM for screen readers unless you adjust with aria-hidden patterns.

Short pull quote inside a figure.

Figcaption uses secondary token for captions.

Dividers & labels

Rules · badges · pill meta

Section above

Section below with subtle rule.

Primary pill Dark Light + border v2.4.0 · stable

Nested data-bs-theme="dark"

Same utilities, local surface

Body copy uses the nested theme’s --bs-body-color. Pair with text-secondary or text-body-secondary for hierarchy.

Lead still works on dark panels.

Info link on dark · Warning badge