The components don’t.
Escolha uma fonte
GrotesqueHelvetica Neue / ArialWide sansVerdana / GenevaSerifGeorgia / TimesMonospaceMenlo / ConsolasPicking a face strips every class off the body, points one reused stylesheet link at that family and puts the class back. The page is already in the new face — no reload, no second tab.
The dropdown as it ships — nine Google Fonts
- Roboto
- Inter
- DM Sans
- Noto Serif
- Noto Sans
- Muli
- Merriweather
- Montserrat
- Crimson Pro
Specimen sheet
Every candidate flatters here
Aa
ABCDEFGHIJKLM
abcdefghijklm
0123456789
Sistema de design
Matrícula confirmada
Matrícula confirmada
Matrícula confirmada
The components you ship
Same face, real widths, real data
Specimen sheet
Every candidate flatters here
Aa
ABCDEFGHIJKLM
abcdefghijklm
0123456789
Sistema de design
Matrícula confirmada
Matrícula confirmada
Matrícula confirmada
The components you ship
Same face, real widths, real data
Specimen sheet
Every candidate flatters here
Aa
ABCDEFGHIJKLM
abcdefghijklm
0123456789
Sistema de design
Matrícula confirmada
Matrícula confirmada
Matrícula confirmada
The components you ship
Same face, real widths, real data
Specimen sheet
Every candidate flatters here
Aa
ABCDEFGHIJKLM
abcdefghijklm
0123456789
Sistema de design
Matrícula confirmada
Matrícula confirmada
Matrícula confirmada
The components you ship
Same face, real widths, real data
Lab · Typography · DX
Projeto Typo.
Nine typefaces, one page of the components a design system actually ships, and no reload between them. The published build runs below, on this domain.
A specimen sheet flatters every face
Choosing a typeface from an Aa and a pangram means choosing it in the one place where every candidate looks competent. The decisions that go wrong happen elsewhere: a label at 12 px above an input, a column of CPF numbers beside a column of phone numbers, how far a button label runs before it wraps. So the page under test is not a specimen — it is a navbar, a form, a table at real widths, buttons and an alert, in Portuguese, carrying the kind of data the system carries.
One class on the body, one stylesheet link
The mechanism is deliberately small. On change it removes every class from the body element, repoints a single reused link tag at that family on Google Fonts, and adds the class back — so the whole page re-renders in place. Nine candidates ship in the dropdown: Roboto, Inter, DM Sans, Noto Serif, Noto Sans, Muli, Merriweather, Montserrat and Crimson Pro. Picking one is the only interaction there is.
What it is not
It is not a font manager, it stores nothing, and it measures nothing — the eye still decides. What it removes is the cost of looking, which is what a typeface argument usually lacks: without it, the comparison happens from memory, one tab at a time, and the loudest opinion wins. Started in 2020 as a side project and pushed to Surge the same year; what is embedded above is that deploy, still answering — not a screenshot and not a rebuild.
