Typography

Typography

This page describes fiscalclock's typefaces, type sizes, weights and line heights, the rules for setting numbers and dates, and how a site should load the fonts.

Last reviewed: 1 Nov 2026

What this is and why it matters

fiscalclock's output is dates, week numbers and period bounds, so the most important job of its type is to make figures easy to read and compare. All text uses two related typefaces, IBM Plex Sans for prose and interface and IBM Plex Mono for code, both under an open font licence. Sizes, weights and line heights come from design tokens so that every page and asset uses the same values. Design terms such as tabular figures and x-height are defined below and in the Design-Glossary.

Terms used on this page

Term	Meaning
typeface, face	A designed set of letters, such as IBM Plex Sans. A family groups related faces.
sans, mono	A sans-serif face has no small strokes at the ends of letters. A monospaced (mono) face gives every character the same width, as code editors do.
figures	The digits 0 to 9.
tabular figures	Digits that all have the same width, so numbers in a column line up. The opposite is proportional figures, where 1 is narrower than 0.
lining figures	Digits that all stand on the baseline at capital height. The opposite, old-style figures, rise and fall like lowercase letters.
x-height	The height of a lowercase x. Faces with a larger x-height look bigger at the same font size. Below it is given as a fraction of the font size ("x/em").
OpenType feature	A switch inside a font file that swaps glyphs, such as zero for a slashed zero or tnum for tabular figures. CSS turns them on with font-variant-numeric and related properties.
weight	How heavy the strokes are, as a number: 400 is regular, 600 is semibold.
rem	A CSS unit equal to the root font size: 16 px unless the reader changes it in the browser.

The typefaces

Role	Token	Typeface	Fallbacks, in order
Text and interface	font.family.sans	IBM Plex Sans	system-ui, -apple-system, Segoe UI, Roboto, sans-serif
Code, JSON definitions and command lines	font.family.mono	IBM Plex Mono	ui-monospace, SFMono-Regular, Menlo, Consolas, monospace

Both are published by IBM under the SIL Open Font License 1.1 (IBM Plex LICENSE.txt), which meets the owner's rule of open-licence fonts only (DD-010). The fallbacks are used only if the Plex files fail to load; their figures may not be tabular, which is why the number rule below is written in CSS as well.

Why IBM Plex

The owner chose brand direction C on 1 Nov 2026 and asked for it to be set in IBM Plex Sans and IBM Plex Mono instead of Inter and Commit Mono (DD-013). The typography research inspected 31 open-licence families with fontTools and rendered specimens of each. What it found for Plex:

• Tabular figures by default. Every digit in IBM Plex Sans is 600 units wide, and still 600 at weight 700. The face has no tnum or pnum feature, so its figures are tabular everywhere, prose included. A column of 2026-01-31 dates lines up with no CSS at all.
• I, l and 1 are distinct by default. I has serifs, l has a tail and 1 has a base, in both the sans and the mono, with no feature switched on. This matters for labels such as FY2026 Q1, W1 or P11.
• One x-height across the family. Plex Sans and Plex Mono share an x-height of 0.516 x/em, so code set inside a sentence does not look larger or smaller than the words around it.
• Coverage. Plex Sans covers all of Latin Extended-A, plus Greek and Cyrillic.
• Known costs. The sans has no proportional figures for prose and no case feature; the look is tied to IBM; and Plex is common enough that the logo and colour, not the type, have to carry the identity.

How the candidates compared

Values from the typography research, field table and finalists. "WOFF2" is the size of a Latin-only web-font file with every feature kept, a ceiling rather than what a site would ship.

Face	Default figures	I l 1 with no features on	Zero	x/em	WOFF2
IBM Plex Sans (chosen)	tabular	clear	plain; zero gives a slash	0.516	69.1 kB (variable, two axes)
Inter	proportional; needs tnum	I and l are near-identical bars; ss02 fixes it	plain; zero gives a slash	0.546	99.8 kB
Source Sans 3	tabular	I plain, l tailed; cv01 adds serifs to I	plain; zero gives a slash	0.478	47.2 kB
IBM Plex Mono (chosen)	fixed width	clear	dotted; zero gives a slash	0.516	32.1 kB (variable)
Commit Mono	fixed width	clear	slashed, with no zero feature	0.540	20.8 kB (one weight)
Source Code Pro	fixed width	clear	dotted; zero gives a slash	0.478	27.2 kB

Type scale

A type scale is the fixed set of sizes a design may use. Sizes are in rem so that text grows when a reader raises the browser's font size, as WCAG 2.2 success criterion 1.4.4 (resize text to 200 %) requires (accessibility research, section 5). Pixel values assume the default 16 px root.

Token	CSS custom property	rem	px	Used by
font.size.xs	--fc-font-size-xs	0.75rem	12	not used by a composite yet
font.size.sm	--fc-font-size-sm	0.875rem	14	type.small, type.code
font.size.md	--fc-font-size-md	1rem	16	type.body
font.size.lg	--fc-font-size-lg	1.125rem	18	not used by a composite yet
font.size.xl	--fc-font-size-xl	1.3125rem	21	type.heading-3
font.size.2xl	--fc-font-size-2xl	1.5rem	24	type.heading-2
font.size.3xl	--fc-font-size-3xl	2.25rem	36	type.heading-1
font.size.4xl	--fc-font-size-4xl	3rem	48	not used by a composite yet

The token file describes this as "a classical scale" of 12, 14, 16, 18, 21, 24, 36 and 48 px (primitives.tokens.json).

Weights

Token	CSS custom property	Value	Used for
font.weight.regular	--fc-font-weight-regular	400	Body, small text and code
font.weight.medium	--fc-font-weight-medium	500	Not used by a composite yet
font.weight.semibold	--fc-font-weight-semibold	600	Headings; also the wordmark (DD-022)

The variable versions of both faces cover weights 100 to 700 in one file, so these three weights need no extra downloads (typography research, finalists). Bold (700) is not in the scale.

Line heights

Line height is the distance from one line of text to the next, as a multiple of the font size.

Token	CSS custom property	Value	Used by
font.line-height.tight	--fc-font-line-height-tight	1.2	type.heading-1, type.heading-2
font.line-height.snug	--fc-font-line-height-snug	1.4	type.heading-3, type.small
font.line-height.body	--fc-font-line-height-body	1.6	type.body, type.code

Readers may override line height and letter spacing with their own style sheet; text containers must not have fixed heights that clip the text when they do (WCAG 2.2 success criterion 1.4.12).

Composite text styles

A composite token bundles a family, size, weight, line height and letter spacing into one named style. Use these instead of combining the parts by hand. In CSS each one becomes five variables, for example --fc-type-body-font-size (Design-Tokens).

Token	Family	Size	Weight	Line height	Letter spacing
type.heading-1	sans	font.size.3xl (36 px)	semibold (600)	1.2	0
type.heading-2	sans	font.size.2xl (24 px)	semibold (600)	1.2	0
type.heading-3	sans	font.size.xl (21 px)	semibold (600)	1.4	0
type.body	sans	font.size.md (16 px)	regular (400)	1.6	0
type.small	sans	font.size.sm (14 px)	regular (400)	1.4	0
type.code	mono	font.size.sm (14 px)	regular (400)	1.6	0

No style is defined for heading levels 4 to 6; whether they are needed is not decided.

Numbers and dates

Rule	Status	Source
Set font-variant-numeric: tabular-nums lining-nums wherever numbers or dates are read in columns or compared: tables, results, diagram labels and figures next to code.	Decided	DD-020
Write dates as ISO YYYY-MM-DD, for example 2026-01-31.	Rule	research brief, typography, domain-visuals research, shared rule 4
Never use old-style figures (oldstyle-nums) for data.	Rule	typography research, numbers rule 4
Set dates in tables in the sans face with tabular figures, not in the mono face; keep mono for code, JSON and terminal output.	Proposed	typography research, numbers rule 8
Add slashed-zero to data and identifiers.	Proposed, not decided	See below

Why the CSS rule is still needed with Plex: Plex Sans figures are already tabular and lining, so in Plex the rule changes nothing. It protects the fallback fonts, whose figures may be proportional (DD-020).

table, time, .date { font-variant-numeric: tabular-nums lining-nums; }

The slashed zero

A slashed zero has a stroke through it so that 0 cannot be read as the letter O. CSS asks for it with font-variant-numeric: slashed-zero, which turns on the font's zero feature; in a face without that feature it does nothing (typography research, numbers rule 3).

Face	Default zero	With slashed-zero
IBM Plex Sans	Plain; 0 and O differ only in width	Slashed (the face has zero)
IBM Plex Mono	Dotted, already distinct from O	Slashed (the face has zero)

Both faces have the feature, so the rule would work as intended. DD-020 does not include it, so whether to use it is open. The research proposed tabular-nums lining-nums slashed-zero for data; if adopted, test it in a browser on both faces before writing it into components.

Code text

• Use type.code (IBM Plex Mono, 14 px, regular, line height 1.6) for code blocks, JSON definitions and command lines.
• Colours come from color.code.text, color.code.keyword, color.code.string and color.code.comment on color.code.bg; every pair meets 4.5:1 in both themes (Colour-System).
• Mark code up as <pre><code> so its structure is available to assistive technology (accessibility research, section 5).
• Proposed: inline code inside a sentence keeps the surrounding font size. Plex Sans and Plex Mono share an x-height, so no size adjustment is needed to make them match.
• Code blocks are a component; see Docs-Components.

Line length

Line length (or measure) is how wide a column of running text may grow. The token layout.prose sets the maximum width of a text column to 720 px. The token's description says this is "about 70 characters of body text"; that has not been measured in a browser, because no site exists yet. The admired documentation sites use text columns of 650 to 860 px (peer analysis, layout and density). Layout-and-Spacing shows the column in the page layout.

Loading the fonts

No website stack has been chosen (DD-009), so there is no loading code yet. What is settled:

• Self-host the font files with the site, rather than loading them from a third-party font service.
• Ship the licence with the files. Condition 2 of the OFL lets the fonts be bundled and redistributed provided each copy contains the copyright notice and the licence (IBM Plex LICENSE.txt).
• Mind the reserved name. IBM reserves the font name "Plex". Condition 3 says a Modified Version may not use a reserved name without IBM's written permission, and the licence counts "changing formats" as a modification. Using IBM's own published web-font files unchanged avoids the question. Whether a site may subset or convert the files and still call them "IBM Plex" is an open question, not checked with IBM.
• Files. IBM's variable IBM Plex Mono release 1.0.0 (30 Jul 2026) includes a split Latin file of 32,576 bytes (IBM release, typography research). Which Plex Sans files to ship is not decided.
• Proposed: declare each face with @font-face under the exact family names the tokens use, "IBM Plex Sans" and "IBM Plex Mono", so that --fc-font-family-sans and --fc-font-family-mono pick them up without changes.

Not yet checked

• Rendering at 12 to 14 px, where small labels sit, and in the dark theme: the research rendered nothing smaller than 17 px and checked dark mode on one strip per face (typography research, not verified).
• Browser text shaping (HarfBuzz) on Windows and macOS: the specimens were rendered without it.
• The "about 70 characters" figure for layout.prose.

Links

• Design-System, Colour-System, Design-Tokens, Layout-and-Spacing, Voice-and-Writing, Docs-Components, Accessibility, Design-Glossary, Design-Decisions
• Research: design/research/typography.md, design/research-brief.md
• Tokens: design/tokens/primitives.tokens.json, design/tokens/generated/tokens.css
• Decision log: design/DECISIONS.md (DD-009, DD-010, DD-013, DD-020, DD-022)
• Fonts: IBM Plex repository, IBM Plex licence (SIL Open Font License 1.1)
• CSS: font-variant-numeric on MDN