Typography

Heading styles generated from a configurable map, body text, captions, and labels. All aligned to the vertical rhythm.

Headings

Applied to both HTML elements (h1-h6) and utility classes (.ug-h1-.ug-h6).

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Body Text

Large body text — for emphasis.

Regular body text — the default reading size.

Small body text — for secondary content.

<p class="ug-body--lg">Large body text — for emphasis.</p>
<p class="ug-body">Regular body text — the default reading size.</p>
<p class="ug-body--sm">Small body text — for secondary content.</p>

Lead / Intro

This is lead text — used for introductory paragraphs that need visual emphasis.

<p class="ug-lead">This is lead text — used for introductory paragraphs that need visual emphasis.</p>

Caption & Label

This is a caption — used for image descriptions and annotations.

This is a label — uppercase, bold, small

<p class="ug-caption">This is a caption — used for image descriptions and annotations.</p>
<p class="ug-label">This is a label — uppercase, bold, small</p>

Text Alignment

Left aligned

Center aligned

Right aligned

<p class="ug-text--left">Left aligned</p>
<p class="ug-text--center">Center aligned</p>
<p class="ug-text--right">Right aligned</p>

Multi-Column Text

The Unigrid system was designed by Massimo Vignelli in 1977 for the National Park Service. It standardized all NPS site folders into a unified design system. The broadside approach means each folder is printed as a single flat sheet, then accordion-folded.

<div class="ug-text--cols-3">
  <p>The Unigrid system was designed by Massimo Vignelli in 1977 for the National Park Service. It standardized all NPS site folders into a unified design system. The broadside approach means each folder is printed as a single flat sheet, then accordion-folded.</p>
</div>

Class Reference

Class	Description
`h1–h6 / .ug-h1–.ug-h6`	Heading styles (from $ug-headings map)
`.ug-body`	Body text
`.ug-body--sm`	Small body text
`.ug-body--lg`	Large body text
`.ug-lead`	Lead / intro paragraph
`.ug-caption`	Caption text (gray)
`.ug-label`	Uppercase bold label
`.ug-text--left\|center\|right`	Text alignment
`.ug-text--cols-2\|3\|4`	Multi-column text