Pré-visualizador e testador de fontes gratuito

O que esta ferramenta faz

Uma ferramenta de pré-visualização de fontes renderiza a mesma cadeia em várias tipografias simultaneamente para que possa compará-las lado a lado sem se comprometer com uma. Escreva o seu texto uma única vez no topo (o nome do projecto, o título que está a redigir, o wordmark de marca que está a escolher) e cada fonte da galeria mostra a mesma cadeia no seu próprio carácter. Ajuste o tamanho, a cor e o fundo para testar como a comparação aparece no tamanho e contraste em que aparecerá realmente em produção. Clique em qualquer fonte para copiar a sua declaração CSS font-family. A cadeia de comparação tipográfica clássica «The quick brown fox jumps over the lazy dog» é um pangrama (cada letra do alfabeto inglês aparece pelo menos uma vez), útil porque exercita cada glifo que a tipografia tem para oferecer numa única frase curta.

Fontes web-safe

«Fontes web-safe» é uma expressão do início a meados dos anos 2000, quando as fontes web CSS (@font-face) ainda não tinham suporte fiável. O conjunto referia-se a tipografias pré-instaladas essencialmente em todos os sistemas operativos de consumo, de modo que um designer pudesse especificá-las com a confiança de que o navegador do utilizador as teria localmente. A lista clássica de fontes web-safe: Arial, Helvetica, Times New Roman, Times, Georgia, Verdana, Tahoma, Trebuchet MS, Courier New, Courier, Lucida Console, Palatino, Garamond, Bookman, Comic Sans MS, Impact, Arial Black. Cada uma tem a sua história, a Arial foi a resposta da Monotype à pressão de licenciamento da Microsoft por um substituto da Helvetica; a Verdana e a Georgia foram encomendadas pela Microsoft a Matthew Carter em 1996 especificamente para leitura em ecrã nas resoluções da época; a Tahoma é a irmã mais estreita da Verdana. A convenção web-safe perdurou muito depois de @font-face se ter tornado fiável (o Internet Explorer suportava-o desde a versão 4 de 1997, mas o Firefox 3.5 de 2009 e o Safari 3.1 de 2008 tornaram-no praticável entre navegadores) porque os designers valorizam a renderização sem latência e sabem que as fontes personalizadas custam idas e voltas de rede. A boa prática actual é uma «pilha de fontes do sistema» (Apple -apple-system, depois BlinkMacSystemFont, depois Segoe UI, depois Roboto, depois sans-serif) que escolhe a fonte nativa de interface do SO do utilizador sem descarregar nada, ao mesmo tempo rápida e visualmente adequada à plataforma.

Google Fonts e a era do alojamento de fontes web

O Google Fonts foi lançado em Maio de 2010 como biblioteca CDN gratuita de tipografias open-source. O lançamento original tinha 18 fontes; em 2026 o catálogo ultrapassa as 1500 famílias, todas sob licença SIL Open Font License ou similares permissivas. Open Sans (Steve Matteson, 2010), Roboto (Christian Robertson, 2011), Lato (Łukasz Dziedzic, 2010), Montserrat (Julieta Ulanovsky, 2011), Source Sans Pro (Paul Hunt para a Adobe, 2012), Inter (Rasmus Andersson, 2016), Poppins (Indian Type Foundry, 2014), Nunito (Vernon Adams, 2011), figuram entre as tipografias mais usadas na web moderna, todas disponíveis gratuitamente através do Google Fonts. O mecanismo de carregamento do catálogo evoluiu ao longo dos anos: o lançamento original de 2010 usava etiquetas <link> para um endpoint CSS da Google; a partir de 2018 deu-se ênfase ao parâmetro display=swap para controlar o comportamento FOUT/FOIT; a API Google Fonts v2 de 2022 pré-renderiza subconjuntos para melhor desempenho; em sites sensíveis à privacidade as fontes são frequentemente auto-alojadas para evitar as preocupações de privacidade e conformidade RGPD do CDN da Google (uma decisão judicial alemã de 2022 considerou explicitamente que carregar Google Fonts a partir dos servidores da Google sem consentimento do utilizador violava o RGPD). Adobe Fonts (anteriormente Typekit, adquirido em 2011), Fontshare (fontes gratuitas da Indian Type Foundry, 2021), Bunny Fonts (espelho do Google Fonts respeitador da privacidade, 2021) são as principais alternativas.

Categorias de fontes

• As fontes serifadas têm pequenos prolongamentos salientes (serifas) nas extremidades das letras. As serifas estilo antigo (Garamond, Caslon, Goudy, Sabon) datam do século XVI e têm baixo contraste entre traços grossos e finos. As serifas transicionais (Baskerville, Times New Roman) surgiram no século XVIII com maior contraste. As serifas modernas (Bodoni, Didot) levam o contraste ao extremo. As serifas slab (Rockwell, Roboto Slab, Courier) têm serifas rectangulares pesadas. Para o corpo de texto web, as serifas optimizadas para ecrã como Georgia (Matthew Carter para a Microsoft, 1996), Merriweather (Sorkin Type, 2010), Lora (Cyreal, 2011) e PT Serif (Paratype, 2009) leem-se melhor que tipografias derivadas do papel como Times New Roman.
• As fontes sans-serif não têm serifas. As sans geométricas (Futura, Avenir, Avant Garde) são construídas a partir de formas geométricas limpas. As sans humanistas (Gill Sans, Frutiger, Open Sans, Source Sans Pro) tomam proporções das letras romanas e tendem a ser as mais legíveis para corpo de texto. As sans grotescas (Helvetica, Arial, Akzidenz-Grotesk) são os cavalos de batalha industriais dos séculos XIX e XX. As neogrotescas (Inter, Roboto, San Francisco, Segoe UI) são os predefinidos de interface modernos nos principais sistemas operativos e sistemas de design. As sans-serif dominam o corpo de texto web porque permanecem legíveis em tamanhos menores em pixels.
• As fontes monospace atribuem a mesma largura a cada carácter, concebidas originalmente para máquinas de escrever e os primeiros terminais informáticos onde cada carácter ocupava uma célula fixa. Cruciais para editores de código, terminais, documentação técnica e qualquer contexto onde o alinhamento importa. As fontes modernas para programadores (JetBrains Mono, Fira Code, Cascadia Code, IBM Plex Mono, Inconsolata, Source Code Pro) incluem ligaduras de programação (=> → ⇒, != → ≠) e estão concebidas para a legibilidade em sessões longas. SF Mono da Apple e Cascadia Code da Microsoft são distribuídas com as respectivas ferramentas de desenvolvimento.
• As fontes display são concebidas apenas para uso em tamanho grande, manchetes, cartazes, wordmarks de marca, hero text de página de entrada. Impact, Bebas Neue, Anton, Oswald, Playfair Display (a serifa moderna de alto contraste), Abril Fatface, todas se leem mal em tamanhos de corpo mas captam a atenção em tamanhos de título. Combinar uma fonte de título display com uma fonte de corpo limpa é o padrão tipográfico mais comum em sites modernos.
• As fontes manuscritas e script imitam estilos escritos à mão. Úteis com moderação para marca pessoal ou de tipo convite; quase impossíveis de ler em tamanhos de corpo; devem ser usadas como se usam as maiúsculas (brevemente, deliberadamente).

Fontes variáveis, a silenciosa revolução moderna

A especificação OpenType Font Variations (TrueType GX Variations da Apple de 1994 + contribuições da Adobe, conjuntamente padronizadas como OpenType 1.8 em Setembro de 2016) permite que um único ficheiro de fonte descreva uma família infinita de variações relacionadas. Onde uma família tradicional distribui ficheiros separados para Light, Regular, Medium, Bold, Black, mais os seus itálicos (seis a dez ficheiros de 50-200 KB cada) uma fonte variável distribui um único ficheiro contendo todos os mesmos designs como variações contínuas ao longo de eixos (peso, largura, inclinação, tamanho óptico e eixos personalizados arbitrários que o designer tipográfico definir). O suporte de navegador chegou em Chrome 62 (Outubro de 2017), Firefox 62 (Setembro de 2018), Safari 11.0 / 11.1 (2017-2018) e Edge com Chromium (2020). Os principais lançamentos de fontes variáveis incluem Roboto Flex (Christian Robertson + Font Bureau, Outubro de 2022) que tem 13 eixos; Recursive (Stephen Nixon, 2019); Inter (Rasmus Andersson) com eixos de peso + inclinação; e a maioria das grandes famílias tipográficas distribui agora versões variáveis ao lado dos ficheiros estáticos tradicionais. A poupança de largura de banda é dramática: um ficheiro de fonte variável de 200 KB substitui oito ficheiros estáticos de 100 KB, oferecendo ainda mais flexibilidade de design.

Carregamento de fontes e o problema FOUT/FOIT

Quando um navegador descarrega um ficheiro de fonte personalizada, o que mostra entretanto? Duas estratégias extremas. FOIT (Flash of Invisible Text), não renderizar nenhum texto até a fonte chegar, depois mostrar o texto de repente. A página parece partida até a fonte carregar. FOUT (Flash of Unstyled Text), renderizar o texto imediatamente numa fonte de recurso, depois trocar para a fonte personalizada quando chegar. A página é legível desde a primeira frame mas a troca é visualmente abrupta. A propriedade CSS font-display (adicionada em CSS Fonts Module Level 4) dá controlo aos programadores: auto (predefinido do navegador, geralmente com tendência FOIT), block (FOIT completo), swap (FOUT completo, boa prática moderna dominante), fallback (breve bloco invisível e depois troca, com um recurso «aceitável» após alguns segundos), optional (saltar completamente a fonte personalizada se não carregar suficientemente rápido). Para Core Web Vitals e pontuações Lighthouse em 2026, font-display: swap é a recomendação padrão, acompanhada de sugestões preload para fontes críticas e uma fonte de recurso cuidadosamente escolhida que seja metricamente semelhante à personalizada (para que o layout não refloresça quando a troca acontece, a nova propriedade size-adjust em CSS Fonts Module Level 5 afina isto).

Escolher fontes consoante o trabalho

• Texto de interface: pilha de fontes do sistema primeiro (Apple SF, Segoe UI, Roboto, segue o SO do utilizador) para latência zero e aspecto adequado à plataforma. Se por razões de marca for necessária uma fonte personalizada, escolha uma sans humanista (Inter, Open Sans, Source Sans Pro) a 16 px ou maior.
• Leitura longa (artigos, blogues): serifa optimizada para ecrã (Georgia, Merriweather, Lora) a 18-22 px com altura de linha generosa (1,6-1,8). As serifas ajudam o seguimento ocular em linhas longas de texto.
• Wordmark de marca: uma fonte display distintiva usada num único tamanho grande. Combinar com uma fonte de corpo mais neutra. Investir aqui numa tipografia personalizada ou encomendada compensa, é a decisão tipográfica mais visível da marca.
• Blocos de código: uma fonte de programação dedicada (JetBrains Mono, Fira Code, Cascadia Code) a 14-15 px. As ligaduras de programação são uma preferência pessoal; muitos programadores adoram-nas, outros acham-nas confusas.
• Tabelas de números: uma fonte com algarismos tabulares (o algarismo 1 ocupa a mesma largura que 2, 3, etc.) para que as colunas de números se alinhem sem padding manual. A maioria das fontes modernas oferece algarismos tabulares através da propriedade font-variant-numeric: tabular-nums.
• Uso decorativo apenas: fontes manuscritas, scripts, fontes display retro. Use-as brevemente e deliberadamente; nunca para corpo de texto.

Perguntas frequentes

Qual a diferença entre fontes web-safe e fontes personalizadas ?

As fontes web-safe estão pré-instaladas nos dispositivos dos utilizadores, pelo que se renderizam instantaneamente sem pedido de rede. As fontes personalizadas (Google Fonts, Adobe Fonts, @font-face auto-alojado) têm de ser descarregadas, adicionando latência mas oferecendo variedade visual para além do conjunto pré-instalado pelo SO. A maioria dos sites modernos usa uma mistura: uma fonte personalizada como primária, fontes web-safe como recursos via a pilha font-family, e uma pilha de fontes do sistema (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) para elementos de interface onde se prefere o aspecto nativo da plataforma.

Como usar uma Google Font no meu site ?

Duas formas. Alojado em CDN: adicione uma etiqueta <link> para fonts.googleapis.com no <head> do HTML, depois referencie a fonte em CSS via font-family: 'Inter', sans-serif. Auto-alojado: descarregue os ficheiros WOFF2 do Google Fonts, aloje-os no seu próprio domínio e declare-os com @font-face. O auto-alojamento é preferível em contextos sensíveis à privacidade (um tribunal alemão decidiu em 2022 que carregar Google Fonts a partir do CDN da Google sem consentimento viola o RGPD). Adicione font-display: swap para controlar o comportamento de carregamento e pré-carregue fontes críticas para o desempenho.

Qual é uma boa fonte serifada para corpo de texto ?

Georgia (Matthew Carter, encomendada pela Microsoft em 1996 especificamente para renderização em ecrã) continua a ser uma excelente escolha e está pré-instalada em todos os SO de consumo. Do Google Fonts: Merriweather (Sorkin Type, 2010), Lora (Cyreal, 2011), PT Serif (Paratype, 2009), Source Serif Pro (Frank Grießhammer para a Adobe, 2014). Evite Times New Roman para corpo web, concebida para impressão de jornal em tamanhos pequenos, lê-se apertada e datada em ecrãs. Para títulos serifados modernos de alto contraste, Playfair Display funciona muito bem (evite no corpo de texto, contraste demasiado alto em tamanhos pequenos).

Esta ferramenta de pré-visualização funciona offline?

As fontes web-safe (Arial, Georgia, Verdana, etc.) funcionam offline porque são carregadas a partir do seu sistema operativo. As Google Fonts da galeria requerem uma obtenção de rede pontual a partir do CDN da Google para renderizar, uma vez carregadas ficam em cache e a pré-visualização funciona offline a partir desse momento. Coloque a página offline (modo de avião) após o carregamento inicial para confirmar; as fontes instaladas pelo SO continuam a renderizar, as Google Fonts usam o que estava em cache.

Ferramentas relacionadas