Foundations

Typography

Archivo, a variable sans, and DM Mono; Chinese text uses the system fonts.

Typefaces

Latin text is set in Archivo, a sans serif that varies in width from 62 to 125 and in weight from 100 to 900. Numbers and codes use DM Mono. Both are licensed under the SIL OFL and served from apps/web/public/fonts/, Latin characters only. Chinese text loads no web font and falls back through the system fonts: PingFang SC, Hiragino Sans GB, Noto Sans CJK SC and Microsoft YaHei.

Archivo--font-sans

DM Mono--font-mono

Weights

International film festivals100

International film festivals300

International film festivals400

International film festivals500

International film festivals600

International film festivals700

International film festivals900

Widths

font-stretch runs from 62% to 125%. The site uses only the default 100% so far; the narrow widths would suit long titles on posters and banners.

The Handmaiden62%

The Handmaiden75%

The Handmaiden100%

The Handmaiden112%

The Handmaiden125%

Sizes

The base size is 15px with a line height of 1.5. Headings are all weight 500 with letter spacing tightened by 1%, and size alone sets their rank; the one heavy title is Display at 900. Pages take their sizes from these steps.

Display50px, 900DisplayTitle: Feed, Screenings, Search, the festival directory

Festival directory

Page title35px, 500h1: PageHeading and film titles, 27px for film titles on phones

Possible Love

Section18px, 500SectionHeader and h3; a plain h2 is 22px

Usage

Small interface text is never set in capitals or small caps. Rank comes from size, weight and color.
Archivo’s @font-face covers Latin characters only. Where Chinese falls back to a system font the weights differ, so check mixed-script titles in both languages.
Numbers compared side by side take font-variant-numeric: tabular-nums, as Stats and count badges do.