A tipografia web é a escolha e a composição do texto num website: que tipos de letra usar, com que tamanhos, comprimentos de linha, entrelinha, pesos e contraste, e como carregar as fontes para que as páginas continuem rápidas. Uma boa tipografia web torna o texto fácil de ler em qualquer ecrã, transmite a voz da marca e é acessível. Um sistema sensato raramente precisa de mais de dois tipos de letra e de uma escala curta de tamanhos.
Última atualização: 29 de outubro de 2026.
Este guia explica como escolher tipos de letra para um website, como criar uma escala tipográfica, as definições que decidem a legibilidade, os requisitos de acessibilidade, o carregamento de fontes e o desempenho, as licenças, a tipografia em vários idiomas e os erros que vemos com mais frequência. Foi escrito para responsáveis de marketing, fundadores e designers que preparam o briefing de um website ou o revêem.
Na Odduel, agência de criatividade e tecnologia em Barcelona e São Paulo, o nosso serviço de branding desenha identidades cuja tipografia tem de funcionar tanto no ecrã como no papel. Para a The Sugar Coated Cult combinámos a Druk Condensed e a Druk Wide nos títulos com a Helvetica Neue no texto; para a Torto Cozinha, a Neue Metana nos títulos com a Avenir Next no texto corrido. O nosso próprio website usa a Inter, alojada nos nossos servidores. Os princípios que se seguem vêm desse trabalho.
Em resumo: escolha um tipo de letra para o texto que se leia bem em tamanhos pequenos no ecrã e, no máximo, outro para os títulos que transmita a marca. Use texto corrido com 16 píxeis ou mais, linhas de cerca de 45 a 75 caracteres e uma entrelinha de 1,4 a 1,6 vezes o tamanho. Crie uma escala de tamanhos curta, mantenha um contraste forte, permita que o texto seja ampliado, carregue apenas os pesos que usa, aloje as fontes no seu servidor quando a licença o permitir e verifique cada idioma em que publica.
Como escolher os tipos de letra de um website?
Comece pela função de cada tipo de letra, não por um mood board.
- Tipo de letra de texto: o que sustenta parágrafos, formulários e menus. Precisa de formas abertas, de uma distinção clara entre letras parecidas como I, l e 1, de uma altura-x generosa para tamanhos pequenos e dos pesos e itálicos de que precisa.
- Tipo de letra de destaque: opcional, para títulos e frases curtas onde a marca fala mais alto. Pode ser mais distintivo, porque é lido em pequenos blocos e em tamanhos grandes.
- Tipo de letra monoespaçado ou de apoio: pontual, para código, dados ou um elemento específico da marca.
Teste as opções com os seus conteúdos reais, em cada idioma em que publica, nos tamanhos que vai usar, num telemóvel e num portátil. Um tipo de letra que impressiona num espécime pode cansar a vista num parágrafo longo.
O tipo de letra de destaque é onde a tipografia e a identidade se encontram. Deve vir do sistema da própria marca, para que o website, as embalagens, as publicações nas redes sociais e a sinalética falem com a mesma voz. Se o tipo de letra de destaque da identidade não tiver licença para web ou não cobrir os seus idiomas, escolha um tipo de letra preparado para web com uma estrutura semelhante, em vez de um substituto sem relação, e registe a decisão no manual de marca. O nosso guia de branding explica como a tipografia se encaixa na identidade como um todo, do logótipo ao tom de voz.
Serifada ou não serifada no ecrã?
Os ecrãs atuais apresentam bem ambas. Os tipos de letra não serifados continuam a ser a escolha habitual para interfaces e texto corrido, porque se mantêm nítidos em tamanhos pequenos e em ecrãs de menor resolução. Os serifados podem funcionar muito bem em leituras longas, websites editoriais e marcas que procuram uma voz mais literária, desde que tenham sido desenhados para ecrã e sejam usados num tamanho confortável. A escolha depende do tom e da legibilidade nos seus tamanhos, não de uma regra.
Como construir uma escala tipográfica?
Uma escala tipográfica é um pequeno conjunto de tamanhos usados de forma consistente em todo o website. Mantém as páginas coerentes e torna o design e o desenvolvimento mais rápidos.
| Função | Tamanho habitual em computador | Tamanho habitual em telemóvel | Entrelinha | Notas |
|---|---|---|---|---|
| Texto corrido | 16 a 20 px | 16 a 18 px | 1,4 a 1,6 | Nunca abaixo de 16 px em parágrafos |
| Texto pequeno (legendas, etiquetas) | 13 a 14 px | 13 a 14 px | 1,3 a 1,5 | Apenas textos curtos, com contraste forte |
| H3 | 20 a 24 px | 18 a 22 px | 1,2 a 1,35 | Claramente maior ou mais forte do que o texto |
| H2 | 28 a 40 px | 24 a 30 px | 1,1 a 1,25 | Títulos das secções principais |
| H1 | 40 a 80 px ou mais | 30 a 44 px | 1,0 a 1,15 | Um por página; pode usar a fonte de destaque |
São intervalos, não uma norma. Muitos websites usam hoje tamanhos fluidos, que crescem de forma gradual entre um mínimo e um máximo à medida que a janela se alarga: os títulos cabem em telemóveis estreitos e continuam a ter presença em ecrãs grandes.
Que definições determinam a legibilidade?
- Comprimento da linha: cerca de 45 a 75 caracteres por linha no texto corrido, incluindo espaços. Linhas mais longas dificultam encontrar a linha seguinte; linhas mais curtas quebram o ritmo.
- Entrelinha: cerca de 1,4 a 1,6 vezes o tamanho da letra nos parágrafos, mais apertada nos títulos grandes.
- Espaço entre parágrafos: um espaço claro entre parágrafos, normalmente próximo de uma linha.
- Alinhamento: texto alinhado à esquerda na maior parte dos conteúdos em línguas que se leem da esquerda para a direita; evite o texto justificado na web, que cria espaços irregulares.
- Pesos: regular para o texto corrido e um peso claramente mais forte para destaques e títulos; pesos muito finos leem-se mal em tamanhos pequenos.
- Maiúsculas e espaçamento: etiquetas curtas em maiúsculas ganham com um espaçamento entre letras ligeiramente maior; textos longos em maiúsculas leem-se mal.
- Viúvas e quebras: evite palavras isoladas na última linha de títulos e parágrafos curtos; o CSS atual consegue equilibrar automaticamente as linhas dos títulos.
Como é que a tipografia influencia a acessibilidade?
A tipografia acessível é, sobretudo, boa tipografia aplicada com coerência. As Diretrizes de Acessibilidade para Conteúdo Web fixam um contraste mínimo de 4,5:1 para texto normal e de 3:1 para texto grande, e exigem que o texto possa ser ampliado e o espaçamento aumentado sem que se perca conteúdo.
- Contraste: verifique o texto sobre o fundo real, incluindo texto sobre fotografias.
- Ampliação: use unidades relativas para que o texto cresça quando o visitante aumenta o tamanho no browser.
- Espaçamento: a composição deve aguentar um aumento da entrelinha e do espaço entre letras e palavras.
- Nada de texto em imagens: títulos e mensagens devem ser texto real, que se possa ler, traduzir e ampliar.
- Foco e links claros: os links devem parecer links e o foco do teclado deve ser visível.
O nosso guia de acessibilidade de websites trata em mais detalhe os requisitos aplicáveis na Europa.
Como afeta o carregamento de fontes o desempenho?
As fontes são ficheiros que cada visitante descarrega, por isso afetam a velocidade e a forma como a página aparece enquanto carrega.
- Carregue só o que usa: cada peso e estilo é um ficheiro à parte; duas famílias com três pesos cada costumam chegar.
- Use formatos atuais: o WOFF2 é comprimido e funciona nos browsers atuais.
- Aloje as fontes sempre que possível: servi-las a partir do seu próprio domínio evita ligações extra e, com alguns serviços, a transferência de dados dos visitantes para terceiros, o que pesa à luz do RGPD.
- Controle como o texto aparece: defina o font-display para que o texto surja logo numa fonte alternativa e escolha uma alternativa com proporções semelhantes, para que as linhas não saltem quando a fonte web chega.
- Pré-carregue o ficheiro principal usado no primeiro ecrã e reduza as fontes aos caracteres de que os seus idiomas precisam.
- Considere fontes variáveis, que reúnem muitos pesos num só ficheiro, quando usa vários pesos.
As boas práticas para fontes da Google explicam estas técnicas em detalhe.
Como funciona o licenciamento de fontes na web?
As fontes são software com licenças. Uma licença de desktop para criar materiais impressos normalmente não cobre a incorporação da fonte num website, e as licenças web podem ter preço por visualizações de página mensais ou por domínio. As famílias open source podem ser usadas livremente dentro dos termos da licença. Mantenha um registo de cada fonte, da sua licença e do que cobre, e inclua-o no manual de marca; o nosso guia sobre manual de marca explica o que mais deve constar.
O que muda nos websites multilingues?
Um website publicado em vários idiomas precisa de tipos de letra que cubram todos os caracteres que vai mostrar: os acentos do francês, do português e do espanhol, o ß e os tremas do alemão, e qualquer outro sistema de escrita que pense acrescentar. Verifique o conjunto de caracteres do tipo de letra antes de o escolher e teste os títulos no idioma mais longo, porque as palavras em alemão e em português podem ser muito mais compridas do que em inglês. Confirme também que as quebras de linha e a hifenização funcionam em cada idioma. Um tamanho que deixa um título em inglês numa só linha pode ter de se ajustar noutros idiomas.
Quais são os erros mais comuns na tipografia web?
- Demasiados tipos de letra ou pesos, que dão um aspeto incoerente e tornam as páginas mais lentas.
- Texto corrido demasiado pequeno, sobretudo nos telemóveis.
- Texto cinzento com pouco contraste sobre fundos claros.
- Linhas demasiado longas em ecrãs largos.
- Texto dentro de imagens, que os leitores de ecrã não conseguem ler e que não se pode traduzir nem redimensionar.
- Fontes carregadas de vários serviços sem necessidade, o que acrescenta ligações e transferências de dados.
- Esquecer os outros idiomas, com acentos em falta ou títulos que transbordam.
- Nenhuma alternativa prevista, pelo que o texto fica invisível ou salta enquanto as fontes carregam.
Perguntas frequentes
O que é a tipografia web?
A tipografia web é a escolha e a composição do texto nos websites: os tipos de letra, os tamanhos, o comprimento e o espaçamento das linhas, os pesos, o contraste e a forma como as fontes são carregadas. Determina se o texto se lê com facilidade no telemóvel e no computador, como passa a voz da marca e se o website é acessível e rápido.
Qual é o melhor tamanho de letra para o texto corrido de um website?
Na maioria dos websites, o texto corrido deve ter pelo menos 16 píxeis, e muitas vezes entre 17 e 20 píxeis no computador, para uma leitura confortável. Tamanhos menores servem apenas para legendas e etiquetas curtas. Um espaçamento entre linhas de cerca de 1,4 a 1,6 vezes o tamanho e linhas de 45 a 75 caracteres contam tanto para a legibilidade como o próprio tamanho.
Quantas fontes deve usar um website?
Normalmente um ou dois tipos de letra: um para o texto corrido, que se leia bem em tamanhos pequenos, e, se fizer sentido, um segundo para os títulos, que exprima a marca. Dentro deles, carregue apenas os pesos que usa de facto. Mais tipos de letra raramente melhoram um design, tornam as páginas menos coerentes e acrescentam ficheiros que cada visitante tem de descarregar.
Devo alojar as fontes web no meu próprio servidor?
Alojar as fontes no próprio servidor é muitas vezes a melhor opção, quando a licença o permite. Fontes servidas a partir do seu domínio evitam ligações extra a servidores de terceiros, dão-lhe controlo sobre a cache e o carregamento e evitam enviar dados dos visitantes para um serviço externo, o que conta para o cumprimento do RGPD na Europa. Verifique primeiro a licença da fonte, porque algumas só permitem que seja servida pela própria fundição.
Como é que a tipografia influencia a acessibilidade?
A tipografia determina se pessoas com baixa visão, dislexia ou dispositivos mais antigos conseguem ler os seus conteúdos. Uma tipografia acessível usa contraste suficiente, tamanhos legíveis, texto real em vez de imagens, unidades que permitem redimensionar o texto, layouts que aguentam mais espaçamento e ligações e foco bem visíveis. Estes requisitos vêm das Diretrizes de Acessibilidade para o Conteúdo da Web (WCAG) e das regras europeias de acessibilidade.
Uma boa tipografia web é um sistema curto e coerente, testado com conteúdos reais em todos os idiomas em que publica. Veja como o nosso serviço de branding desenha tipografia que funciona no ecrã e no papel, ou fale-nos do seu projeto e analisamos a tipografia do seu website.
