ux-typography

Display Font (Headings, UI)

```css

--font-display: 'Cinzel', serif;

```

Use for:

• Headings (h1-h6)
• Navigation labels
• Button text
• Phase names
• Game titles

Body Font (Content, Paragraphs)

```css

--font-sans: 'Crimson Pro', Georgia, serif;

```

Use for:

• Body text
• Paragraphs
• Form inputs
• Hints and descriptions
• Story content

The project uses Utopia fluid scale with cqi units (container query inline). Sizes interpolate based on container width.

IMPORTANT: cqi units require container-type: inline-size on an ancestor. The project sets this on html.

Type Steps

| Token | Min (320px) | Max (1240px) | Usage |

|-------|-------------|--------------|-------|

| --step--2 | 11.11px | 12.50px | Fine print, captions |

| --step--1 | 13.33px | 16.67px | Secondary text, hints |

| --step-0 | 16px | 22.22px | Body text (base) |

| --step-1 | 19.20px | 29.63px | Large body, subheads |

| --step-2 | 23.04px | 39.51px | Section headings |

| --step-3 | 27.65px | 52.68px | Page headings |

| --step-4 | 33.18px | 70.24px | Hero text |

| --step-5 | 39.81px | 93.65px | Display, titles |

Usage

```css

.body-text {

font-size: var(--step-0);

font-family: var(--font-sans);

}

.heading {

font-size: var(--step-3);

font-family: var(--font-display);

}

.caption {

font-size: var(--step--2);

font-family: var(--font-sans);

}

```

Recommended Values

| Content Type | Line Height | Rationale |

|--------------|-------------|-----------|

| Headings | 1.1–1.2 | Tight for visual impact |

| Body text | 1.5–1.6 | Optimal readability |

| UI elements | 1.2–1.3 | Compact but legible |

| Long-form | 1.6–1.7 | Comfortable reading |

```css

.heading {

line-height: 1.1;

}

.body {

line-height: 1.5;

}

.button-text {

line-height: 1.2;

}

```

Tokens

```css

:root {

--letter-spacing-tight: -0.025em;

--letter-spacing-normal: 0;

--letter-spacing-wide: 0.025em;

--letter-spacing-wider: 0.05em;

}

```

Usage Guidelines

| Context | Spacing | Example |

|---------|---------|---------|

| Large headings | --letter-spacing-tight | Hero titles |

| Body text | --letter-spacing-normal | Paragraphs |

| Small caps | --letter-spacing-wide | Labels |

| All caps | --letter-spacing-wider | Buttons |

```css

.hero-title {

font-size: var(--step-5);

letter-spacing: var(--letter-spacing-tight);

}

.phase-label {

text-transform: uppercase;

letter-spacing: var(--letter-spacing-wider);

}

```

Available Weights

• 400 - Regular (body text)
• 600 - Semibold (emphasis, labels)
• 700 - Bold (headings, buttons)

```css

.body {

font-weight: 400;

}

.label {

font-weight: 600;

}

.heading {

font-weight: 700;

}

```

Example Structure

```css

/ Page title /

h1 {

font-family: var(--font-display);

font-size: var(--step-4);

font-weight: 700;

line-height: 1.1;

letter-spacing: var(--letter-spacing-tight);

}

/ Section heading /

h2 {

font-family: var(--font-display);

font-size: var(--step-2);

font-weight: 600;

line-height: 1.2;

}

/ Body text /

p {

font-family: var(--font-sans);

font-size: var(--step-0);

font-weight: 400;

line-height: 1.5;

}

/ Caption/hint /

.hint {

font-family: var(--font-sans);

font-size: var(--step--1);

color: var(--theme-on-surface-variant);

}

```

Emphasis

```css

/ Strong emphasis /

strong, .strong {

font-weight: 600;

}

/ Italic for terms /

em, .term {

font-style: italic;

}

/ Highlighted text /

mark, .highlight {

background: var(--theme-primary-container);

padding-inline: 0.2em;

border-radius: 2px;

}

```

Links

```css

a {

color: var(--theme-primary);

text-decoration: underline;

text-underline-offset: 0.15em;

}

a:hover {

text-decoration-thickness: 2px;

}

a:focus-visible {

outline: var(--focus-ring-width) solid var(--focus-ring-color);

outline-offset: var(--focus-ring-offset);

}

```

Keyboard Hints

```css

kbd {

display: inline-block;

padding: 0.1em 0.4em;

font-family: inherit;

font-size: 0.9em;

background: var(--theme-surface);

border: 1px solid var(--theme-outline);

border-radius: 3px;

}

```

The fluid scale handles most responsiveness automatically. For specific adjustments:

```css

/ Container query for constrained spaces /

@container (max-width: 200px) {

.phase-label {

font-size: var(--step--2);

}

}

/ Override for very large displays /

@container (min-width: 1400px) {

.hero {

font-size: var(--step-5);

}

}

```

Minimum Sizes

• Body text: --step-0 minimum (16px at base)
• Interactive labels: --step--1 minimum (13px at base)
• Never smaller than --step--2 for any readable text

Avoid

```css

/ DON'T: Fixed pixel sizes /

.bad {

font-size: 14px;

}

/ DON'T: Viewport units for body text /

.bad {

font-size: 2vw;

}

/ DON'T: Low contrast with small text /

.bad {

font-size: var(--step--2);

color: var(--theme-outline);

}

```

Do

```css

/ DO: Use fluid tokens /

.good {

font-size: var(--step-0);

}

/ DO: Ensure contrast for small text /

.good {

font-size: var(--step--1);

color: var(--theme-on-surface);

}

```