Typography

The Wojo Framework typography system is a set of CSS utility classes defined in wf-typography.css . It covers a 13-step fluid type scale using clamp() , font family utilities, seven weight steps, text color classes for every brand and semantic token, and a full set of alignment, transform, decoration, line-height, letter-spacing, whitespace, and overflow utilities.

Headings

Native heading elements h1 - h6 are set in Poppins via --font-headings and use fluid clamp() sizes so they scale smoothly between viewport breakpoints without breakpoint-specific overrides. Override any size token on :root to adjust the entire heading scale.

/* Override heading sizes on :root */
:root {
  --h1-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
  --h2-size: clamp(2rem, 3.5vw + 1rem, 3.75rem);
  --h3-size: clamp(1.75rem, 2vw + 1rem, 2.75rem);
  --h4-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
  --h5-size: clamp(1.25rem, 1vw + 1rem, 1.5rem);
  --h6-size: clamp(1.1rem, 0.5vw + 1rem, 1.25rem);
}

Type Scale

A 13-step fluid scale from wf-text-xxs to wf-text-9xl . Every step uses clamp() with a fluid middle value so size grows proportionally with the viewport between the min and max endpoints.

<span class="wf-text-sm">Small text</span>
<span class="wf-text-base">Base text</span>
<span class="wf-text-lg">Large text</span>
<h2 class="wf-text-4xl">Display heading</h2>

Font Family

Three font family utilities plus the wf-page and wf-body base classes. Override the underlying CSS custom properties on :root to change fonts globally without touching component CSS.

<p class="wf-font-headings">Poppins</p>
<p class="wf-font-serif">Georgia</p>
<p class="wf-font-mono">Space Mono</p>

:root {
  --font-family:   "Your Body Font", system-ui, sans-serif;
  --font-headings: "Your Heading Font", sans-serif;
  --font-serif:    Georgia, serif;
  --font-mono:     "Your Mono Font", monospace;
}

Font Weight

Maps to the 7 weights (200, 300, 400, 500, 600, 700, 900).

<p class="wf-font-light">Light 300</p>
<p class="wf-font-normal">Normal 400</p>
<p class="wf-font-semibold">Semibold 600</p>
<p class="wf-font-bold">Bold 700</p>

Text Colors

Semantic tokens for UI text, plus a color class for every brand token in the color system. Inverted variants follow the same naming pattern with -inverted appended.

<p class="wf-text-muted">Muted helper text</p>
<p class="wf-text-danger">Error message</p>
<p class="wf-text-primary">Branded text</p>
<p class="wf-text-positive">Success copy</p>

<!-- Inverted (lighter tint) -->
<p class="wf-text-primary-inverted">Inverted primary</p>

Utilities

Alignment

Align text left, center, right, justified, or bidirectionally with start/end.

<p class="wf-text-left">Left</p>
<p class="wf-text-center">Center</p>
<p class="wf-text-right">Right</p>
<p class="wf-text-justify">Justified</p>
<p class="wf-text-start">Justified</p>
<p class="wf-text-end">Justified</p>

Transform & Decoration

Transform text case: uppercase, lowercase, capitalize, or normal.

<span class="wf-uppercase">uppercase</span>
<span class="wf-lowercase">LOWERCASE</span>
<span class="wf-capitalize">capitalize each word</span>
<span class="wf-italic">italic</span>
<span class="wf-underline">underline</span>
<span class="wf-line-through">line-through</span>

Line Height & Letter Spacing

Six line-height values from tight (1) to lose (2). Six tracking (letter-spacing) levels from tighter to widest.

<p class="wf-leading-tight">Tight line height</p>
<p class="wf-leading-relaxed">Relaxed line height</p>
<p class="wf-tracking-wide">Wide letter spacing</p>
<p class="wf-tracking-widest wf-uppercase">Spaced caps label</p>

Overflow & Wrapping

Control how overflow text and whitespace are handled.

<!-- Single-line truncation with ellipsis -->
<p class="wf-truncate">Very long text...</p>

<!-- Break long URLs / unbreakable strings -->
<p class="wf-break-words">https://example.com/...</p>

<p class="wf-clip">will not wrap at all</p>

Class Reference