Typography Map · WCN Brand Portal

WCNTYPOGRAPHY MAP

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

GARAMOND

ARCHIVO

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