# type-bold — the "modern · bold · no-nonsense" voice

A drop-in **second typographic voice** for gf.cx surfaces. The default
portfolio voice is warm + editorial (Atkinson Hyperlegible + a Newsreader
serif-italic accent). `type-bold` is the opposite register: flat, confident,
product-grade — for client-handoff and spec surfaces (**project.gf**) that
should read like a modern product, not a letterpress page.

**Live:** <https://assets.gf.cx/type-bold/> · **Source file:**
`type-bold.css`

## Typefaces

| Role | Face | Weights used | License |
|------|------|--------------|---------|
| Display / headings / accent | **Outfit** | 500 600 700 800 900 | SIL OFL 1.1 |
| Body / UI / lede | **Inter** | 400 500 600 700 | SIL OFL 1.1 |

Both are open-licensed and loaded from Google Fonts. This stylesheet sets **no
`@font-face`** — it only names the stacks, so you load the fonts yourself (and
can swap in a self-hosted/`/cf-fonts` copy later without touching this file).

## Use

```html
<!-- 1. Load the fonts (Outfit + Inter, OFL) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700;800;900&display=swap" rel="stylesheet">

<!-- 2. Load type-bold AFTER page-header.css so its token overrides win -->
<link rel="stylesheet" href="https://assets.gf.cx/page-header/page-header.css">
<link rel="stylesheet" href="https://assets.gf.cx/type-bold/type-bold.css">
```

Two adoption paths:

1. **Whole-surface voice** — just add the link. The `:root` token overrides
   (`--sans` → Inter, `--serif` → Outfit) plus the element rules restyle the
   entire page, and every shelf that reads the shared tokens (page-header,
   cards, status-pill…) follows automatically.
2. **Scoped pocket** — add `class="type-bold"` to a wrapper to apply the voice
   to one region only. Everything is mirrored under `.type-bold`.

## What it ships

- A **1.125 modular scale** (`--tb-step--2` … `--tb-step-8`) + a fluid
  `--tb-hero` clamp — honest to the MWS reference's scale.
- **Headings** in Outfit, heavy and tight (`h1` 800 / lh 1.06, `h2`–`h4`
  700→600, negative tracking, `text-wrap: balance`).
- **Accent word** (`<em>` inside a heading) rendered as Outfit **900** in
  `--accent` — overriding page-header's serif-italic accent for this voice.
- **`.eyebrow` / `.t-label`** — the MWS uppercase, letter-spaced micro-label.
- **`.lede`** — one step up, softened colour, Inter.
- **`.t-num`** + tables → tabular lining numerals (Brie's data columns).
- **`ol.t-steps`** — opt-in editorial numbered rail with heavy
  `decimal-leading-zero` indices (Brie's numbered sections).

The host's `--bg` / `--ink` / `--ink-soft` / `--accent` / `--mono` are left
untouched — this is a **type** system, not a palette. It inherits whatever
colour tokens the surface already defines.

## Provenance

Distilled 2026-10-13 from two sites Dan flagged as right for project.gf
(*"modern, bold, and no-nonsense"*):

- **mwshvacservices.com/hrv-vs-erv-ontario** — Outfit display, the 1.125 scale,
  tight heading leading, uppercase letter-spaced labels.
- **briewolfson.com** — Inter body, the generous measure, editorial numbered
  sections + tabular numerals.

Only **type and structure** were studied — no branded content, colour, or
copy was copied. Both reference links are logged in the
[links tracker](https://kb.gf.cx/reference_links_tracker/).

Pattern doc: <https://patterns.gf.cx/bold-no-nonsense-type/>

## Changelog

- **v0.1.0** · 2026-10-13 — first cut. Outfit + Inter, 1.125 scale, eyebrow /
  lede / t-steps / t-num helpers.