# Serifa ou sem serifa: como escolher a fonte certa

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

A regra antiga dizia serifa para o impresso e sem serifa para a tela. As telas mudaram, a regra não. Veja o que realmente importa na hora de escolher.

## The short version

- As fontes serifadas têm pequenos traços de acabamento nas pontas das letras, e as fontes sem serifa não têm.
- Nenhum dos dois estilos é comprovadamente mais legível que o outro; o desenho da fonte específica, o tamanho, o espaçamento e as proporções importam mais.
- A regra de serifa para o impresso e sem serifa para a tela veio das telas de baixa resolução, e as telas modernas de alta densidade exibem bem as duas.
- As serifadas tendem a parecer tradicionais, literárias ou refinadas, e as sem serifa modernas, diretas ou neutras, mas essas associações dependem da fonte específica.
- Muitos designs fortes usam as duas: uma serifada nos títulos e uma sem serifa no texto corrido, ou o contrário.

**Serifa ou sem serifa** é mais uma escolha de voz do que de legibilidade. As fontes serifadas têm pequenos traços de acabamento, chamados serifas, nas pontas das letras; as fontes sem serifa (ou *sans serif*, do francês *sans*, que significa *sem*) não têm. Nenhuma é comprovadamente mais fácil de ler. Escolha pelo que o texto precisa dizer, por onde ele será lido e em que tamanho, e lembre que você pode usar as duas.

## Qual é a diferença de verdade

Olhe as pontas dos traços num T maiúsculo ou num i minúsculo. Numa fonte serifada, cada traço termina com um pequeno pé ou apoio. Numa sem serifa, ele simplesmente para. As serifadas também costumam ter mais contraste entre traços grossos e finos, enquanto muitas sem serifa têm traços de espessura quase uniforme. Cada lado é uma família de estilos, não um visual único.

| Categoria | Características | Exemplo no Google Fonts | Costuma parecer |
| --- | --- | --- | --- |
| Serifada humanista (old-style) | Eixo inclinado e suave, contraste moderado | EB Garamond | Literária, calorosa |
| Serifada transicional | Mais vertical, mais nítida | Libre Baskerville | Clássica, confiável |
| Serifada didone | Contraste altíssimo, serifas finíssimas | Playfair Display | Moda, luxo |
| Serifada egípcia (slab) | Serifas pesadas, em bloco | Roboto Slab | Robusta, confiante |
| Sem serifa grotesca | Algumas peculiaridades, contraste leve | Work Sans | Honesta, um pouco retrô |
| Sem serifa neogrotesca | Uniforme, neutra, formas fechadas | Inter | Moderna, simples, com cara de produto |
| Sem serifa geométrica | Construída com círculos e linhas | Jost | Limpa, guiada pelo 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 é serifada ou sem serifa.

## Uma história bem curta

As letras serifadas remontam às capitulares romanas e a séculos de impressão, e é por isso que as serifas ainda carregam uma sensação de tradição e de livro. As fontes sem serifa para impressão surgiram no começo do século XIX e eram usadas principalmente em cartazes e títulos. No século XX, os designers modernistas e suíços fizeram das sem serifa a voz da clareza e da neutralidade. Nas primeiras telas de computador, com poucos pixels por letra, as serifas finas se desfaziam, então as sem serifa viraram o padrão das interfaces, e fontes como Verdana e Georgia foram desenhadas especificamente para funcionar nessas telas.

## Legibilidade: o mito e o que importa de verdade

Você ainda vai ler que as serifadas são mais fáceis de ler no impresso porque guiam o olhar pela linha, e que as sem serifa são mais fáceis na tela. Nenhuma das duas afirmações vale como regra geral. O conselho sobre a tela tinha a ver com baixa resolução; as telas de alta densidade dos celulares e notebooks de hoje exibem serifas com nitidez. O que torna um texto legível de verdade é o desenho da fonte específica e a forma como ela é composta.

### Importa menos do que parece

- Se a fonte tem serifas
- A regra de serifa para o impresso e sem serifa para a tela
- Qual estilo está na moda este ano

### Importa mais

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

Tamanho e espaçamento são as maiores alavancas, e valem igualmente para os dois estilos. O guia de [noções básicas de tipografia](https://gradiently.design/pt-br/guide/typography-basics) traz padrões sensatos para cada um.

## O que serifadas e sem serifa costumam transmitir

A tipografia carrega associações, aprendidas pelos lugares onde já a vimos. São tendências, não regras, e uma fonte específica pode ir contra a sua categoria: uma serifada divertida ou uma sem serifa formal são totalmente possíveis.

### A serifada costuma dizer

- Tradição, herança, artesanato
- Editorial, literário, ponderado
- Refinamento, sobretudo com alto contraste
- Calor, com formas old-style mais suaves

### A sem serifa costuma dizer

- Moderno, direto, eficiente
- Neutro, com cara de produto, técnico
- Simpático, com formas arredondadas ou humanistas
- Ousado e chamativo, nos pesos mais grossos

## Serifa ou sem serifa para telas, impresso e redes sociais

| Onde | Bom padrão | Por quê |
| --- | --- | --- |
| Rótulos e botões de interface | Sem serifa | Tamanhos pequenos, formas firmes, leitura rápida |
| Leitura longa na tela | Qualquer uma | Escolha uma fonte feita para texto, num tamanho generoso |
| Livros impressos e documentos longos | Qualquer uma, muitas vezes serifada | Convenção, e muitas serifadas excelentes para texto |
| Títulos de posts sociais | Qualquer uma, com peso | Tamanhos grandes deixam as serifas mostrarem o seu caráter |
| Texto pequeno sobre fundos carregados | Sem serifa | Traços uniformes resistem ao contraste que muda |
| Marcas de luxo e editoriais | Muitas vezes serifada | Serifadas de alto contraste transmitem refinamento |

Padrões, não regras. O desenho da própria fonte importa mais do que a sua categoria.

No celular, as partes finas das serifadas de alto contraste podem sumir em tamanhos pequenos. O guia de [fontes para redes sociais](https://gradiently.design/pt-br/guide/fonts-for-social-media) mostra o que se sustenta.

## Como escolher para a sua marca

1. **Dê nome à voz** Escreva três palavras para como a sua marca deve soar, como *calma, precisa, calorosa*. A [personalidade de marca](https://gradiently.design/pt-br/guide/brand-personality) ajuda.
2. **Faça uma lista por categoria, não por estilo** Caloroso e literário aponta para serifadas old-style ou sem serifa humanistas; preciso e moderno, para neogrotescas ou serifadas transicionais.
3. **Teste as suas palavras reais** Componha o seu nome, um título e um parágrafo em três candidatas, em tamanhos reais.
4. **Confira o lado prático** Pesos, itálicos, os idiomas de que você precisa e a licença.
5. **Pense em usar as duas** Uma serifada nos títulos e uma sem serifa no texto corrido, ou o contrário, dão variedade. O guia de [combinação de fontes](https://gradiently.design/pt-br/guide/font-pairing) mostra como.

Na web, você também pode contar com as fontes que já estão nos aparelhos das pessoas. Estas pilhas dão uma boa serifada ou sem serifa sem nenhum download:

```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 fontes do sistema para serifada e sem serifa. Cada navegador usa a primeira fonte que tiver, terminando na família genérica.

Para a decisão mais ampla, incluindo licenças e idiomas, leia [fontes da marca](https://gradiently.design/pt-br/guide/brand-fonts).

## FAQ

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

As fontes serifadas têm pequenos traços de acabamento nas pontas das letras; as fontes sem serifa não têm.

### Serifada ou sem serifa: qual é mais fácil de ler?

Nenhuma é comprovadamente mais fácil. A legibilidade depende mais do desenho da fonte específica, do tamanho, da entrelinha e do comprimento da linha.

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

As duas funcionam nas telas modernas. As sem serifa são um padrão seguro para textos de interface; serifadas desenhadas para texto funcionam bem em leituras longas num tamanho generoso.

### Posso usar serifada e sem serifa juntas?

Sim. Uma serifada nos títulos com uma sem serifa no texto corrido, ou o contrário, é uma das combinações de fontes mais confiáveis.