Noções básicas de tipografia web

Tipografia é como o texto parece e se comporta em uma página.

Uma boa tipografia deixa o conteúdo mais fácil de ler. Ela também ajuda títulos, parágrafos, botões e rótulos a parecerem organizados.

Em CSS, a tipografia é controlada com propriedades como font-family, font-size, line-height, text-align e regras simples de formatação.

O que significa tipografia web

Tipografia web significa escolher e estilizar texto para um site.

Não é apenas deixar o texto maior ou menor. Ela também inclui:

• qual fonte é usada
• qual é o tamanho do texto
• quanto espaço existe entre as linhas
• se o texto está alinhado à esquerda, ao centro ou à direita
• se o texto está em negrito, itálico, maiúsculas ou sublinhado

O objetivo é simples: tornar o texto claro e confortável de ler.

Font family

A propriedade font-family diz ao navegador qual fonte usar.

Normalmente você escreve mais de um nome de fonte. Essa lista é chamada de font stack. O navegador tenta usar a primeira fonte. Se essa fonte não estiver disponível, ele tenta a próxima.

O último valor deve ser uma família genérica, como sans-serif, serif ou monospace.

Se o nome de uma fonte tiver espaços, coloque-o entre aspas:

Use uma ou duas famílias de fontes em uma página. Muitas fontes podem deixar o design confuso.

Font size

A propriedade font-size controla quão grande o texto aparece.

Duas unidades úteis para iniciantes são px e rem.

• px dá um tamanho fixo.
• rem escala a partir do tamanho de fonte raiz da página.

Em muitos navegadores, 1rem costuma ser 16px, então 2rem costuma ser 32px.

Prefira rem para tamanhos de texto. Se uma pessoa aumenta o tamanho de fonte padrão do navegador para ler melhor, o texto em rem escala com essa configuração, mas o texto em px fica fixo.

Use tamanhos de texto legíveis. Texto muito pequeno é difícil de ler, especialmente em celulares.

Line height

A propriedade line-height controla o espaço vertical entre as linhas de texto.

Pense nela como um respiro dentro de um parágrafo.

Um valor sem unidade como 1.6 é comum. Ele significa que a altura da linha é 1.6 vezes o tamanho atual da fonte.

Um line-height baixo pode deixar os parágrafos apertados. Um valor por volta de 1.5 ou 1.6 costuma ser mais fácil de ler para texto comum.

Text alignment

A propriedade text-align controla como o texto se alinha horizontalmente.

Valores comuns incluem:

• left: alinha o texto à esquerda
• center: centraliza o texto
• right: alinha o texto à direita
• justify: estica as linhas para que as duas bordas fiquem alinhadas

O alinhamento central funciona bem para títulos curtos.

Para parágrafos longos, o alinhamento à esquerda costuma ser mais fácil de ler. Parágrafos centralizados dificultam encontrar o início da próxima linha.

Formatação simples de texto

CSS também tem propriedades para formatação simples de texto.

Propriedades úteis de formatação:

• font-weight: controla o peso, como normal ou bold
• font-style: controla a inclinação, como normal ou italic
• text-transform: muda a capitalização, como uppercase, lowercase ou capitalize
• text-decoration: adiciona ou remove linhas, como underline ou none

Tenha cuidado com sublinhados. Na web, texto sublinhado normalmente significa um link.

Exemplo executável: tipografia em um card de artigo

Este exemplo combina família de fonte, tamanho de fonte, altura de linha, alinhamento e formatação de texto.

Experimente alterar os valores de CSS e executar o exemplo novamente.

<article class="article-card">
  <p class="category">Conceitos de CSS</p>
  <h2>Aprendendo tipografia web</h2>
  <p class="summary">
    Texto claro ajuda as pessoas a lerem sua página sem esforço. Um bom tamanho de fonte e
    line-height podem deixar um artigo simples mais polido.
  </p>
  <a href="#">Ler mais</a>
</article>

<style>
  .article-card {
    max-width: 420px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: Arial, Helvetica, sans-serif;
  }

  .category {
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #666;
  }

  .article-card h2 {
    font-size: 1.8rem;
    line-height: 1.2;
  }

  .summary {
    font-size: 1rem;
    line-height: 1.6;
    text-align: left;
  }
</style>

O card usa uma única lista de fontes, um título maior, espaçamento legível no parágrafo e texto de categoria em maiúsculas.

Erros comuns de iniciantes

• Usar muitas fontes: uma ou duas famílias de fontes geralmente são suficientes.
• Esquecer fontes de fallback: termine uma lista de fontes com uma família genérica como sans-serif.
• Deixar o texto pequeno demais: o texto comum deve ser confortável de ler.
• Usar altura de linha apertada: parágrafos precisam de espaço vertical suficiente.
• Centralizar parágrafos longos: o alinhamento central é melhor para textos curtos.
• Sublinhar texto normal: sublinhados podem fazer o texto parecer clicável.

Mini tarefa

Veja este CSS:

Qual propriedade você deve adicionar se quiser mais espaço vertical entre as linhas de texto?

Confira as respostas do quiz quando estiver pronto.

Quiz curto com respostas

1. Qual propriedade CSS escolhe a fonte?
2. Se o tamanho de fonte raiz é 16px, qual é o tamanho de 2rem?
3. Por que "Times New Roman" deve ficar entre aspas?

Respostas:

1. font-family.
2. 32px.
3. Porque o nome da fonte contém espaços.

Resposta da mini tarefa: adicione line-height.

Pequeno desafio

Estilize o texto de perfil abaixo.

Seus objetivos:

• Defina uma lista de fontes sans-serif em .profile.
• Deixe o nome em maiúsculas.
• Deixe o nome com peso normal.
• Dê ao parágrafo uma altura de linha confortável.

<div class="profile">
  <h3 class="name">Jane Doe</h3>
  <p class="bio">Estou aprendendo como a tipografia torna o texto mais fácil de ler na web.</p>
</div>

<style>
  .profile {
  }

  .name {
  }

  .bio {
  }
</style>

Uma possível solução:

Summary

• font-family escolhe a fonte e deve incluir fontes de fallback.
• font-size controla quão grande o texto aparece.
• line-height controla o espaço vertical entre linhas.
• text-align controla o alinhamento horizontal do texto.
• font-weight altera o peso.
• font-style pode colocar o texto em itálico.
• text-transform muda a capitalização do texto.
• text-decoration adiciona ou remove linhas, como sublinhados.