# Laboratório de Combinação de Fontes Web

Pré-visualize uma combinação de Google Fonts (título + corpo) com controles de peso e entrelinha, e copie um snippet CSS @import + variáveis pronto para colar. Registro curado de 22 fontes e 7 presets.

> Página canônica: https://elysiatools.com/pt/tools/webfont-pairing-lab

- **Categoria:** Design

- **Palavras-chave:** combinação de fontes, google fonts, tipografia, fontes web, fonte título corpo, css import, @import, combinação de fonte, família tipográfica, webfont

## Visão geral

Pré-visualize uma combinação **título + corpo** de Google Fonts lado a lado, ajuste peso e entrelinha, e copie um snippet CSS pronto para colar.

**Como usar**
1. Escolha uma **fonte de título** e uma **fonte de corpo** do registro curado de 22 fontes.
2. Ajuste o **peso do título** e o **peso do corpo**; cada fonte ajusta-se ao peso disponível mais próximo.
3. Modifique o **tamanho do corpo** (px) e a **entrelinha**; a pré-visualização atualiza.
4. Personalize opcionalmente os textos de **exemplo de título** e **exemplo de corpo**.
5. Copie o CSS gerado — contém um único `@import` que carrega apenas os dois pesos escolhidos, mais variáveis CSS e regras para `h1, h2, h3` e `body, p`.

**Combinações curadas** — o painel lateral sugere 7 combinações consagradas (editorial, SaaS, notícias, tech, artesanal, pôster, dev-tool).

## Entradas

- **Fonte de título** (select): The display / heading typeface.
- **Peso do título** (number): Snaps to the nearest available weight for the chosen font.
- **Fonte de corpo** (select): The body / paragraph typeface.
- **Peso do corpo** (number): Snaps to the nearest available weight for the chosen font.
- **Tamanho do corpo (px)** (number): Body paragraph font-size in pixels.
- **Altura da linha** (number): Unitless line-height for body text. 1.4–1.7 is the readable range.
- **Texto de exemplo do título** (text): Optional custom heading text. Defaults to a neutral sample.
- **Texto de exemplo do corpo** (textarea): Optional custom body paragraph(s). Defaults to a neutral sample.

## Quando usar

- Ao planejar a identidade visual e a tipografia de um novo site ou aplicativo web.
- Quando precisar testar a legibilidade e o contraste visual entre fontes de título e corpo antes de codificar.
- Para gerar rapidamente um snippet CSS otimizado que importa apenas os pesos de fonte necessários do Google Fonts.

## Como funciona

- Selecione as fontes desejadas para o título e o corpo a partir de uma lista curada de 22 famílias tipográficas.
- Ajuste os pesos das fontes, o tamanho do texto do corpo e a altura da linha usando os controles deslizantes.
- Insira textos personalizados para visualizar o comportamento real da tipografia no layout.
- Copie o código CSS gerado automaticamente, que inclui a diretiva @import otimizada e as variáveis CSS correspondentes.

## Casos de uso

- Criação de guias de estilo e sistemas de design rápidos para novos projetos web.
- Otimização de performance web ao gerar imports de fontes contendo apenas os pesos estritamente necessários.
- Prototipagem rápida de interfaces SaaS, blogs editoriais ou landing pages com combinações tipográficas validadas.

## Perguntas frequentes

### Como a ferramenta carrega as fontes na pré-visualização?

As fontes são carregadas diretamente do Google Fonts em tempo real conforme você altera as configurações.

### O código CSS gerado inclui apenas os pesos selecionados?

Sim, a diretiva @import é otimizada para carregar estritamente os pesos definidos para o título e o corpo, reduzindo o tempo de carregamento.

### Posso usar meus próprios textos para testar a combinação?

Sim, você pode personalizar os campos de exemplo de título e corpo para ver como seu conteúdo real se comporta.

### Quais tipos de fontes estão disponíveis no catálogo?

O catálogo curado inclui 22 fontes populares divididas entre categorias Serif, Sans-serif, Display, Handwriting e Monospace.

### O que acontece se eu escolher um peso que a fonte não suporta?

A ferramenta ajusta automaticamente a seleção para o peso disponível mais próximo suportado por aquela família tipográfica específica.

## Ferramentas relacionadas

- [Extrator de tokens de tema ECharts](https://elysiatools.com/pt/tools/echarts-theme-token-extractor): Extrai design tokens — cores, números, tamanhos de fonte e strings — de um JSON de tema ECharts e os exporta direto no seu design system. Cole um objeto de tema (o registrado e passado a echarts.init(dom, themeName)) e a ferramenta percorre cada folha, marcando cada cor (com normalização opcional nomeada/rgb → hex), número de espaçamento, tamanho de fonte e string, depois emite variáveis CSS limpas, um config theme.extend do Tailwind, tokens.json do Style Dictionary ou variáveis SCSS. Faz a ponte entre um tema de visualização ECharts e os tokens de design Figma/CSS/Tailwind sem copiar cada valor à mão.
- [Inspetor de arquivos de fonte (TTF / OTF / WOFF / WOFF2)](https://elysiatools.com/pt/tools/font-file-inspector): Envie uma fonte TTF, OTF, WOFF ou WOFF2 (WOFF2 é descomprimida automaticamente) e inspecione todos os metadados: família/subfamília/designer/copyright/versão, número de glifos, unitsPerEm, peso e largura, ângulo itálico, bandeiras de estilo e caixa delimitadora; mapa de calor de cobertura por blocos Unicode; pré-visualização SVG de glifos (texto personalizável, amostra automática para fontes de ícones); ligaduras liga e recursos OpenType; eixos fvar e instâncias nomeadas de fontes variáveis.
- [Construtor de eixos e instâncias de fontes variáveis e CSS font-variation-settings](https://elysiatools.com/pt/tools/variable-font-axis-instance-and-css-font-variation-settings-builder): Envie uma fonte variável (TTF/OTF/WOFF/WOFF2) para inspecionar seus eixos fvar e instâncias nomeadas, pré-visualizar a interpolação ao vivo no navegador e gerar CSS font-variation-settings pronto para colar, as propriedades de alto nível equivalentes e um bloco @font-face variável.
- [Calculadora clamp de tipografia fluida CSS](https://elysiatools.com/pt/tools/css-fluid-typography-clamp-calc): Informe limites de viewport e fonte para gerar clamp(), CSS copiavel e dados de preview
- [Testador de regex C# (.NET)](https://elysiatools.com/pt/tools/csharp-regex-tester): Teste online expressões regulares .NET/C#: grupos nomeados ((?…)), opções IgnoreCase/Multiline/Singleline, realce, tabela de grupos e código C# pronto para colar.
- [Gerador de arquivo de zona DNS](https://elysiatools.com/pt/tools/dns-zone-file-record-builder): Gera registros SOA / NS / A / AAAA / CNAME / MX / TXT (SPF/DKIM/DMARC) / SRV / CAA / TLSA / NAPTR / DS no formato de arquivo de zona RFC 1035, com resumo legível. Suporta TTL e vários registros.
- [Painel de estatísticas de texto avançado](https://elysiatools.com/pt/tools/enhanced-text-statistics-dashboard): Um painel unificado: contagem de palavras/caracteres/frases, TTR (diversidade lexical), densidade lexical, sílabas estimadas e tempos separados de leitura (238 ppm) e fala (150 ppm).
- [Esteganografia de imagem: embutir e detectar](https://elysiatools.com/pt/tools/image-steganography-embed-detect): Esconde texto nos bits menos significativos de um PNG, extrai de volta e roda a estegoanálise chi-quadrado de Westfeld–Pfitzmann com curva p deslizante e prévia do plano LSB.

## Exemplos

- [Exemplos de Processamento de Imagem Web Python](https://elysiatools.com/pt/samples/web-image-processing-python): Exemplos de processamento de imagem Web Python usando PIL/Pillow incluindo leitura, salvamento, redimensionamento e conversão de formato
- [Exemplos de Processamento de Imagem Web Rust](https://elysiatools.com/pt/samples/web-image-processing-rust): Exemplos de processamento de imagem Web Rust incluindo leitura/gravação, redimensionamento e conversão de formato
- [Exemplos de Processamento de Imagens Web TypeScript](https://elysiatools.com/pt/samples/web-image-processing-typescript): Exemplos de processamento de imagens Web TypeScript incluindo leitura/salvamento, redimensionamento e conversão de formato
- [Exemplos de Operações de Arquivo Web Go](https://elysiatools.com/pt/samples/web-file-operations-go): Exemplos de operações de arquivo Web Go incluindo leitura/escrita de arquivo de texto, copiar/mover, travessia de diretório e validação de arquivo