Tipografia e texto

Serifa ou sem serifa: como escolher a fonte certa

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.

GradientlyConta verificada do Gradiently··5 min de leitura
Capa: Eucalyptus Fanfare · GR·1BHG·XT

Resumindo

  • 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.
Nesta página

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.

CategoriaCaracterísticasExemplo no Google FontsCostuma parecer
Serifada humanista (old-style)Eixo inclinado e suave, contraste moderadoEB GaramondLiterária, calorosa
Serifada transicionalMais vertical, mais nítidaLibre BaskervilleClássica, confiável
Serifada didoneContraste altíssimo, serifas finíssimasPlayfair DisplayModa, luxo
Serifada egípcia (slab)Serifas pesadas, em blocoRoboto SlabRobusta, confiante
Sem serifa grotescaAlgumas peculiaridades, contraste leveWork SansHonesta, um pouco retrô
Sem serifa neogrotescaUniforme, neutra, formas fechadasInterModerna, simples, com cara de produto
Sem serifa geométricaConstruída com círculos e linhasJostLimpa, guiada pelo design
Sem serifa humanistaBaseada na escrita à mão, formas abertasSource Sans 3Simpá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 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

OndeBom padrãoPor quê
Rótulos e botões de interfaceSem serifaTamanhos pequenos, formas firmes, leitura rápida
Leitura longa na telaQualquer umaEscolha uma fonte feita para texto, num tamanho generoso
Livros impressos e documentos longosQualquer uma, muitas vezes serifadaConvenção, e muitas serifadas excelentes para texto
Títulos de posts sociaisQualquer uma, com pesoTamanhos grandes deixam as serifas mostrarem o seu caráter
Texto pequeno sobre fundos carregadosSem serifaTraços uniformes resistem ao contraste que muda
Marcas de luxo e editoriaisMuitas vezes serifadaSerifadas 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 mostra o que se sustenta.

Como escolher para a sua marca

  1. 1

    Dê nome à voz

    Escreva três palavras para como a sua marca deve soar, como calma, precisa, calorosa. A personalidade de marca ajuda.

  2. 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. 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. 4

    Confira o lado prático

    Pesos, itálicos, os idiomas de que você precisa e a licença.

  5. 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 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.

Perguntas frequentes

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.

Compartilhar este guia

Escrito pelo GradientlyConta verificada do Gradiently

A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.

Ver nosso perfil