# Serifa vs sem serifa: como escolher o tipo de letra certo

[Canonical HTML page](https://gradiently.design/pt-pt/guide/serif-vs-sans-serif)

A velha regra dizia serifas para impressão e sem serifa para ecrãs. Os ecrãs mudaram, a regra não. Eis o que importa de facto quando escolhes.

## The short version

- Os tipos de letra com serifa têm pequenos traços de remate nas pontas das letras, e os tipos sem serifa não.
- Nenhum dos estilos é comprovadamente mais legível do que o outro; o desenho do tipo de letra concreto, o tamanho, o espaçamento e as proporções contam mais.
- A regra das serifas para impressão e sem serifa para ecrãs nasceu dos ecrãs de baixa resolução, e os ecrãs modernos de alta densidade apresentam bem os dois.
- As serifas tendem a ler-se como tradicionais, literárias ou requintadas, e as sem serifa como modernas, diretas ou neutras, mas estas associações dependem do tipo de letra concreto.
- Muitos designs fortes usam os dois: uma serifa para os títulos e uma sem serifa para o texto corrido, ou o inverso.

**Serifa vs sem serifa** é mais uma escolha de voz do que de legibilidade. Os tipos de letra com serifa têm pequenos traços de remate, chamados serifas, nas pontas das letras; os tipos sem serifa (em inglês *sans serif*, do francês *sans*, que quer dizer *sem*) não têm. Nenhum é comprovadamente mais fácil de ler. Escolhe pelo que a letra tem de dizer, onde vai ser lida e em que tamanho, e lembra-te de que podes usar os dois.

## Qual é a diferença, de facto

Olha para as pontas dos traços num T maiúsculo ou num i minúsculo. Num tipo com serifa, cada traço termina num pequeno pé ou apoio. Num sem serifa, simplesmente para. Os tipos com serifa também têm muitas vezes mais contraste entre traços grossos e finos, enquanto muitos sem serifa têm traços de espessura quase igual. Cada lado é uma família de estilos, não um só visual.

| Categoria | Características | Exemplo no Google Fonts | Costuma parecer |
| --- | --- | --- | --- |
| Serifa humanista (old-style) | Eixo inclinado e suave, contraste moderado | EB Garamond | Literária, calorosa |
| Serifa de transição | Mais direita, mais nítida | Libre Baskerville | Clássica, de confiança |
| Serifa didone | Contraste muito alto, serifas finíssimas | Playfair Display | Moda, luxo |
| Serifa egípcia (slab) | Serifas pesadas, em bloco | Roboto Slab | Sólida, confiante |
| Sem serifa grotesca | Algumas peculiaridades, ligeiro contraste | Work Sans | Honesta, um pouco retro |
| Sem serifa neogrotesca | Uniforme, neutra, formas fechadas | Inter | Moderna, simples, de produto |
| Sem serifa geométrica | Construída com círculos e linhas | Jost | Limpa, focada no design |
| Sem serifa humanista | Baseada na escrita à mão, formas abertas | Source Sans 3 | Simpática, legível |

As principais famílias de cada lado, com um exemplo gratuito de cada. Conhecer a categoria ajuda mais do que saber só se é com ou sem serifa.

## Uma história muito curta

As letras com serifa remontam às capitulares romanas e a séculos de impressão, e é por isso que as serifas ainda transmitem uma ideia de tradição e de livros. Os tipos sem serifa para impressão surgiram no início do século XIX e foram usados sobretudo em cartazes e títulos. No século XX, os designers modernistas e suíços fizeram da sem serifa a voz da clareza e da neutralidade. Nos primeiros ecrãs de computador, com poucos píxeis por letra, as serifas finas desfaziam-se, por isso as sem serifa tornaram-se a predefinição das interfaces, e tipos como o Verdana e o Georgia foram desenhados especificamente para funcionar nesses ecrãs.

## Legibilidade: o mito e o que importa em vez disso

Ainda vais ler que as serifas são mais fáceis de ler em papel porque guiam o olhar ao longo da linha, e que as sem serifa são mais fáceis em ecrã. Nenhuma das ideias vale como regra geral. O conselho sobre ecrãs tinha a ver com a baixa resolução; os ecrãs de alta densidade dos telemóveis e portáteis de hoje apresentam as serifas com nitidez. O que torna um texto legível é o desenho do tipo de letra concreto e a forma como é composto.

### Importa menos do que pensas

- Se o tipo tem serifas ou não
- A regra da serifa para papel e sem serifa para ecrã
- Que estilo está na moda este ano

### Importa mais

- Uma altura-x generosa e formas de letra abertas
- Tamanho, entrelinha e comprimento da linha
- Traços robustos em tamanhos pequenos, sem linhas finíssimas
- Diferenças claras entre letras parecidas, como I, l e 1

O tamanho e o espaçamento são as maiores alavancas, e aplicam-se por igual aos dois estilos. As [bases da tipografia](https://gradiently.design/pt-pt/guide/typography-basics) dão valores sensatos para cada um.

## O que as serifas e as sem serifa costumam transmitir

A letra carrega associações, aprendidas nos sítios onde já a vimos. São tendências, não regras, e um tipo de letra concreto pode contrariar a sua categoria: uma serifa brincalhona ou uma sem serifa formal são perfeitamente possíveis.

### A serifa costuma dizer

- Tradição, herança, ofício
- Editorial, literária, ponderada
- Requinte, sobretudo com alto contraste
- Calor, com formas old-style mais suaves

### A sem serifa costuma dizer

- Moderna, direta, eficiente
- Neutra, de produto, técnica
- Simpática, com formas arredondadas ou humanistas
- Ousada e forte, em pesos pesados

## Serifa ou sem serifa para ecrã, impressão e redes sociais

| Onde | Boa predefinição | Porquê |
| --- | --- | --- |
| Etiquetas e botões de interface | Sem serifa | Tamanhos pequenos, formas robustas, leitura rápida |
| Leitura longa em ecrã | Qualquer uma | Escolhe um tipo desenhado para texto, num tamanho generoso |
| Livros impressos e documentos longos | Qualquer uma, muitas vezes serifa | Convenção, e muitas serifas de texto excelentes |
| Títulos de publicações nas redes sociais | Qualquer uma, com peso | Os tamanhos grandes deixam as serifas mostrar o carácter |
| Texto pequeno sobre fundos carregados | Sem serifa | Os traços uniformes sobrevivem a um contraste que muda |
| Marcas de luxo e editoriais | Muitas vezes serifa | As serifas de alto contraste transmitem requinte |

Predefinições, não regras. O desenho do próprio tipo de letra conta mais do que a categoria.

Nos telemóveis, as partes finas das serifas de alto contraste podem desaparecer em tamanhos pequenos. Os [tipos de letra para redes sociais](https://gradiently.design/pt-pt/guide/fonts-for-social-media) mostram o que aguenta.

## Como escolher para a tua marca

1. **Dá nome à voz** Escreve três palavras para como a tua marca deve soar, como *calma, precisa, calorosa*. A [personalidade da marca](https://gradiently.design/pt-pt/guide/brand-personality) ajuda.
2. **Faz uma lista curta por categoria, não por estilo** Caloroso e literário aponta para serifas old-style ou sem serifa humanistas; preciso e moderno para neogrotescas ou serifas de transição.
3. **Testa as tuas palavras reais** Compõe o teu nome, um título e um parágrafo em três candidatos, em tamanhos reais.
4. **Verifica o lado prático** Pesos, itálicos, os idiomas de que precisas e a licença.
5. **Pondera usar os dois** Uma serifa para os títulos e uma sem serifa para o texto corrido, ou o inverso, dá-te amplitude. A [combinação de tipos de letra](https://gradiently.design/pt-pt/guide/font-pairing) mostra como.

Na web, também podes contar com os tipos de letra que já estão nos dispositivos das pessoas. Estas pilhas dão-te uma boa serifa ou sem serifa sem nenhuma transferência:

```css
.serif {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

.sans {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
```

Pilhas de tipos de letra do sistema para serifa e sem serifa. Cada browser usa o primeiro tipo que tiver, terminando na família genérica.

Para a decisão mais ampla, incluindo licenças e idiomas, lê sobre os [tipos de letra da marca](https://gradiently.design/pt-pt/guide/brand-fonts).

## FAQ

### Qual é a diferença entre serifa e sem serifa?

Os tipos de letra com serifa têm pequenos traços de remate nas pontas das letras; os tipos sem serifa não têm.

### A serifa ou a sem serifa é mais fácil de ler?

Nenhuma é comprovadamente mais fácil. A legibilidade depende mais do desenho do tipo de letra concreto, do tamanho, da entrelinha e do comprimento da linha.

### Devo usar serifa ou sem serifa num site?

Ambas funcionam nos ecrãs modernos. As sem serifa são uma predefinição segura para texto de interface; as serifas desenhadas para texto funcionam bem em leituras longas num tamanho generoso.

### Posso usar serifa e sem serifa juntas?

Sim. Uma serifa para os títulos com uma sem serifa para o texto corrido, ou o inverso, é uma das combinações de tipos de letra mais fiáveis.