A tipografia que quem visita realmente vê. Numa escala.
A maior parte de uma interface é texto. Treze tamanhos onde seis bastavam, uma fonte que só existe no notebook de quem desenhou, linhas com 130 caracteres: quem lê sente tudo isso como “difícil de ler”. A skill mede o que a página mostra de verdade e dá a ela uma escala.
npx skills add c0le0ni/skills --skill coleoni-type
Treze tamanhos e uma fonte que ninguém carregou.
O CSS pedia Inter. Parecia certo na máquina onde foi feito, porque a Inter estava instalada ali. Pra quem visitava, sempre foi a fonte do sistema.
body { font: 15px Inter, system-ui } /* never loaded */
h1 { font: 800 46px Georgia; letter-spacing: .01em }
.lead { font-size: 18px; max-width: 1100px;
text-align: justify }
.eyebrow { font-size: 12px; text-transform: uppercase }
sizes in use: 12 13 13.5 14 15 15.5 17 18
21 22 23 28 46
O que ela mede.
Rode no site no ar: é lá que fonte faltando aparece.
| Conferência | O que conta como problema |
|---|---|
| Fonte faltando | Uma família que não aparece, ou uma sem @font-face que só alguns sistemas têm |
| Estilo falso | Peso ou itálico que o navegador inventa |
| Escala | Mais de 7 tamanhos, ou tamanhos menos de 8% distantes |
| Entrelinha | Abaixo de 1,35 em parágrafos; acima de 1,3 em títulos grandes |
| Largura de linha | Mais de 85 caracteres por linha |
| Detalhes | Texto justificado, caixa-alta sem espaçamento, título grande com espaçamento aberto, palavra sozinha no fim, números sem tabular-nums |
Um comando, em qualquer agente.
O único pacote é o playwright-core. Faz parte da família de interface com acabamento, cor e layout.
npx skills add c0le0ni/skills --skill coleoni-type
/coleoni-type https://seusite.com.br
-g-a claude-code-a codexnpx skills add c0le0ni/skillsAntes de um redesign, ou no lugar dele.
Ela mostra o relatório primeiro.
Auditar a tipografia de um site.
/coleoni-type https://seusite.com.br
Montar uma escala e aplicar.
/coleoni-type o app, propõe uma escala em tokens rem e aplica
Hospedar as fontes direito.
/coleoni-type as fontes não carregam, corrige
O motor, pelo terminal.
node type.mjs https://seusite.com.br --lang pt --out type-report
| Opção | Para quê |
|---|---|
--select "main" | Só uma parte da página |
--lang en|pt | Língua do relatório |
Texto é quase toda a interface. Componha bem.
npx skills add c0le0ni/skills --skill coleoni-type