§03 · Typography
Four faces, one italic word.
Archivo makes the claim, Inter does the reading, Newsreader italic turns the sentence, and IBM Plex Mono cites the source. All four are free on Google Fonts. The app uses Inter only.
Each face has one job.
Display
Archivo
Headlines, section claims, numerals, the wordmark, kickers
--font-archivo · Variable, wdth axis; 800 at wdth 118 for headlines
Google FontsCheck. Push. Re-check.
We help good new pages, updates and backlinks get found and indexed by Google.
The accent word
Newsreader italic
One pivot word per headline. Never a sentence
--font-serif · Italic 400 and 500
Google Fontsfound.
The citation layer
IBM Plex Mono
Footnote markers, § numbers, URLs, statuses, data
--font-mono · 400, 500, 600
Google Fonts[1] yoursite.com/pricing · §3
The scale, as shipped.
Every size is fluid between a phone and a wide screen. One H1 per page, then H2 → H3 → H4 with no skipped levels.
Eyebrow · Plex Mono
Check. Push. Re-check.
Guide heading, with a top rule in the guides
Body copy is Inter at 17 px with generous leading. Google says crawling can take anywhere from a few days to a few weeks.[2]
Kicker · Archivo 700
| Element | Where | Settings | Size |
|---|---|---|---|
| Hero H1 | .ig-display | Archivo 800, wdth 118, −0.025em, balanced | clamp(2.4rem, 4.8vw, 5rem), leading 1 |
| Section claim (H2) | SectionHead | Same as the hero | clamp(2rem, 4.2vw, 3.6rem), leading 1.02 |
| Guide H2 | .ig-prose h2 | Archivo 800, wdth 112, −0.02em, top rule | clamp(1.5rem, 2.6vw, 2rem) |
| Guide H3 / H4 | .ig-prose h3/h4 | Archivo 700 | 1.25rem / 1.06rem |
| Hero sub-line | — | Inter, slate #3B4760 | clamp(1.1rem, 1.6vw, 1.35rem) |
| Body (guides) | .ig-prose | Inter, line-height 1.78 | 1.0625rem |
| Kicker | .fc-kicker | Archivo 700, wdth 110, uppercase, 0.2em, gold-ink | 0.72rem |
| Eyebrow | .fc-eyebrow | Plex Mono 500, uppercase, 0.06em | 0.76rem |
| § number | .ig-section-no | Plex Mono, 0.04em, gold-ink | 13px |
| Footnote marker | Cite | Plex Mono 600, superscript | max(.6em, 11px) inline |
The italic goes on the pivot.
Exactly one accent word per headline, rarely two, set in Newsreader italic at 1.08 em. It's the word that carries the turn of the sentence, usually the last one.
Fresh content only counts once it's found.
Check. Push. Re-check.
Credits, not seats.
AI search answers from what's been indexed.
For the people who ship the pages.
Talk to a human.
Click the word that carries the turn of the sentence. It's usually the last one.
DoOne italic word, on the pivot, in a headline
Don'tA whole headline, a sub-line or body text in the serif
DoEmphasis in a paragraph with bold
Don'tThe serif for emphasis inside paragraphs
Mono is the citation layer.
IBM Plex Mono marks anything that is a reference, a URL, a status or data. Never a heading or a marketing sentence.
Footnote markers
[1] [2] [3]
URLs in scenes
yoursite.com/pricing
Section numbers
§1 · §2 · §3
Story kickers
The story · 3 steps
Log timestamps
09:41 · Re-checked
Source publishers
[4] Google Search Central
In the app, emails and cards.
| Surface | Type |
|---|---|
| The app | All Inter (--font-sans), shadcn defaults; chips are 12 px Inter medium. Archivo only in the wordmark on the sign-in screens |
| Social cards | Vendored TTFs: Archivo ExtraBold Wide, Archivo SemiBold and Inter Medium |
| Emails | The system stack (-apple-system, Segoe UI, Roboto, Helvetica, Arial), because web fonts are unreliable in email clients |