Os componentes não.
Escolha uma fonte
GrotesqueHelvetica Neue / ArialWide sansVerdana / GenevaSerifGeorgia / TimesMonospaceMenlo / ConsolasEscolher uma fonte tira todas as classes do body, aponta um único link de stylesheet reaproveitado para aquela família e devolve a classe. A página já está na nova fonte — sem reload, sem segunda aba.
O dropdown como ele é — nove Google Fonts
- Roboto
- Inter
- DM Sans
- Noto Serif
- Noto Sans
- Muli
- Merriweather
- Montserrat
- Crimson Pro
Folha de amostra
Aqui toda fonte parece boa
Aa
ABCDEFGHIJKLM
abcdefghijklm
0123456789
Sistema de design
Matrícula confirmada
Matrícula confirmada
Matrícula confirmada
Os componentes entregues
Mesma fonte, larguras e dados reais
Folha de amostra
Aqui toda fonte parece boa
Aa
ABCDEFGHIJKLM
abcdefghijklm
0123456789
Sistema de design
Matrícula confirmada
Matrícula confirmada
Matrícula confirmada
Os componentes entregues
Mesma fonte, larguras e dados reais
Folha de amostra
Aqui toda fonte parece boa
Aa
ABCDEFGHIJKLM
abcdefghijklm
0123456789
Sistema de design
Matrícula confirmada
Matrícula confirmada
Matrícula confirmada
Os componentes entregues
Mesma fonte, larguras e dados reais
Folha de amostra
Aqui toda fonte parece boa
Aa
ABCDEFGHIJKLM
abcdefghijklm
0123456789
Sistema de design
Matrícula confirmada
Matrícula confirmada
Matrícula confirmada
Os componentes entregues
Mesma fonte, larguras e dados reais
Lab · Tipografia · DX
Projeto Typo.
Nove fontes, uma página com os componentes que um design system de fato entrega, e nenhum reload entre elas. O build publicado roda abaixo, neste domínio.
Um espécime tipográfico favorece qualquer fonte
Escolher uma fonte a partir de um Aa e de um pangrama é escolher no único lugar onde toda candidata parece competente. As decisões que dão errado acontecem em outro lugar: um label de 12 px acima de um input, uma coluna de CPFs ao lado de uma coluna de telefones, até onde o texto de um botão corre antes de quebrar. Então a página em teste não é um espécime — é uma navbar, um formulário, uma tabela em larguras reais, botões e um alerta, em português, carregando o tipo de dado que o sistema carrega.
Uma classe no body, um link de stylesheet
O mecanismo é deliberadamente pequeno. Ao trocar, ele remove todas as classes do elemento body, reaponta uma única tag link reaproveitada para aquela família no Google Fonts e devolve a classe — então a página inteira renderiza de novo no lugar. Nove candidatas vêm no dropdown: Roboto, Inter, DM Sans, Noto Serif, Noto Sans, Muli, Merriweather, Montserrat e Crimson Pro. Escolher uma é a única interação que existe.
O que ele não é
Não é um gerenciador de fontes, não guarda nada e não mede nada — o olho continua decidindo. O que ele tira é o custo de olhar, que é o que costuma faltar em uma discussão sobre fonte: sem isso, a comparação acontece de memória, uma aba por vez, e a opinião mais alta vence. Começou em 2020 como projeto paralelo e foi publicado no Surge no mesmo ano; o que está embarcado acima é aquele deploy, ainda respondendo — não um screenshot e não um rebuild.
