Chapter 03 · Type

Four families. Each one a specialist. The system is what they do together.

Type is the loudest part of the brand. We can change color or photography on a sub-brand and it still reads as a sibling. Break the type and the whole system falls apart. So the rules here are tight where they matter ( which family does which job ) and wide where the system can breathe ( how each family is treated within its role ).

§ 3.1

The four families

Free from Google Fonts · One job each

Every artifact uses these four families and only these four. No system fonts, no Arial fallback in production, no surprise display face for "this one campaign." The whole library at this scale costs zero dollars and loads in one request.

Display · Headline Aa.

Fraunces

The personality face. Variable axes for size (opsz) and softness (SOFT) let one family carry every headline from a 12px caption to a 144px hero.

DesignerUndercase Weights400 → 800 Axesopsz · SOFT · wght LicenseOFL

Body · Reading Aa

Source Serif 4

The reading face. Optical-size aware. Designed for long-form on a screen with wide counters, generous x-height, comfortable at 16 to 19 px.

DesignerAdobe Weights400 · 500 · 600 · 700 Axesopsz · wght LicenseOFL

UI · Sans Aa

Inter

The interface face. Buttons, form labels, nav, search boxes, in-product chrome. The one sans-serif. Used sparingly and never for editorial headlines.

DesignerRasmus Andersson Weights400 · 500 · 600 · 700 Axeswght LicenseOFL

Mono · Stamped Aa

JetBrains Mono

The stamped face. Every kicker, every meta line, every timestamp, every byline, every "EST. 2024." Set in ALL CAPS, tracked wide, often colored rust.

DesignerJetBrains Weights400 · 500 · 600 · 700 Axeswght LicenseOFL

Why these four, in plain English Fraunces is the voice; it carries character without showing off. Source Serif 4 is the body; comfortable to read for ten minutes. Inter is the chrome. invisible until you tap it. JetBrains Mono is the label. anything stamped, dated, or categorized. Most local-news sites use two faces ( Roboto + Georgia ) and look like 2014. We use four narrowly to look like a publication.

§ 3.2

Fraunces. the personality

Display · Optical-size aware · Soft axis

The signature serif.

opsz 9 → 144
SOFT 0 → 100
wght 100 → 900
italic + roman

Variable axes · Same word, different settings

opsz 144SOFT 0 · 700 Williamson

opsz 144SOFT 100 · 700 Williamson

opsz 36SOFT 60 · 500 Williamson County votes 4-1

opsz 36SOFT 80 · 400 italic A first read on the new jail expansion

opsz 9SOFT 100 · 400 italic A first read on the new jail expansion. published Tuesday afternoon, ahead of Thursday's vote.

Why variable matters

Fraunces is two fonts pretending to be one. The opsz axis shifts ink traps and proportions for small vs large, so a 12px caption and a 144px hero come from the same family but each looks correct at its size. The SOFT axis controls terminal sharpness. push it high and the same letterform reads pen-drawn; push it low and it reads engraved.

Roles: Display, dek, card title, hero, masthead, wordmark, pull-quote, drop cap, price
Avoid for: Body paragraph reading, form labels, button text
Pairs with: Source Serif 4 ( body ) and JetBrains Mono ( meta ). Never with Inter inside a single block.
Color: Ink (default), Bluebonnet (top word in masthead), Rust (drop cap, pull-quote attribution)

§ 3.3

Source Serif 4. the reading face

Body · 16 to 19 px · Long-form

The neighbor's voice, on the page.

opsz 8 → 60
wght 200 → 900
italic + roman

Body specimen · 18 px / 1.55

Round Rock Coffee Co. has roasted single-origin beans on Main Street since 2014. Espresso bar, drip, and a small breakfast menu. Open 6am to 4pm daily. The shop is run by a husband-and-wife team who roast in batches of fifteen pounds and label every bag by hand.

The room itself is small. Twelve seats inside, six on the sidewalk if the weather holds. There is no Wi-Fi password printed anywhere, on purpose. The coffee is what you came for. Order at the counter, pay in cash or a tap, find a stool, and pay attention to the person sitting across from you.

At 16 px the same face still reads comfortably. This is the size every paragraph on the site is set at. The italic does its work inside the line; the roman carries the weight; the spacing is set by the design system, not by the writer.

Why this face for body

Source Serif 4 was redesigned in 2021 specifically for screen reading at body sizes. Wide counters, generous x-height, optical-size-aware. Reads more comfortably at 18px on an OLED phone than any of the Google Fonts serif body classics.

Roles: Paragraph body, business descriptions, captions, long-form, article body
Avoid for: Headlines, kickers, anything ALL CAPS
Sizes: 14px (small body), 16px (default), 18 to 19 px (long-form)
Italic: Use for emphasis inline. Never for whole paragraphs.

§ 3.4

Inter. the chrome

Sans · UI · Functional

The button face.

wght 400 → 700
no italic in UI

UI specimen

News Business Events Jobs Real Estate Subscribe

Your name First and last

Email [email protected]

Message Tell us about your business We'll respond within 48 hours.

Send message Cancel

The rule for Inter

If the user can tap it, click it, type into it, or pick it from a list, it's Inter. If it's prose or a headline, it's a serif. The boundary is bright: anything in the body of an article uses Source Serif 4, anything in a form or a button or a control uses Inter.

Roles: Buttons, form labels, inputs, helper text, nav links, tab labels, in-product chrome
Sizes: 11px (label), 13 to 14 px (button), 14 to 15 px (helper), 16px (body in product UI)
Letter spacing: −0.005em to 0em. Inter has tight defaults already.
Italic: Never used in production UI.

§ 3.5

JetBrains Mono. the stamp

Mono · Labels · Meta · Kickers

Everything stamped.

wght 400 → 700
ALL CAPS preferred
tracking 0.06 → 0.26 em

Mono label specimen

Kicker · rustCIVIC DESK

Kicker · blueFRONT PAGE

CategorySCHOOLS

MetaVOL · III · NO · 142 · MAY 16

TaglineWILLIAMSON COUNTY · TEXAS

DatestampEST · 2024

CTA tailREAD STORY →

Byline (cap-off)By M. Reyes · 12 min ago

Pro badge★ PRO

The mono is the system's voice for labels

Wide tracking ( 0.10 to 0.26 em ) and ALL CAPS turn any mono string into a stamp. Every label in the system follows this construction. By sight alone, the reader knows "this is a category" or "this is a date" without reading the words.

Roles: Kickers, category tags, timestamps, taglines, "By WilCo Guide", section labels, pro badge, CTA arrows, datestamps
Sizes: 9 to 11 px in production. Wider tracking at smaller sizes.
Case: ALL CAPS by default. Lowercase only for the byline ( "By M. Reyes · 12 min ago" ).
Color: Rust (most kickers), Bluebonnet (kickers on inverted contexts), Gold (kickers on dark sections), Ink-3 (meta/timestamps)

§ 3.6

Type roles in use

Eleven named roles · Every artifact uses these

A semantic role for every common need. Designers pick from the role list, not from the type panel. If a new artifact needs a new role, add it to this table. don't invent one inline.

.h-display Fraunces 700 · opsz 144 · SOFT 20
48px / 1.02 / −.024em · ink Page-level hero headline. One per page. Sentence case, balance-wrapped.

Williamson County approves a new $80M jail expansion.

USE FOR
HERO HEADLINES · MASTHEADS · MARQUEE TITLES

.h-section Fraunces 600 · opsz 96 · SOFT 50
30px / 1.05 / −.012em · ink Section heading. Sits under a 2px ink rule.

Six tone treatments. the same headline, six voices

All of these are inside the system

"Williamson County approves a new $80M jail expansion" set six ways, each using the same four families but a different emphasis. The point: the system is wide. The brand grammar is locked, but within that grammar a designer has six distinct registers to pull from depending on context. a serious civic story reads differently than a Friday food roundup, but both stay inside the system.

Editorial standard

The default

CIVIC DESK

Williamson County approves a new $80M jail expansion.

By M. Reyes · 12 min ago · 6 min read

RecipeMono rust kicker → Fraunces 600 / opsz 144 / SOFT 30 headline → Mono ink-3 byline. The newsroom-of-record register. Use for civic, politics, real news.

Italic accent

Magazine-y

FROM THE CIVIC DESK

Williamson County approves a new $80M jail expansion.

RecipeMono rust eyebrow (wider tracking) → mixed Fraunces 600 roman + 400 italic headline → rust rule. Slightly more lifestyle / magazine feel. Use for analysis pieces, opinion, long reads.

Inverted on dark

For sports / breaking

BREAKING · 11:42 AM

Williamson County approves a new $80M jail expansion.

Vote: 4 to 1 · Filed by M. Reyes

RecipeBluebonnet-ink surface, gold mono kicker, paper-colored Fraunces headline, soft cream meta. For breaking news, the sports band, the "Today in WilCo" sticky bar, and dark-mode social cards.

Featured · with ribbon

For premium

FEATURED ★

Williamson County approves a new $80M jail expansion.

By M. Reyes · 12 min ago

RecipeRust ribbon ( same construction as the premium-job card ) → Fraunces 700 / opsz 144 / SOFT 0 ( crisp ) → numeric value picks up rust accent. Use sparingly for featured stories, sponsored content, or a "story of the week."

Long-form opener

For features

Williamson County approved a new $80M jail expansion in a 4-to-1 vote Tuesday afternoon. The lone "no" came from a commissioner who said the math didn't square with the population growth he was seeing on the ground.

RecipeFraunces 700 / opsz 144 rust drop cap → Source Serif 4 19px body → italic emphasis inline. Use for the first paragraph of a feature piece, an editor's letter, or a long-form lead. The Atlantic, The New Yorker, every literary magazine uses this convention.

Masthead-anchored

For mastheads

FROM THE FRIDAY EDITION

Williamson County ★ approves a new $80M jail expansion.

RecipeThe wordmark H grammar applied as a headline. Top line roman 700, rust hairline rule with star, bottom line italic 500 / SOFT 80. Use for newsletter top stories, print covers, social card hero slides.

Why this works as a system Every one of the six treatments uses the same four families, the same four colors, the same kicker grammar, the same hairline-rule logic. Nothing here is freelanced. The treatments differ in emphasis. which weight gets the spotlight, where rust lives, whether the surface is cream or ink, where the italic falls. A designer working inside this system has six clear gears to shift into without ever leaving the brand.

§ 3.8

An article opening, in the wild

Every role · One page

CIVIC DESK · GROWTH & DEVELOPMENT

Williamson County approves a new $80M jail expansion.

A 4-to-1 vote ends a year of debate. The new facility will add 460 beds, cost taxpayers an average of $34 per household per year, and break ground in October. assuming the bond passes a final review on June 3rd.

By M. Reyes · 12 min ago · 6 min read · FILED FROM GEORGETOWN

The vote came at the end of a four-hour commissioners' meeting that drew a standing-room-only crowd to the Williamson County Justice Center. Most of the speakers. 23 of the 31 who signed up for public comment. opposed the bond. Commissioner Bell, the lone "no" vote, said afterwards that "the math on an $80 million bond doesn't square with the population growth we're actually seeing on the ground."

The expansion adds 460 beds to a facility that has been over capacity for 18 of the last 24 months. The county currently pays neighboring jurisdictions roughly $1.4 million per year to house overflow inmates. Sheriff Garcia, who proposed the bond, told the commissioners that figure would rise to $3 million by 2028 without the expansion.

"The math on a $80 million bond doesn't square with the population growth we're actually seeing."

The bond will appear on the November 7 ballot if it clears a final review on June 3. If approved, taxpayers will pay an average of $34 per household per year over the bond's 25-year term. Property owners with a homestead exemption see a reduced impact.

Construction is scheduled to begin in October, weather permitting. The new facility is projected to open in late 2028.

What's happening in this opening Eight type roles in one block. The kicker labels the desk. The display headline carries the news. The dek summarizes for skimmers. The byline establishes credibility. The body opens with a drop cap. A pull-quote breaks the rhythm. Bold inside the body emphasizes names. Every move is a system call. none of it was decided in the moment.

§ 3.9

Pairings & rules

Which family goes with which

Three pairings cover every layout. If a designer reaches for a fourth, something's wrong.

Pair 01

CIVIC DESK Round Rock votes 4-1

The bond clears its final commissioners review and goes to voters in November.

Mono → Fraunces → Source Serif
The default cadence. Every card, every story preview, every list item. Mono kicker → Fraunces card title → body paragraph.

Pair 02

Email address [email protected] We'll never share your email.

Inter only
Inside any form, button, input, dropdown, or in-product UI. Inter for label, input, and helper text. Don't drop Source Serif into a form.

Pair 03

EST · 2024 WilCo Guide WILLIAMSON COUNTY · TEXAS

Mono → Fraunces → Mono
The masthead cadence. Top mono stamp, wordmark, bottom mono tagline. Used on covers, newsletter tops, business cards, hat patches.

§ 3.10

Do & don't

The mistakes that will break the system fastest

What makes the type system hold together

Stay sentence-case for headlinesNever Title Case. Never ALL CAPS headlines. The only ALL CAPS in the system is mono labels.
Use the kicker before every headlineBeat or desk label. Always rust ( or bluebonnet on conflicts ). Wide tracking, mono, uppercase.
Pick the opsz to match the sizeFraunces at 48px wants opsz 144. Fraunces at 16px wants opsz 36. The variable axis is the whole point.
Let italic do emphasis inside a paragraphSource Serif 4 italic inside a roman paragraph is the right tool. Bold for proper nouns or critical facts.
Use Inter only for UI chromeButtons, labels, form inputs, nav. Never for a headline. Never for an article paragraph.
Set mono at 9 to 11 px, tracked wide0.10 to 0.26em tracking depending on size. ALL CAPS by default. Lowercase only for the byline.
Use a drop cap on long-form openersFraunces 700, opsz 144, rust color, floats left. One per article max.

Don't

What breaks the type system fastest

Don't introduce a fifth font familyEven "just for this one campaign." If a new role appears, find a way to express it with the four we have.
Don't set body in FrauncesReading is Source Serif's job. Fraunces past two lines starts to feel performative.
Don't set Inter at a display sizeIt's a UI face, not a hero face. If you need big sans, you actually need Fraunces 700.
Don't space mono labels at 0emWithout tracking, mono uppercase reads as code, not as a stamp.
Don't underline links in bodyColor shift to bluebonnet is the link affordance. Underline only on hover or in print artifacts.
Don't use Title Case anywhereNot on headlines, not on section heads, not on buttons. ( Sentence case for everything but mono labels. )
Don't use Fraunces italic for whole paragraphsItalic is a seasoning. A whole paragraph in italic is a sign somebody forgot to set roman as the default.
Don't use system fonts as fallbacks in productionBlock FOUT, ship swap, accept the half-second of cream paper. Roboto loading momentarily looks like a different brand.

What's next

Where to take this

After type is locked

With the four families documented and the eleven type roles named, the next builds compound. Each chapter pulls from this one.

Components ( buttons, cards, badges, kickers, ad slots ). The Lego bricks every property is built from. Heavily uses the type roles defined here.
Social templates ( Instagram feed + carousels, TikTok covers, LinkedIn, Facebook ). A locked grid + locked type cadence, with photography or color blocks doing the variety.
Newsletter template. One master template that maps to the six tone treatments above. Top story uses T6 masthead-anchored, food roundup uses T2 italic accent, breaking uses T3 dark, etc.
Photography direction. Mood, palette, rules, examples of what we do and don't shoot. Pairs with type cadence to define a complete editorial layout.
Sub-brand toolkit. The one-pager that explains how to spin up Cedar Park Scoop or WilCo Families using everything above. The toolkit references this chapter, color, and components.