Appearance
Typography
The FastTrack type system uses two font families and a consistent scale from headline to caption. All values are defined as CSS custom properties in public/assets/styles/typography.css.
Font Families
Font Families
Inter — The quick brown fox jumps over the lazy dog
Noto Sans Mono — 0123456789
css
font-family: var(--font-primary); /* Inter */
font-family: var(--font-monospaced); /* Noto Sans Mono */font-family: var(--font-primary); /* Inter */
font-family: var(--font-monospaced); /* Noto Sans Mono */Type Scale
Each level is shown at its actual rendered size.
Type Scale
Headline
Section
Heading
Title
Sub-title
Sub-title Bold
Body — default body text, form labels
Body Bold — emphasised body text
CTA — call-to-action buttons, action links
Note — helper text, metadata, footnotes
Caption — table column headers, labels, fine print
Reference Table
| Level | Size | Line Height | Weight | Letter Spacing | CSS Variables |
|---|---|---|---|---|---|
| Headline | 120px | 124px | 700 | -0.2px | --headline-font-size, --headline-line-height, --headline-font-weight, --headline-letter-spacing |
| Section | 72px | 76px | 700 | -0.2px | --section-font-size, --section-line-height, --section-font-weight, --section-letter-spacing |
| Heading | 38px | 45px | 700 | -0.2px | --heading-font-size, --heading-line-height, --heading-font-weight, --heading-letter-spacing |
| Title | 20px | 25px | 700 | — | --title-font-size, --title-line-height, --title-font-weight |
| Sub-title | 16px | 23px | 400 | — | --sub-title-font-size, --sub-title-line-height, --sub-title-font-weight |
| Sub-title Bold | 16px | 23px | 700 | — | --sub-title-bold-font-size, --sub-title-bold-line-height, --sub-title-bold-font-weight |
| Body | 14px | 17px | 400 | — | --body-font-size, --body-line-height, --body-font-weight |
| Body Bold | 14px | 17px | 700 | — | --body-bold-font-size, --body-bold-line-height, --body-bold-font-weight |
| CTA | 12px | — | 700 | — | --cta-font-size, --cta-font-weight |
| Note | 12px | — | 400 | — | --note-font-size, --note-font-weight |
| Note Bold | 12px | — | 700 | — | --note-bold-font-size, --note-bold-font-weight |
| Caption | 10px | 12px | 700 | 0.4px | --caption-font-size, --caption-line-height, --caption-font-weight, --caption-letter-spacing |
Font Weights
| Weight | Value | CSS Variable |
|---|---|---|
| Regular | 400 | --font-weight-regular |
| Bold | 700 | --font-weight-bold |
Usage Guidelines
css
.page-title {
font-size: var(--heading-font-size);
line-height: var(--heading-line-height);
font-weight: var(--heading-font-weight);
letter-spacing: var(--heading-letter-spacing);
}
.body-text {
font-size: var(--body-font-size);
line-height: var(--body-line-height);
font-weight: var(--body-font-weight);
}.page-title {
font-size: var(--heading-font-size);
line-height: var(--heading-line-height);
font-weight: var(--heading-font-weight);
letter-spacing: var(--heading-letter-spacing);
}
.body-text {
font-size: var(--body-font-size);
line-height: var(--body-line-height);
font-weight: var(--body-font-weight);
}- Headline / Section — hero banners, marketing pages. Rarely used in app UI.
- Heading — page titles, primary headings.
- Title — card headers, subsection titles.
- Sub-title — secondary headings, list headers.
- Body — default text for all UI content.
- CTA — button labels, action links.
- Note — helper text, metadata, footnotes.
- Caption — table column headers, labels, overlines.