Space Mono
Colophon Foundry, 2016
400 · 700 · ITALICS — DEFAULT FACE
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
TYPOGRAPHY
When type is all you have, type is everything. Six monospace faces, one modular scale, and the quiet rules — weight, tracking, leading, measure — that make text speak.
01 — The roster
MONO stays monospace, but monospace is not one voice. Each face below ships with the system; switch between them with a single CSS variable, or try them live in the customizer.
JetBrains Mono
JetBrains, 2020
VARIABLE 100–800 · ITALICS
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
IBM Plex Mono
Bold Monday for IBM, 2017
400 · 700 · ITALICS
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Fragment Mono
Wei Huang, 2022
400 · ITALIC — A HELVETICA FOR CODE
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Courier Prime
Alan Dague-Greene, 2013
400 · 700 · ITALICS — THE SCREENPLAY FACE
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Spline Sans Mono
SHK & Google Fonts, 2022
VARIABLE 300–700 · ITALICS
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
02 — Type scale
A modular scale: base 1rem, ratio 1.25 (a major third). Every size on the site is one of these steps — nothing in between. The customizer recomputes the whole scale from any base and ratio you choose.
step -2
0.64rem
Footnotes and fine print
step -1
0.8rem
Captions, labels, metadata
step 0
1rem
Body text, the baseline
step 1
1.25rem
Lead paragraphs
step 2
1.563rem
Minor headings
step 3
1.953rem
Section headings
step 4
2.441rem
Page headings
step 5
3.052rem
Statements
step 6
3.815rem
Display
step 7
4.768rem
Hero
03 — Weight & style
regular / 400
Speak plainly.
bold / 700
Speak firmly.
italic
Speak softly.
underline
Speak
pointedly.
muted / gray-500
Speak quietly.
04 — Tracking
-0.05em
COMPRESSION
0em
NEUTRALITY
0.12em
EMPHASIS
0.3em
AIRINESS
Wide tracking is reserved for short, uppercase labels — never body
text. The system token is --tracking-wide: 0.12em.
05 — Leading
1.2 — tight, for headings
Lines set close together read as a single object. Use tight leading for display type and headings, where the words form a shape.
1.6 — default, for body
Lines set with room to breathe read as a sequence. The system default of 1.6 keeps long passages calm and scannable.
2.0 — open, for emphasis
Lines set far apart read as separate thoughts. Open leading slows the reader down — use it sparingly and on purpose.
06 — Measure
left-aligned, 65ch
A comfortable line holds forty-five to seventy-five characters.
MONO sets prose at a maximum of sixty-five — the
--measure token — so the
eye never loses its way back to the left edge. Ragged-right is
the default: it keeps word spacing even and honest.
justified, 65ch
Justified text trades even word spacing for clean edges on both sides. In a monospace face the trade is steep — the grid of the letters fights the stretch of the spaces — so MONO justifies only when the design calls for a hard rectangular block.
Set your own scale.
Pick a face, a base size, and a ratio — watch the whole system recompose, then copy the tokens home.
Open the customizer