Tipografia: pares de fonte e quando usar cada uma

Trocar a fonte de um projeto costuma ser tratado como decisão estética pura — "essa aqui é mais bonita". Mas cada família tipográfica carrega uma associação que o olho aprendeu a reconhecer com anos de exposição a jornal, livro, produto digital. Usar a fonte errada no contexto errado comunica algo que você não quis dizer.

Serifada vs. sem serifa: quando cada uma comunica melhor

Uma fonte serifada (com pequenos traços de acabamento nas letras, como Georgia ou Playfair Display) carrega peso editorial — remete a jornal, livro, revista, tradição impressa. Funciona bem em contextos onde você quer transmitir sofisticação, narrativa ou autoridade: uma landing page de produto de luxo, um blog editorial, um convite.

Uma fonte sem serifa (sans-serif, como Inter ou Helvetica) tem traços limpos e uniformes, e tende a renderizar melhor em tamanhos pequenos na tela — por isso domina produto digital, dashboard, aplicativo: onde legibilidade em telas pequenas e "sensação de ferramenta confiável" importam mais do que narrativa.

Isso não é regra absoluta — existem produtos digitais premiados que usam serifada com sucesso —, mas é um ponto de partida sólido: se a tela é primariamente uma ferramenta de trabalho, sans-serif costuma servir melhor; se é primariamente uma experiência editorial ou de marca, serifada pode comunicar mais.

Escala tipográfica: por que 3-4 tamanhos bastam

Um erro comum é criar um tamanho de fonte novo pra cada situação (13px aqui, 15px ali, 17px acolá). Isso quebra a consistência tratada na lição 7 e força quem usa a decorar hierarquias visuais diferentes em cada tela. Uma escala pequena e fixa — título, subtítulo, corpo, legenda — cobre a grande maioria dos casos reais.

--text-titulo:    1.5rem;   /* 24px */
--text-subtitulo: 1.125rem; /* 18px */
--text-corpo:     0.9375rem; /* 15px */
--text-legenda:   0.8125rem; /* 13px */

line-height: o espaço entre as linhas

line-height (entrelinha) controla a distância vertical entre linhas de texto. Um valor muito apertado, perto de 1, faz as linhas quase se tocarem — o olho perde a referência de onde a próxima linha começa quando volta pro início, e a leitura cansa rápido. Um line-height entre 1.4 e 1.6 costuma equilibrar bem legibilidade e densidade pra texto de corpo; títulos grandes toleram valores mais apertados porque têm menos linhas pra acompanhar.

.corpo-apertado { font-size: 1rem; line-height: 1; }     /* cansa a leitura */
.corpo-confortavel { font-size: 1rem; line-height: 1.5; } /* fácil de acompanhar */