# 06 · Typography

Three families, one job each: Accia Flare for display, CC Timeline Var Low for text, JetBrains Mono for meta. Tracking is a function of case rather than a matter of taste, and two of the three families cannot be redistributed.

*Updated 2026-08-15. Source: https://brand.haux.studio/typography*

## One job each, and no overlap

Pick the family by the job, not by the look. Three families is already one more than most identities need, so none of them may do a second job.

Display is uppercase, text is sentence case, meta is uppercase and monospaced.

Accia Flare does display, uppercase only, at -0.04em tracking and 0.9 leading. CC Timeline Var Low does text, sentence case, at +0.02em with the ss01 stylistic set on. JetBrains Mono does meta, uppercase, at -0.04em with the case feature on so the punctuation lifts to cap height.

The boundaries are the point. Display set in sentence case is not a variant, it is a mistake, and body copy set in the display face at 0.9 leading is unreadable by the second line.

## The three families

Rendered at real size from the same tokens the site uses, not screenshotted from a specimen sheet.

#### Display · Accia Flare

A flare serif, incised, with wedge terminals. Uppercase only, at 0.9 leading.

Accia Flare is set uppercase and nothing else. Leading is 0.9, which is tighter than the cap height and makes multi-line display type interlock as a block rather than read as separate lines. Tracking is -0.04em, tightening to -0.05em above about 120px.

##### Display specimens

| Role | Family | Size | Weight | Tracking | Leading | Usage |
| --- | --- | --- | --- | --- | --- | --- |
| Display XL | display | `clamp(3rem, 9vw, 8rem)` | 400 | `-0.05em` | `0.9` | Above about 120px the tracking tightens a further step, to -0.05em. This is the only size at which that applies. |
| Display L | display | `clamp(2.25rem, 5vw, 4rem)` | 400 | `-0.04em` | `0.9` | The default display setting: section openers and statements. |
| Display M | display | `clamp(1.5rem, 3vw, 2.25rem)` | 400 | `-0.04em` | `0.9` | The smallest permitted display setting. Below this the flare terminals stop reading and the text face is the better choice. |

*Accia Flare is not self-hosted. If these three lines are rendering in a serif fallback, the Type Network stylesheet has not been wired up yet, which is an open item recorded in the licensing block below.*

#### Text · CC Timeline

A low-contrast neo-grotesk. Sentence case, +0.02em, ss01 on.

CC Timeline carries everything that is read rather than scanned. It is set in sentence case at +0.02em, with the ss01 stylistic set on, and the positive tracking is not optional. The face is drawn tight enough that at default spacing it closes up on screen at body sizes.

##### Text specimens

| Role | Family | Size | Weight | Tracking | Leading | Usage |
| --- | --- | --- | --- | --- | --- | --- |
| Text Lead | text | `clamp(1.25rem, 2vw, 1.5rem)` | 300 | `0.02em` | `1.4` | One lead paragraph per module at most. |
| Text Body | text | `1.0625rem` | 400 | `0.02em` | `1.6` | The default. Everything that is read rather than scanned. |
| Text Small | text | `0.875rem` | 400 | `0.02em` | `1.5` | Notes and captions. The tracking does not change with size here. |

#### Meta · JetBrains Mono

Uppercase, -0.04em, case feature on. Labels, numbers and tokens.

JetBrains Mono handles meta: eyebrows, section numbers, token names, measured values. It is set uppercase at -0.04em with the case feature on, which raises punctuation and figures to suit the caps. It is the only one of the three families that is open source, and the only one that can be redistributed.

##### Meta specimens

| Role | Family | Size | Weight | Tracking | Leading | Usage |
| --- | --- | --- | --- | --- | --- | --- |
| Meta Label | mono | `0.75rem` | 500 | `-0.04em` | `1.2` | Eyebrows, section numbers, and anything that behaves as a tag. |
| Meta Data | mono | `0.75rem` | 400 | `-0.04em` | `1.4` | Values, tokens and measurements. Figures keep their own case, so the uppercase rule applies to labels rather than to data. |

*Mono is deliberately not preloaded. It sits below the fold in most modules, and preloading a third family competes for bandwidth with the largest image on the page.*

The sizes on those specimens are illustrative. The source specifies case, tracking and leading per family, and it does not specify a numbered type scale, so the steps shown here are the ones this site uses rather than a published scale. Fixing a scale is an open decision, listed at the foot of this page.

## Tracking is a function of case

Set the case first and the tracking follows from it. This is the rule that stops the two faces drifting towards each other.

Uppercase runs negative. Sentence case runs positive.

Capitals are drawn with more sidebearing than they need when set as a run, so uppercase settings close up: -0.04em for both display and meta. Lowercase running text has the opposite problem at screen sizes, so text opens out to +0.02em. There is no case in the system where a sentence-case setting takes negative tracking.

Uppercase also tightens as it grows. Above about 120px, display moves to -0.05em, because the same optical gap that needs opening at 16px needs closing at 120px.

### An unresolved conflict: -0.04em or -0.06em

The artwork sets Accia at -0.04em. The internal spec slide says -0.06em. Those are not close enough to treat as the same value, and the difference is visible in a headline of any length.

This page states -0.04em because that is what the artwork does, which makes it the value that has actually been seen and approved. It needs resolving properly rather than settling by whichever document was opened last.

## One file, six named instances

A variable body face is an unusual choice, so it is worth showing what it buys.

CC Timeline Var Low is a genuine variable font with a weight axis running 300 to 800. One 83 KB file replaces six static cuts, which would otherwise be six separate requests and roughly six times the bytes for the same coverage. The named instances run Light through ExtraBold.

The practical gain is that intermediate weights are free. A label that needs to sit between Medium and SemiBold can, without adding a file to the build.

### The weight axis, 300 to 800

| Role | Family | Size | Weight | Tracking | Leading | Usage |
| --- | --- | --- | --- | --- | --- | --- |
| CC Timeline Light | text | `clamp(1.125rem, 2.2vw, 1.625rem)` | 300 | `0.02em` | `1.3` |  |
| CC Timeline Regular | text | `clamp(1.125rem, 2.2vw, 1.625rem)` | 400 | `0.02em` | `1.3` |  |
| CC Timeline Medium | text | `clamp(1.125rem, 2.2vw, 1.625rem)` | 500 | `0.02em` | `1.3` |  |
| CC Timeline SemiBold | text | `clamp(1.125rem, 2.2vw, 1.625rem)` | 600 | `0.02em` | `1.3` |  |
| CC Timeline Bold | text | `clamp(1.125rem, 2.2vw, 1.625rem)` | 700 | `0.02em` | `1.3` |  |
| CC Timeline ExtraBold | text | `clamp(1.125rem, 2.2vw, 1.625rem)` | 800 | `0.02em` | `1.3` |  |

*Each line is the same file at a different point on the axis. Nothing here is a separate font.*

## Heraldry rendered in a systems typeface

The two faces are chosen against each other, and the tension between them is the same one the logo resolves.

### Accia Flare does the griffin’s job

It is a flare serif: incised, with wedge terminals rather than bracketed slabs. That is carved lettering, and it reads as heraldic before anybody has read a word of it. It carries the same ancient half of the positioning that the griffin carries in the logo.

### CC Timeline does the geometry’s job

It is a low-contrast neo-grotesk, drawn for screens and quietly technical. It makes no claim to history at all. That is the modern half, and it is what the griffin reduces into.

> Heraldry, rendered in a systems typeface.
>
> — Which is the same sentence as ancient precision, modern speed.

## Two of the three families cannot be redistributed

Read this before adding a font to a template, a download or a client handover. The constraints are contractual, not preferences.

### Accia Flare: hosted webfont only

The licence covers web use only as a Type Network hosted webfont, and clause 5A forbids converting the supplied OTF. Accia therefore cannot be self-hosted, cannot be converted to WOFF2, and is loaded from Type Network’s CDN through a stylesheet link in the root layout. It does not go through next/font, and it never will.

Their hosted fonts are domain-locked, so every origin that serves the site has to be listed in the Type Network dashboard, preview domains included. An unlisted origin does not error, it silently falls back, so a preview deploy can render every heading in Times without anyone noticing.

*The project stylesheet URL is not wired up yet: ACCIA_STYLESHEET_URL in src/styles/fonts.ts is still null. Until it is set, display type on this site renders in the fallback stack.*

### CC Timeline: self-hosted, served exactly as supplied

CCType permits self-hosting, on the condition that the supplied WOFF2 is served as it was delivered. It must not be subsetted, converted or rebuilt, which rules out the usual optimisation of stripping unused glyphs. The file stays in the repository, and the repository stays private while it does.

### JetBrains Mono: SIL Open Font License

JetBrains Mono is under the SIL Open Font License. It can be hosted, embedded and passed on freely, provided the licence travels with it. It is the only one of the three that can be handed to anyone outside the studio.

### Consequence: the Downloads section cannot host either font

Neither Accia Flare nor CC Timeline may be offered as a public download, and that follows directly from the two licences above rather than from caution. Anyone outside the studio who needs to set Haux type needs their own licence, or a PDF and outlined artwork. Only JetBrains Mono can be distributed.

*This constrains section 14. Any download listing that includes an OTF or WOFF2 of the display or text face is a licence breach, not a broken link.*

## Two things this section cannot yet settle

Written as gaps rather than filled in, so nobody cites a rule that was never made.

### The Accia tracking value

Artwork says -0.04em, the internal spec slide says -0.06em, and the two have never been reconciled. This page follows the artwork as the more likely intent, but the decision is not made. Whichever value wins, the losing document has to be corrected rather than left to be found later.

### The type scale itself

The source defines case, tracking and leading per family, and stops there. There is no numbered scale, no step ratio and no minimum text size, so the specimens above show the sizes this site happens to use. A scale needs setting before the system is applied to anything denser than a web page.

*Both need a decision recorded in the source before they become rules here.*