typography

Files (1)

• SKILL.md

SKILL.md (first lines)

# Typography

Apply proven typographic thinking to each project's unique voice. The realness design system is the trusted elder - draw from its decisions as validated patterns, not as rules to copy.

## Starting a client project

Before picking a font or ratio, understand:

1. **Voice** - formal or approachable, dense or airy, editorial or functional?
2. **Content type** - long-form prose, UI labels, marketing, data?
3. **Performance constraints** - self-hosted or CDN, budget for font files?
4. **Existing brand** - is there a font already? What does it say?

Then build the system in this order: baseline unit -> modular scale -> fluid range -> font choice. Don't start with the font.

## The baseline unit

Everything derives from one unit (mechanics: useless, Spacing). Pick the value for the client's density:

- `1.25rem` - tighter, denser, more corporate
- `1.333rem` - realness default, balanced editorial
- `1.5rem` - looser, more generous, consumer-friendly

## Modular scale

| Ratio | Name | Character |
|-------|------|-----------|
| 1.125 | Major Second | Quiet, functional, dense UI |
| 1.200 | Minor Third | Balanced, versatile, most web content |
| 1.250 | Major Third | Clear hierarchy, marketing |
| 1.333 | Perfect Fourth | Strong, editorial |
| 1.414 | Augmented Fourth | Dramatic, expressive |

A **fluid range** scales the ratio itself with the viewport (realness: 1.25 -> 1.414) - quiet hierarchy on mobile, dramatic on wide screens, no breakpoints. Pick a range for the client's voice: a law firm might stay fixed at 1.2; a creative studio might range 1.333 -> 1.618.

## Fluid type

Implementation (the `clamp()` slope math and its bound-order gotcha) lives in useless's [TYPE_SCALE_RECIPE.md](../useless/references/TYPE_SCALE_RECIPE.md). The judgment call this skill owns: slope-intercept `calc()` when you want the breakpoints legible in the source, `clamp()` shorthand when you're eyeballing.

## Heading treatment

Realness's defaults (weight 300, tight tracking, line-height 1 - see useless) are a strong client starting point: light + tight works because the scale provides the size contrast. If the client's brand is bolder, adjust weight before scale - 300 to 400 is usually enough.

## Font selection

**The right question:** what does this font do for the reader at the content's natural reading speed and distance?

```
Long-form prose, editorial          -> Transitional Serif (Georgia, Charter, Lora)
Friendly, approachable, app-like    -> Humanist Sans (Lato, Gill Sans, Source Sans)
Clean, technical, UI-heavy          -> Geometric Sans (Inter, Futura, DM Sans)
Authoritative, formal, institutional -> Classical Serif (Garamond, Minion, Crimson)
```

Realness uses Lato (Humanist Sans) - warm, readable at weight 300, distinct at weight 800. Good default for human-centered products. For a client with a different character, start from this same reasoning rather than copying the font.

**Pairing:** contrast beats matching. One serif + one sans from compatible eras works reliably. Superfamilies (same designer, serif + sans variants) are the safe path.

**Self-host always.** Google Fonts privacy implications aside, self-hosted woff2 subsets load faster and give you control. Latin subset is ~30KB vs ~150KB full character set.

```css
@font-face {
  font-family: 'ClientFont';
  src: url('/fonts/ClientFont-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
```

## Performance

| Tier | Total font budget | Files |
|------|-------------------|-------|
| Fast (Core Web Vitals) | < 100KB | 2-3 woff2 |
| Balanced | 100-200KB | 4-5 woff2 |
| Rich | 200-400KB | 6-8 woff2 |

Preload the primary weight:
```html
<link rel="preload" as="font" type="font/woff2" href="/fonts/primary.woff2" crossorigin>
```

Match fallback x-height to prevent CLS on swap:
```css
@font-face {
  font-family: 'ClientFont';
  src: url('/fonts/ClientFont.woff2') format('woff2');
  size-adjust: 107%; /* match Arial x-height */
}
```

## Anti-patterns

**More than 2 families** - use weight and style variations instead. A 300/400/800 weight range on one family creates as much hierarchy as two families with less complexity.

**Fixed pixel sizes** - always rem, always fluid. User preferences and zoom levels must be respected.

**700 weight for headings** - harsh at large sizes. 300-500 range with tight tracking reads as more sophisticated.

**Full character sets** - subset to Latin unless the client explicitly needs Cyrillic, CJK, etc.

**`@import` for fonts** - blocks rendering. Use `<link>` in `<head>` or `@font-face` in CSS loaded directly.

## Accessibility

- Contrast: 4.5:1 body text, 3:1 large text (24px+ or 18.5px+ bold)
- Text must resize to 200% without losing content
- Line spacing: at least 1.5x font size
- Prose max-width: 65ch is the sweet spot - never let lines run past 75ch

## Integration

- **useless**: owns the shared method (rhythm, fluid scale, element-first markup) and realness's settled values. This skill re-picks the values per client; element choice is type choice (`<time>`, `<blockquote>`, headings carry meaning before CSS).
- **user-interface**: readability and clarity when type and UX intersect.

From scott-fryxell/brayness, MIT.

More from scott-fryxell/brayness