Typography

Foundations

All font sizes output in rem, converted from px against $base-font-size (16px). No root font-size is written to html for the default 16px — an author font-size there would override the reader's browser default-size setting and pin every rem in the stylesheet, which is the one thing rem output exists to avoid. Set $base-font-size to something else and the baseline moves as a percentage, which still tracks that setting. See Configuration.

Letter-spacing is the exception: px values convert to em, against that rule's own font-size rather than the root. Tracking corrects a size, so it has to move when the size does — .supertitle is 2px at 14px, and it stays that ratio under .fs-32 instead of staying 2px.

Default fonts:

body uses $paragraph-font. h1–h6 elements override to $heading-font.

Default line-heights:

All three read out of the $line-heights map rather than carrying their own number, so retuning the map moves the type scale and the .lh-* utilities together. Override a variable directly to break one out of the map.

Type scale

Headings

h1–h3 have two size sets: mobile (default, no media query) and desktop (min-width: 1024px, the lg breakpoint). h4–h6 have one — at 20px and below there is nothing to give back on a small screen. The semantic tag and its class equivalent share identical rules — .h1 gives heading styling without the <h1> element.

Each heading entry: (font-size, letter-spacing, line-height, font-weight). Sizes output as rem, letter-spacing as em.

This is a reading ladder, not a poster one: it opens a document rather than a hero. h5 sits at body size and h6 below it, carrying their level through weight and family instead of scale — the same collapse GitHub's and most docs renderers' prose use. For display type, reach for .fs-64 / .fs-96, which are still in $font-sizes.

No letter-spacing is set on any heading or paragraph. Tracking corrects a specific face at a specific size; applied blind across a scale it fights whatever $paragraph-font is actually set to. .supertitle is the exception, since capitals are drawn to be set apart.

Heading elements also carry default bottom margins (applied to the tag, not the class):

Example — same visual output, different semantics:

<h2>Section title</h2>
<div class="h2">Section title</div>

Paragraph and body text

Non-heading entries use a single size set (no responsive switch). letter-spacing values in px are converted to em against the same entry's font-size.

.supertitle additionally sets font-weight: 500 and text-transform: uppercase.

<p class="p1">Large body copy</p>
<p class="p2">Medium body copy</p>
<p>Default paragraph — 1rem / 16px</p>
<figcaption>Caption text (same as .p3)</figcaption>
<small>Fine print (same as .p4)</small>
<p class="supertitle">Label / eyebrow text</p>

Font size utilities — .fs-*

Generated from $font-sizes. px in the class name, rem in the output — same convention as .pt-32, same toRem() conversion the type scale uses, so .fs-24 and .p1 land on exactly the same size.

This is the nudge that does not need a new component class — the type scale still owns letter-spacing, line-height and weight, .fs-* changes size only. Responsive variants included:

<h2 class="fs-32 fs-md-64">Smaller on phones</h2>

Line height utilities — .lh-*

Generated from $line-heights. Unitless values on purpose: a unitless line-height inherits as a ratio, so children scale with their own font-size; a px one inherits as a frozen box and collapses nested type.

tight and normal are not only utility values: $heading-line-height and $paragraph-line-height read them out of this map, so a change here moves the type scale with the classes.

Pairs with .fs-* — bumping size usually means loosening or tightening leading:

<p class="fs-32 lh-tight">Display text needs less leading than body copy.</p>

Font family utilities

Override the font family on any element. All use !important.

Font weight utilities

Weight lives under font-, matching the CSS property. All use !important.

Text alignment

Generated with responsive variants (all breakpoints). Base classes apply at all widths; breakpoint-infixed variants apply at min-width.

.text-left          → text-align: left
.text-center        → text-align: center
.text-right         → text-align: right

Responsive examples:

.text-md-center     → text-align: center  (min-width: 768px)
.text-lg-left       → text-align: left    (min-width: 1024px)

Text decoration

.text-underline          → text-decoration: underline
.text-overline           → text-decoration: overline
.text-line-through       → text-decoration: line-through
.text-decoration-none    → text-decoration: none

Responsive variants follow the same breakpoint-infix pattern as alignment.

Text transform

.text-uppercase          → text-transform: uppercase
.text-lowercase          → text-transform: lowercase
.text-capitalize         → text-transform: capitalize
.text-full-width         → text-transform: full-width
.text-full-size-kana     → text-transform: full-size-kana
.text-transform-none     → text-transform: none

Responsive variants available for all breakpoints.

Font style

.font-italic     → font-style: italic

.text-italic was removed in 3.0.0 — font-style is a font- property, so it belongs in the font-* namespace with the weights.

Whitespace

.text-nowrap            → white-space: nowrap

Text wrapping

.text-balance           → text-wrap: balance
.text-pretty            → text-wrap: pretty

balance evens out line lengths across a block — the fix for a heading whose last line is one orphaned word. Browsers cap it at a handful of lines (4–6), so it is a headline tool, not a body-copy one. pretty is the body-copy counterpart: it only prevents orphans, with no line limit.

Not responsive, and there is no text-wrap: nowrap class — .text-nowrap above is the white-space one, and two classes a character apart is a trap.

Truncation

.truncate               → overflow: hidden; white-space: nowrap; text-overflow: ellipsis

Single-line ellipsis. The element needs a width to overflow against — a block element inherits one from its parent, but a flex or grid child does not shrink below its content by default, so pair it with .min-w-0 there:

<div class="d-flex">
  <span class="truncate min-w-0">A very long label that gets cut off…</span>
</div>

For more than one line, use .line-clamp-{n} — generated from $line-clamps (1, 2, 3, 4, 5, 6), not responsive.

.line-clamp-3           → display: -webkit-box; -webkit-box-orient: vertical;
                          -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden

The clamp is implemented with display: -webkit-box, which is still the only form every supported browser understands — the unprefixed line-clamp is emitted alongside it for the ones that do. Two consequences:

• display is part of the mechanism, so putting .d-block or .d-flex on the same element switches the clamp off. Clamp the inner element instead.
• There is no .line-clamp-none. Removing the class is the way to unclamp; if you need to undo it at a breakpoint, swap in a .d-* class there.

List utilities

From _list.scss. Strips default list styling.

ul.reset,
ol.reset {
  list-style: none;
  margin: 0;
  padding: 0;
  text-indent: 0;
}

The .reset class must be applied directly on the <ul> or <ol> element (qualified selector).

<ul class="reset">
  <li>No bullets, no indent</li>
</ul>