$ tools/fonts

Gerador de pares de fontes

Escolha uma fonte de título e de corpo do Google Fonts, previsualize juntas ao vivo e copie o CSS. Presets para começar rápido.

$ Presets

# Fonte do título

# Fonte do corpo

$ Preview

</> Código

$ Como usar o gerador de pares de fonte

Comece escolhendo um par preset — são combinações testadas que funcionam bem juntas. Ou vá custom: escolha uma fonte de título e uma de corpo nos menus (todas do Google Fonts), ajuste tamanhos e pesos e veja o preview atualizar em tempo real. Alterne entre previews de artigo, hero e card para ver como o par se comporta em contextos diferentes. Quando estiver bom, copie o import ou CSS e cole no seu projeto.

O que faz um bom par de fontes

Os melhores pares criam contraste sem brigar. Um padrão comum é uma fonte serifa ou display para títulos com uma sans-serif limpa para corpo. O título prende a atenção; o corpo permanece legível. Evite pares de fontes muito similares — se você apertar os olhos e não distinguir, escolha algo com mais personalidade para o título.

Por que isso importa para seu app

Seus screenshots App Store, landing page e UI in-app todos se beneficiam de tipografia consistente e bem combinada. As fontes que escolhe definem o tom — divertido, profissional, mínimo, bold. Acertar o par cedo evita trabalho de redesign depois. Use esta ferramenta para experimentar rápido, depois leve o CSS exato para seu projeto.

$ FAQ

É grátis?

Sim — completamente grátis, sem cadastro, sem limites. Roda inteiramente no seu navegador e carrega fontes diretamente do Google Fonts.

Posso usar essas fontes no meu app?

Todas as fontes aqui são do Google Fonts e open-source. Pode usar em apps, sites, impressão — em qualquer lugar. Confira a licença de cada fonte no Google Fonts para detalhes (a maioria é SIL Open Font License).

Como adiciono as fontes ao meu projeto?

Copie a tag <link> ou a linha @import da seção de código e adicione ao seu HTML ou CSS. Depois use as declarações font-family mostradas no output CSS.

Por que alguns pesos aparecem indisponíveis?

Nem toda Google Font suporta todos os pesos. Os chips de peso só mostram pesos que a fonte selecionada realmente fornece.

Mais ferramentas

Curtindo o LaunchShots?
Grátis para sempre — se te economizou tempo, você pode me pagar um café.
Apoiar →
copiado ✓