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.
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.
One job each, and no overlap
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.
Rendered at real size from the same tokens the site uses, not screenshotted from a specimen sheet.
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
Ancient precision
- Role
- Display XL
- Size
- clamp(3rem, 9vw, 8rem)
- Weight
- 400
- Tracking
- -0.05em
- Leading
- 0.9
Above about 120px the tracking tightens a further step, to -0.05em. This is the only size at which that applies.
Modern speed
- Role
- Display L
- Size
- clamp(2.25rem, 5vw, 4rem)
- Weight
- 400
- Tracking
- -0.04em
- Leading
- 0.9
The default display setting: section openers and statements.
Heraldry, rendered in a systems typeface
- Role
- Display M
- Size
- clamp(1.5rem, 3vw, 2.25rem)
- Weight
- 400
- Tracking
- -0.04em
- Leading
- 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.
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
A low-contrast neo-grotesk, screen-native and quietly technical, carrying the running text.
- Role
- Text Lead
- Size
- clamp(1.25rem, 2vw, 1.5rem)
- Weight
- 300
- Tracking
- 0.02em
- Leading
- 1.4
One lead paragraph per module at most.
Sentence case, positive tracking, and the ss01 stylistic set on. Body text is set at 400 and never at the display tracking.
- Role
- Text Body
- Size
- 1.0625rem
- Weight
- 400
- Tracking
- 0.02em
- Leading
- 1.6
The default. Everything that is read rather than scanned.
Notes, captions and small print sit at the same tracking.
- Role
- Text Small
- Size
- 0.875rem
- Weight
- 400
- Tracking
- 0.02em
- Leading
- 1.5
Notes and captions. The tracking does not change with size here.
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
Section 06 · Typography
- Role
- Meta Label
- Size
- 0.75rem
- Weight
- 500
- Tracking
- -0.04em
- Leading
- 1.2
Eyebrows, section numbers, and anything that behaves as a tag.
tan(12°) = 0.212554
- Role
- Meta Data
- Size
- 0.75rem
- Weight
- 400
- Tracking
- -0.04em
- Leading
- 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.
Set the case first and the tracking follows from it. This is the rule that stops the two faces drifting towards each other.
Tracking is a function of case
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.
A variable body face is an unusual choice, so it is worth showing what it buys.
One file, six named instances
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
Light 300. An ancient beast reduced to geometry.
- Role
- CC Timeline Light
- Size
- clamp(1.125rem, 2.2vw, 1.625rem)
- Weight
- 300
- Tracking
- 0.02em
- Leading
- 1.3
Regular 400. An ancient beast reduced to geometry.
- Role
- CC Timeline Regular
- Size
- clamp(1.125rem, 2.2vw, 1.625rem)
- Weight
- 400
- Tracking
- 0.02em
- Leading
- 1.3
Medium 500. An ancient beast reduced to geometry.
- Role
- CC Timeline Medium
- Size
- clamp(1.125rem, 2.2vw, 1.625rem)
- Weight
- 500
- Tracking
- 0.02em
- Leading
- 1.3
SemiBold 600. An ancient beast reduced to geometry.
- Role
- CC Timeline SemiBold
- Size
- clamp(1.125rem, 2.2vw, 1.625rem)
- Weight
- 600
- Tracking
- 0.02em
- Leading
- 1.3
Bold 700. An ancient beast reduced to geometry.
- Role
- CC Timeline Bold
- Size
- clamp(1.125rem, 2.2vw, 1.625rem)
- Weight
- 700
- Tracking
- 0.02em
- Leading
- 1.3
ExtraBold 800. An ancient beast reduced to geometry.
- Role
- CC Timeline ExtraBold
- Size
- clamp(1.125rem, 2.2vw, 1.625rem)
- Weight
- 800
- Tracking
- 0.02em
- Leading
- 1.3
Each line is the same file at a different point on the axis. Nothing here is a separate font.
The two faces are chosen against each other, and the tension between them is the same one the logo resolves.
Heraldry rendered in a systems typeface
Heraldry, rendered in a systems typeface.
Which is the same sentence as ancient precision, modern speed.
Read this before adding a font to a template, a download or a client handover. The constraints are contractual, not preferences.
Two of the three families cannot be redistributed
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.
Written as gaps rather than filled in, so nobody cites a rule that was never made.
Two things this section cannot yet settle
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.