BRAND INDEX
WCNWCNTYPOGRAPHY MAP
← VISUAL IDENTITY03 · VISUAL → C
Typography · C
How WCN reads.
Six topics — from the three Latin voices to bilingual setting in 中文. A serif that thinks, a sans that works, a mono that records. Tap any card to open the source.
AaEB GARAMOND · DISPLAY
AaARCHIVO · BODY
AaJETBRAINS MONO · LABEL
NOTO SC · 中文
100%
SYSTEM DEFINED
Type system shipped
6 topics mapped
6 detail pages, live
03C01 Typefaces PLANNED
WCN speaks in four typefaces — a serif that thinks, a sans that works, a mono that records, and Noto for 中文. Each has one job, and all four are open-licensed.
DISPLAYEB Garamond BODYArchivo CODEJetBrains Mono 中文Noto Serif / Sans SC
Aa
GARAMOND
Aa
ARCHIVO
Aa
MONO
NOTO SC
C01.1 · EB GARAMOND
The thinking voice.
EB Garamond carries headlines, pull-quotes and anything that should feel considered. It is the brand at its most human — warm, literary, never corporate.
ROLEDisplay · quotes
WEIGHTS400 / 500 / 600
ITALICYes · emphasis
LICENCEOFL · open
C01.2 · ARCHIVO
The working voice.
Archivo does the daily labour — body copy, UI, tables. A grotesque with enough character to belong, enough neutrality to disappear at small sizes.
ROLEBody · UI
WEIGHTS400 / 500 / 600 / 700
NUMERALSTabular for data
LICENCEOFL · open
C01.3 · JETBRAINS MONO
The recording voice.
JetBrains Mono marks labels, code, metadata and addresses — anything machine-precise. It signals "this is a value," and gives the system its technical accent.
ROLELabels · code
CASECaps · tracked
USEEyebrows · meta
LICENCEOFL · open
C01.4 · NOTO SC
The Chinese voice.
Noto Serif SC pairs with Garamond, Noto Sans SC with Archivo — matched in weight and colour so a bilingual line reads as one. Never let a system font substitute.
SERIFNoto Serif SC
SANSNoto Sans SC
PAIRMatched weights
LICENCEOFL · open
DON'T
×
Don't add a fifth family — Four voices cover every need.
×
Don't swap roles — Garamond doesn't do body; Archivo doesn't do code.
×
Don't use system CJK — Noto SC only — matched on purpose.
×
Don't fake weights — Use real cuts, never faux-bold.
“Four typefaces, each with one job — that is the whole type system.”
03C02 Type scale PLANNED
Every size on every WCN surface comes from one modular scale at a 1.25 ratio — from display down to caption. Pick a step, not a number.
RATIO1.25 · major third STEPS9 · display → caption BASE16 px body ROUNDTo whole px
Aaaaa
C02.1 · THE RATIO
A major third.
Each step is 1.25× the last. The ratio gives clear jumps between levels without the gaps becoming cinematic — calm, editorial, readable.
RATIO1.25
NAMEMajor third
BASE16 px
SCALE10 → 76 px
C02.2 · THE STEPS
Nine, named.
Display, H1–H4, body, small, caption, micro. Each step has a name and a job; designers pick the role, the token resolves the size.
DISPLAY61 / 76 px
HEADINGSH1–H4
BODY16 px
SMALL13 / 11 px
C02.3 · PAIRED LEADING
Every size, its leading.
Each step ships with a paired line-height — tight for display, open for body. Leading is never set by hand; it travels with the size.
DISPLAY1.05
HEADINGS1.15
BODY1.6
CAPTION1.4
C02.4 · RESPONSIVE
Scales with the screen.
On small screens the top steps shrink one notch so display type never overruns. Body holds at 16 px for readability everywhere.
MOBILETop steps −1
BODY16 px · fixed
METHODclamp() fluid
MINCaption 11 px
DON'T
×
Don't invent sizes — Pick a step; never 17 or 19 px.
×
Don't detach leading — Line-height travels with the size.
×
Don't skip for drama — Adjacent steps keep hierarchy calm.
×
Don't shrink body — 16 px floor for reading.
“Pick a role, not a number — the scale does the rest.”
03C03 Weights & italics PLANNED
WCN uses a deliberately short set of weights — and exactly one italic. Emphasis comes from real cuts, never from faux-bold or slanted glyphs.
ARCHIVO400 / 500 / 600 / 700 GARAMOND400 / 500 · italic ITALICGaramond only FAUXNever
RegularMediumBoldItalic
C03.1 · THE CUTS
Four, not nine.
Archivo runs 400 / 500 / 600 / 700; Garamond 400 / 500. A short set keeps interfaces consistent and stops weight from becoming noise.
REGULAR400 · body
MEDIUM500 · UI emphasis
SEMIBOLD600 · headings
BOLD700 · rare
C03.2 · EMPHASIS
One italic, for stress.
In-line emphasis is Garamond italic — used in display and quotes, where a single word should lean. Body emphasis uses medium weight, not italic.
ITALICGaramond display
BODYMedium for stress
COLOURVermilion · rare
CAPSNot for emphasis
C03.3 · NO FAUX STYLES
Real cuts only.
Never let software synthesise bold or italic. Faux styles distort the letterforms and break on export — load the real weight or don't use it.
BOLDReal 600/700
ITALICReal Garamond
SYNTHDisabled
CHECKOn PDF export
C03.4 · WEIGHT PAIRING
Contrast, not clutter.
Pair a heavy heading with a regular body; avoid two near-weights together. One clear jump reads as hierarchy — two similar weights read as a mistake.
HEADING600
BODY400
GAP≥ 200 units
AVOID500 + 600 together
DON'T
×
Don't bold everything — If all is bold, nothing is.
×
Don't faux-italic — Garamond has a real italic.
×
Don't pair near-weights — 500 + 600 looks like an error.
×
Don't use caps for stress — Caps are for labels, not emphasis.
“Emphasis is a real cut, never a synthesised one.”
03C04 Hierarchy & roles PLANNED
Hierarchy at WCN is not just size — it is family. Display, body, label and code each map to a typeface, so the voice signals the role before you read a word.
DISPLAYGaramond BODYArchivo LABELMono · caps CODEMono
DisplayBody copy carries the argument.LABEL · MONO
C04.1 · ROLE MAP
Four roles, four voices.
Display is Garamond, body is Archivo, labels and code are Mono. The mapping is fixed — you never set body in the serif or a label in the sans.
DISPLAYEB Garamond
BODYArchivo
LABELJetBrains Mono
CODEJetBrains Mono
C04.2 · PAIRING RULES
Serif over sans.
The default page is a Garamond headline over Archivo body, with a Mono eyebrow above. This three-voice stack is the WCN signature.
EYEBROWMono · caps
HEADLINEGaramond
BODYArchivo
ORDERMono → serif → sans
C04.3 · DENSITY
Editorial, not cramped.
Headings get generous space above; body sits in comfortable columns. The system reads like a journal, not a dashboard — even in product UI.
SPACEAbove headings
COLUMN60–75 ch
TONEEditorial
UISame rules
C04.4 · WHAT VOICE SIGNALS
Read it before reading.
Because each role has a voice, users learn the system fast: mono means metadata, serif means a moment, sans means content. The form does part of the work.
MONO= value / meta
SERIF= a moment
SANS= content
LEARNFast · consistent
DON'T
×
Don't body-set the serif — Garamond is display, not paragraphs.
×
Don't label in sans — Labels are mono caps.
×
Don't stack two serifs — One serif moment per view.
×
Don't cramp headings — Give display type air above.
“The voice tells you the role before you read the words.”
03C05 Rhythm & spacing PLANNED
Type is only as good as the space around it. WCN fixes line-height, tracking and measure so text breathes the same way on every surface.
MEASURE60–75 characters BODY LEADING1.6 TRACKING0 body · +tracked caps RHYTHM8 px baseline
C05.1 · MEASURE
Sixty to seventy-five.
Line length stays between 60 and 75 characters — long enough to flow, short enough that the eye finds the next line. Columns cap, they never run full-bleed.
MIN60 ch
MAX75 ch
MOBILE≈ 40 ch
METHODmax-width · ch
C05.2 · LINE-HEIGHT
Open for reading.
Body leads at 1.6, headings tighten toward 1.1. Generous body leading is what makes long-form WCN copy feel calm rather than dense.
BODY1.6
HEADING1.1
CAPTION1.4
CJK1.7
C05.3 · TRACKING
Tight caps, loose none.
Body tracking stays at zero. Only mono caps get positive tracking, to open the labels. Display type is never artificially tightened.
BODY0
MONO CAPS+0.1 to +0.18 em
DISPLAY0 · optical
AVOIDNegative on body
C05.4 · VERTICAL RHYTHM
On an 8-px grid.
Vertical spacing snaps to an 8 px baseline so headings, paragraphs and components stack predictably. Rhythm down the page is as designed as the line.
GRID8 px
PARA1 line space
SECTIONMultiples of 8
SNAPComponents align
DON'T
×
Don't run full-width — Cap the measure at ~75 ch.
×
Don't tighten body leading — 1.6 keeps long copy calm.
×
Don't track body text — Tracking is for mono caps only.
×
Don't ignore the baseline — Snap spacing to 8 px.
“The space between the lines is doing half the reading.”
03C06 Bilingual & RWD PLANNED
WCN is a global network, so type is bilingual by default. Latin and Chinese are matched in weight and rhythm, and the whole scale flexes responsively across screens.
CJK SERIFNoto Serif SC CJK SANSNoto Sans SC PAIRINGWeight-matched RWDclamp() fluid
Proof证明
C06.1 · CJK FAMILIES
Noto, matched.
Noto Serif SC pairs with EB Garamond, Noto Sans SC with Archivo. They are chosen so a bilingual headline shares one weight and colour — neither language dominates.
SERIFNoto Serif SC
SANSNoto Sans SC
MATCHWeight + colour
LICENCEOFL · open
C06.2 · MIXED SETTING
One line, two scripts.
When Latin and Chinese sit on one line, CJK runs slightly larger to balance the x-height, with a hair of space at the script boundary. The line should read as a single voice.
CJK SIZE+5% optical
SPACEThin at boundary
PUNCTFull-width 。,
ALIGNShared baseline
C06.3 · CJK RHYTHM
Looser leading.
Chinese needs more line-height than Latin — 1.7 against 1.6 — because the characters are denser. Measure is counted in characters, not ch-width.
LEADING1.7
MEASURE35–45 字
TRACKING0
PUNCTFull-width
C06.4 · RESPONSIVE
Fluid everywhere.
The scale uses clamp() so type grows with the viewport between sensible bounds. Body never drops below 16 px Latin or 15 px CJK; display never overruns small screens.
METHODclamp() fluid
BODY MIN16 px / 15 px CJK
DISPLAYCaps on mobile
TEST320 → 1920 px
DON'T
×
Don't use system CJK — Noto SC, matched on purpose.
×
Don't share Latin leading — CJK needs 1.7, not 1.6.
×
Don't use half-width punctuation — 中文 takes full-width 。,
×
Don't fix sizes — Let the scale flex with clamp().
“A bilingual line should read as one voice, not a translation bolted on.”
Aa
Voices set
Three for the world, one for 中文.
EB Garamond thinks, Archivo works, JetBrains Mono records, Noto SC carries Chinese. Every size, weight and rhythm is defined in the type system. Next: a dedicated page per topic, the way B1–B6 break down colour.
WCN Typography Map · 6 topics · C1–C6
03 · VISUAL · C · v1.0