Typography Utilities

Typography in McGowanStyle is driven by a small set of design tokens and utility classes. The system exposes a scale for headings and text sizes via CSS custom properties and a set of helper utilities you can use in your markup.

Headings (Rendered)

Heading 1 — H1

Heading 2 — H2

Heading 3 — H3

Heading 4 — H4

Heading 5 — H5

Heading 6 — H6

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

Text Sizes (Reference)

The framework provides utility classes such as u-text-xs, u-text-sm, u-text-base, u-text-lg, up to u-text-4xl. Use these in your markup to adjust text size at the element level.

<div class="u-text-xs">Extra small</div>
<div class="u-text-sm">Small</div>
<div class="u-text-base">Base</div>
<div class="u-text-lg">Large</div>
<div class="u-text-2xl">2XL</div>

Font Weight & Style

Use font-weight utilities to emphasize text: u-fw-light, u-fw-normal, u-fw-bold. Use semantic HTML (<strong>, <em>) where appropriate for accessibility.

<strong>Bold</strong>

<em>Italic</em>

<span class="u-underline">Underline</span>

<div class="u-fw-light">Light weight</div>
<div class="u-fw-normal">Normal weight</div>
<div class="u-fw-bold">Bold weight</div>

Text Alignment

Alignment utilities such as u-text-left, u-text-center, and u-text-right let you adjust text flow responsively.

<div class="u-text-left">Left aligned</div>
<div class="u-text-center">Center aligned</div>
<div class="u-text-right">Right aligned</div>

Truncation & Line Clamp

Use .u-text-truncate for single-line truncation and .u-line-clamp-2/.u-line-clamp-3 for multiline clamping (webkit-based).

<p class="u-text-truncate">...</p>
<p class="u-line-clamp-2">...</p>

Class Reference