Stylepack

Fontes

As fontes que o teenage.engineering usa

O teenage.engineering usa te-20 nos títulos e no texto corrido. te-20 é uma fonte licenciada que o próprio site serve. A alternativa gratuita mais próxima no Google Fonts: Inter.

Medido no teenage.engineering há 4 dias.

Abrir o pacote de design completoBaixar o pacote

Famílias de fontes

1 família
te-20
Usada em
body, button, label
Origem
Auto-hospedada
Alternativa gratuita
Inter

CSS para reproduzir

Variáveis de fonte com a substituta gratuita na pilha, para que o mesmo CSS funcione com ou sem a fonte licenciada.

:root {
  --font-body: "te-20", "Inter", sans-serif; /* Inter stands in for te-20 */
  --font-size-base: 19.102px;
}

Como o texto é composto

headline-displayQuick brown foxte-20 / 48px / 100 / lh 1.4
headline-lgQuick brown foxte-20 / 32px / 100 / lh 1.4
headline-mdQuick brown foxte-20 / 24px / 100 / lh 1.4
body-mdThe quick brown fox jumps over the lazy dogte-20 / 19.102px / 100 / lh 22.0408px
label-mdThe quick brown fox jumps over the lazy dogte-20 / 16px / 300 / lh 24px
buttonThe quick brown fox jumps over the lazy dogte-20 / 16px / 100 / lh 1.5
Tamanhos de fonte em uso
161940

Para agentes de IA

O pacote é texto puro, sem chave: busque o DESIGN.md ou entregue o pacote inteiro ao Claude Code, Cursor ou Copilot pelo servidor MCP.

curl -s https://stylepack.ai/packs/teenage.engineering/DESIGN.md

Perguntas

Qual fonte o teenage.engineering usa?

O teenage.engineering usa te-20. Os títulos são compostos em te-20 e o texto corrido em te-20, medidos no site como ele é renderizado, não lidos da folha de estilos.

A fonte do teenage.engineering é gratuita?

Não. te-20 é uma fonte licenciada que o próprio teenage.engineering serve. A alternativa gratuita mais próxima é Inter, disponível no Google Fonts. O CSS desta página a coloca na pilha de fontes como substituta.

Como ter a mesma tipografia do teenage.engineering no meu projeto?

Baixe o pacote de design do teenage.engineering no Stylepack: ele traz a pilha de fontes, a escala tipográfica, todos os estilos de texto e as capturas de tela, em um formato que um agente de código com IA, como Claude Code ou Cursor, consegue usar para construir.