Ferramenta de pré-visualização & emparelhamento de fontes
Navegue, pré-visualize e compare fontes para o seu próximo projeto. Escolha entre fontes do sistema e populares do Google Fonts e personalize com controlos em tempo real de tamanho, peso, altura de linha e espaçamento entre letras. Teste combinações de fonte de título + corpo lado a lado e gere código CSS pronto a usar, tudo no seu navegador e sem registo.
Browse system fonts and Google Fonts, preview with custom text, and compare font pairings side-by-side. Generate ready-to-use CSS code - all running locally in your browser.
Font Browser
40 fontsPreview
Inter
The quick brown fox jumps over the lazy dog.
24px / 1.5 lh / 0.0px ls · Loading...
CSS Code
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap');<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap" rel="stylesheet">
font-family: 'Inter', sans-serif;
Fonts are loaded from Google Fonts CDN for accurate preview rendering. System fonts work offline. All search, filtering, and code generation runs locally. Google Fonts are licensed under the SIL Open Font License - free for commercial use.
Your font selections and settings are automatically saved.
Porque usar a nossa ferramenta de pré-visualização & emparelhamento de fontes?
- Pré-visualização ao vivo com todos os controlos: pré-visualize qualquer fonte com personalização em tempo real: ajuste o tamanho (8-128px), o peso (100-900), a altura de linha e o espaçamento entre letras, e ative o itálico. Escreva o seu próprio texto para ver exatamente como ficará no seu design. Suporta fontes do sistema e do Google Fonts com carregamento instantâneo de webfonts.
- Emparelhamento de fontes lado a lado: teste combinações de fonte de título + corpo lado a lado, com controlos independentes para cada fonte. Ative o modo de comparação para afinar as combinações do seu projeto. Perfeito para escolher fontes complementares para sites, identidade de marca e materiais impressos.
- CSS pronto a usar e código @font-face: gere código CSS pronto para produção para cada fonte e combinação. Copie regras @import, etiquetas <link>, declarações CSS font-family ou o código @font-face completo, tudo formatado e pronto a colar no seu projeto. Sem escrever código à mão.
- Conjunto de caracteres e detalhes da fonte: veja o conjunto completo de caracteres de cada fonte, incluindo maiúsculas, minúsculas, números, pontuação e caracteres especiais. Consulte a categoria da fonte, os pesos disponíveis e o código CSS sugerido. Todos os dados estão integrados: não são necessárias chamadas a APIs externas.
Quem usa a ferramenta de pré-visualização & emparelhamento de fontes?
- Design e desenvolvimento web: pré-visualize fontes para projetos web com controlos de texto, tamanho e peso ao vivo. Teste combinações de fontes de título e de corpo antes de fixar um design. Gere etiquetas @import e <link> prontas para os seus ficheiros HTML e CSS.
- Identidade de marca e design de logótipos: compare combinações de fontes para projetos de identidade de marca. Teste como fica um nome de marca com diferentes pesos e estilos. Pré-visualize a tipografia da marca com texto real em vez de um lorem ipsum genérico.
- Criação de conteúdo e blogging: bloggers e criadores de conteúdo encontram a combinação perfeita de fontes para o seu site. Pré-visualize como o texto de corpo é renderizado a um tamanho de leitura e escolha uma fonte de título complementar que combine com o estilo do seu conteúdo.
- Prototipagem de design UI/UX: os designers testam rapidamente escolhas tipográficas para interfaces de utilizador. Ajuste o espaçamento entre letras e a altura de linha para garantir uma legibilidade ótima em diferentes tamanhos de ecrã. Copie as declarações CSS diretamente para o seu protótipo.
- Design editorial e impressão: pré-visualize como as fontes aparecerão em materiais impressos. Teste combinações serif e sans-serif para títulos e corpo de texto. Ajuste tamanhos e pesos segundo os requisitos de legibilidade da impressão.
- CSS e desenvolvimento front-end: os programadores front-end exploram opções de fontes sem sair do navegador. Gere código CSS limpo e formatado para qualquer seleção de fonte. Use a saída CSS @font-face para fontes auto-alojadas ou as ligações ao CDN do Google Fonts.
Perguntas frequentes
A ferramenta inclui fontes do sistema (pré-instaladas no seu dispositivo, como Arial, Helvetica, Georgia ou Times New Roman) e populares do Google Fonts (como Roboto, Open Sans, Lato, Montserrat, Merriweather, Playfair Display, Fira Code e muitas mais). As fontes do Google são carregadas a partir do CDN da Google para uma pré-visualização fiel.
Ative o modo de comparação para ver duas fontes lado a lado com controlos independentes para cada uma. Escolha uma fonte de título à esquerda e uma fonte de corpo à direita, ou compare duas fontes para o mesmo uso. Cada painel tem os seus próprios controlos de tamanho, peso, altura de linha, espaçamento entre letras e texto personalizado.
Para cada fonte, a ferramenta gera uma regra @import para ficheiros CSS, uma etiqueta <link> para documentos HTML, uma declaração CSS font-family com os valores de recurso adequados e um bloco CSS completo com todas as suas definições. No modo de emparelhamento pode copiar o CSS de ambas as fontes.
As fontes do Google estão licenciadas ao abrigo da SIL Open Font License (OFL), que permite uso comercial e pessoal gratuito, incluindo sites, aplicações, materiais impressos e identidade de marca. As fontes do sistema têm as suas próprias licenças. Verifique sempre a licença específica da fonte para o seu caso de uso.
As fontes do sistema funcionam totalmente offline. As fontes do Google precisam de ligação à internet para serem carregadas a partir do CDN da Google na pré-visualização. O navegador, a pesquisa e o filtro de fontes funcionam offline, porque os metadados das fontes estão integrados na ferramenta.
O peso da fonte vai de 100 (fina) a 900 (negra). Os pesos comuns incluem 400 (normal), 700 (negrito) e 300 (leve). Nem todas as fontes incluem todos os pesos: a ferramenta só mostra os disponíveis para a fonte selecionada.
A vista do conjunto de caracteres mostra toda a gama de caracteres de uma fonte, organizada em maiúsculas, minúsculas, números, pontuação e símbolos. Ajuda-o a verificar se uma fonte suporta os caracteres de que precisa para o seu projeto.
O espaçamento entre letras (tracking) ajusta o espaço entre caracteres. Um espaçamento apertado pode tornar os títulos mais coesos, enquanto um espaçamento maior pode melhorar a legibilidade do texto de corpo. A ferramenta permite ajustá-lo de -2px a +5px.
Sim. As suas seleções de fontes, o texto personalizado, o tamanho, o peso, a altura de linha e o modo de comparação são guardados automaticamente no localStorage do seu navegador. Nunca são enviados dados para um servidor nem armazenados externamente.
Copie a regra @import e cole-a no topo do seu ficheiro CSS, ou copie a etiqueta <link> e adicione-a ao <head> do seu HTML. A declaração CSS font-family pode ser aplicada a qualquer elemento. Para fontes auto-alojadas, use o bloco CSS @font-face completo.