# Type

Two families and one law. Everything here is copied from `assets/brand.css` on
archbotics.com, which is what shipped. Both faces ship in `fonts/` with their licences.

## The two families

**Schibsted Grotesk** (SIL Open Font Licence 1.1, variable, weight axis 400 to 700) for
display and prose. Chosen because it has a voice at poster size, the round a and the cut
terminals, without being a novelty face, and because it is Scandinavian by origin.

**Geist Mono** (SIL Open Font Licence 1.1, variable, weight axis 400 to 600) for the label
voice only. Never for prose.

The files here are subsets carrying Latin plus the Finnish diacritics. If you need a
character they do not have, take the full family from its upstream project rather than
substituting a different face.

Fallback stacks, for surfaces that cannot carry a webfont such as email:

    --sans:  "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
    --label: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace

## The inverse tracking law

Tight at display size, zero at body size, wide at the label layer. This is the single rule
that makes the typography recognisable, and it is the one thing not to improvise on.

## The scale

Sizes are fluid between a 390 px phone and a 1440 px desktop. The clamp is the token; the
two numbers after it are what the clamp actually resolves to at the ends of that range.

| Role | Token | Resolves to | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display, h1 | `--fs-hero` `clamp(2.5rem, 1.2rem + 5.4vw, 5.5rem)` | 40 px to 88 px | 700 | 1.02 | -0.035em |
| Section, h2 | `--fs-h2` `clamp(1.75rem, 1rem + 2.6vw, 3.25rem)` | 28 px to 52 px | 700 | 1.08 | -0.025em |
| Sub, h3 | `--fs-h3` `clamp(1.125rem, 1rem + .5vw, 1.375rem)` | 18 px to 22 px | 600 | 1.2 | -0.01em |
| Lede | `--fs-lede` `clamp(1.0625rem, 1rem + .45vw, 1.3125rem)` | 17 px to 21 px | 400 | 1.55 | 0 |
| Body | `--fs-body` `1rem` | 16 px | 400 | 1.6 | 0 |
| Label | `--fs-label` `.75rem` | 12 px | 500 | 1.4 | +0.14em |

Measure: prose caps at 62ch, a lede at 34em. Headings set `text-wrap: balance`.

## The label voice

Every piece of chrome and no prose: eyebrows, navigation, buttons, captions, index numbers,
metadata, the fine print under a price. Geist Mono at 12 px, weight 500, uppercase, +0.14em
tracking, in the mute or the dim step of the ground.

Two details that are easy to lose and expensive to lose:

- **Line height 1.4 and `overflow: visible`.** Ä, Ö and Å need the room. A tighter line box
  clips their dots, and half of the words on the Finnish surfaces carry them.
- **Buttons ship at +0.12em, not +0.14em.** The button is the one member of the label layer
  with its own tracking, because the button text sits inside a box and reads tighter.

## Setting the wordmark

The wordmark is type, not a drawing. It is the word set in Schibsted Grotesk 700 at
letter-spacing -0.03em, and the lockup files in `logo/` are that setting converted to
outlines so the files travel to machines without the font. If you have the font, set it live
rather than scaling an outline.

Geometry of the lockup, expressed in the mark's own 64-unit grid, which is what
`src/make-lockups.py` reads out of the CSS:

| Quantity | CSS | In mark units |
|---|---|---|
| Mark box | `1.5rem` | 64 |
| Word size | `1.25rem` | 53.333 |
| Gap, mark to word, and word to product word | `.55rem` | 23.467 |
| Tracking | `-.03em` | -1.6 per character |
| Baseline below the box top | line box centred, typo metrics | 51.167 |

The gap between the two words of a product lockup is the same 23.467 units, which is 2.4
times the width of a space in this face. Setting the lockup with a space character makes it
noticeably tighter than the one that shipped.

## What not to do

- No third family. If a surface needs a face these two cannot give, the answer is a different
  surface, not a third face.
- No webfont link. `tietosuoja.html` promises a visitor's browser contacts nobody but us, so
  every face is served from our own origin.
- No prose in the mono. It is the label voice and it stops at 12 px chrome.
- No faux weights. The variable axes are 400 to 700 and 400 to 600. Nothing outside them.