§ 02Foundations

i

Sans

Quattro

iA Writer Quattro

A duospaced sans drawn by iA — the makers of iA Writer — for the act of writing. Most letters are proportional; the narrow few (i, l, t) were widened until they read with the rhythm of a monospace.

Distinctive i · l · t

illit & 0123

Quattro's i, l and t are wider than they would be in a typical sans — close to monospace widths.

Variable · weight 100—900

100Hello, type.

300Hello, type.

500Hello, type.

700Hello, type.

900Hello, type.

ii

Serif

Newsreader

An editorial serif by Production Type, drawn for digital long-form reading. Newsreader's defining feature is its optical-size axis — a single file that behaves correctly from a footnote at 8 px to a masthead at 72 px.

Distinctive · opsz 6—72

8Small caption · sturdy serifs.

14Body · calm and balanced.

36Heading register

60Display

A single file. The drawing changes at every size — thinner serifs at display, sturdier at caption.

Variable · weight 200—800

200Reading.

400Reading.

600Reading.

800Reading.

iii

Mono

Commit

Commit Mono

A programmer's monospace by Eigil Nikolajsen. Built for code: tall x-height, disambiguated letterforms, and a bank of stylistic alternates you can configure at commitmono.com and download as a custom build.

Distinctive · alternates ss03 · ss04 · ss05

ss03 ·illuminate · file

ss03 ✓illuminate · file

ss04 ·geography · log

ss04 ✓geography · log

ss05 ·-> => != >= ===

ss05 ✓-> => != >= ===

ss03 (i/l) and ss04 (g) on by default; ss05 (ligatures) opt-in.

Variable · weight 200—700

200true === true

350true === true

500true === true

700true === true

§ 03The scale

Modular scale17 × 1.25ⁿ

Every line-height is a whole number of grid units of 4 px. The base sits at 17/28 — the size at which Newsreader reads with the calm of a printed book. Sizes above and below relate by a major third, with intermediates where legibility asks for them.

.t-display

Three voices

52 / 56 · w 600 · −0.040 · ×1.25⁵ · 14 u

.t-title

A title set in sans

36 / 40 · w 600 · −0.030 · ×1.25³ · 10 u

.t-heading

A section heading

28 / 36 · w 550 · −0.022 · ×1.25² · 9 u

.t-subheading

A subsection heading

21 / 28 · w 550 · −0.005 · ×1.25¹ · 7 u

.t-lede

A lede in serif italic.

21 / 32 · w 380 · −0.003 · ×1.25¹ · 8 u

.t-prose← base

Long-form prose set in serif. Calm enough to disappear into.

17 / 28 · w 400 · 0 · ×1.25⁰ · 7 u

.t-body

Body text for UI surfaces — labels, paragraphs, helper text.

15 / 24 · w 450 · 0 · — · 6 u

.t-caption

Caption · helper text · timestamps

13 / 20 · w 500 · 0.005 · ×1.25⁻¹ · 5 u

.t-micro

Micro · eyebrow · stamps

11 / 16 · w 500 · 0.10 · ×1.25⁻² · 4 u

.t-code

const x = compute(42);

13 / 20 · w 400 · 0 · — · 5 u

.t-kbd

⌘ K

12 / 16 · w 500 · 0 · — · 4 u

.t-tabular

$1,234.56 · −0.83 % · 2026‑05‑08

13 / 20 · w 450 · 0 · — · 5 u

§ 04In motion

Notes · No. 04 · 8 May 2026

The third voice

The MY-Type team 7 minute read

Most digital design systems pick a side: everything in sans, or everything in mono. Both work. Both leave something on the table — the long, slow read.

There are three jobs that text does on a screen, and asking one face to do all of them is asking too much. The interface needs to be scanned in fragments — labels, captions, helper text. The article needs to be read across long stretches without making the eye tired. The code needs to be unambiguous: a 0 should never look like an O, a column of figures should line up without negotiation.

The argument against serifs in product UI used to be technical. Modern variable serifs ship with optical-size axes that make a single file behave correctly from 8-px footnote to 96-px masthead. Newsreader has a wght axis from 200 to 800 and an opsz axis from 6 to 72.

A system with one voice instructs. A system with three voices reasons, structures, and reads. — from the system spec

What changes once a serif joins is not where sans gets used; it is how. Sans now does what sans is best at — structure, hierarchy, navigation — and stops trying to also be the voice for a 1,200-word piece. The serif takes that job. The reader settles in.

The system routes text to face by role, not element. The same <p> tag lands on a different face depending on context — serif inside a long-form article, sans inside a UI surface, mono inside a code block. The routing is the system's quietest discipline.

Footnotes

Modular scales after Robert Bringhurst, The Elements of Typographic Style, Hartley & Marks, 1992.
iA Writer Quattro, Newsreader, and Commit Mono are released under the SIL Open Font License.

§ 05How to use

A single CSS file. Drop it into the head, write semantic HTML, and the system does the routing. Five short snippets — pulled from the actual typography.css.

1. Include in your <head> html

<link rel="stylesheet" href="typography.css">
<link rel="stylesheet" href="patterns.css">  // optional patterns

2. The tokens — a peek inside typography.css typography.css · :root

/* Three families, each in its own register */
:root {
  --font-sans:  "Sans", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Serif", Charter, Georgia, serif;
  --font-mono:  "Mono", ui-monospace, Menlo, monospace;

  /* Twelve roles, derived from base 17 px × ratio 1.250 */
  --t-display-family:  var(--font-sans);
  --t-display-size:    52px;
  --t-display-line:    56px;
  --t-display-weight:  600;

  --t-prose-family:    var(--font-serif);
  --t-prose-size:      17px;
  --t-prose-line:      28px;
  --t-prose-opsz:      14;

  /* …and ten more */
}

3. Apply with utility classes html

<h1 class="t-title">A page title</h1>
<p  class="t-lede">An italic-serif lede.</p>
<p  class="t-prose">Long-form prose set in serif.</p>
<span class="t-tabular">$1,234.56</span>
<kbd class="t-kbd">⌘ K</kbd>

// or just use semantic HTML — element defaults are wired
<h1>Page title</h1>
<p>Body paragraph</p>
<code>inline code</code>

4. Read a token in your own CSS your.css

.my-component {
  font-family:           var(--t-display-family);
  font-size:             var(--t-display-size);
  line-height:           var(--t-display-line);
  font-variation-settings: "wght" var(--t-display-weight);
  letter-spacing:        var(--t-display-tracking);
}

5. Override at root for any project your.css

:root {
  /* swap the neutral defaults for a brand palette */
  --paper:  #f8f4ec;   // cream
  --ink:    #1a1814;   // warm dark
  --muted:  #6c685e;

  /* tighten leading for a denser product UI */
  --t-body-line:  20px;
  --t-prose-size: 18px;

  /* or remap a role to a different family */
  --t-prose-family: var(--font-sans);  // sans body in product
}

§ 06Credit

I — Sans

iA Writer Quattro

By iA · SIL OFL 1.1
Released as part of the iA Fonts family.

Get on GitHub→

II — Serif

Newsreader

By Production Type · SIL OFL 1.1
Editorial serif drawn for digital long-form reading.

Get on GitHub→

III — Mono

Commit Mono

By Eigil Nikolajsen · SIL OFL 1.1
v1.43 — customisable at commitmono.com.

Get at commitmono.com→

ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz 0123456789.,; !?@#$%&*+-=/\

Glyphs	Aa Bb · 0123 · &?@
Family	iA Writer Quattro
Class	Sans, duospaced
Axes	wght 100—900
Styles	Upright + italic
Format	TTF Variable
Designer	iA
Licence	SIL OFL 1.1
Source	github.com/iaolo

Glyphs	Aa Bb · 0123 · &?@
Family	Newsreader
Class	Serif, editorial
Axes	wght 200—800 · opsz 6—72
Styles	Upright + italic
Format	WOFF2 Variable
Designer	Production Type
Licence	SIL OFL 1.1
Source	github.com/productiontype

Glyphs	Aa Bb · 0123 · &?@
Family	Commit Mono v1.43
Class	Monospace
Axes	wght 200—700
Styles	Upright (variable) · italic (static)
Format	WOFF2 + TTF
Designer	Eigil Nikolajsen
Licence	SIL OFL 1.1
Source	github.com/eigilnikolajsen

A typographic system in three voices.

iA Writer Quattro

Newsreader

Commit Mono

The third voice

iA Writer Quattro

Newsreader

Commit Mono