Propriedade font-family: Escolhendo a 'letra' do seu texto

Aprenda a definir a fonte do seu texto, usando fontes seguras e web fonts.

Imagine que você está escrevendo uma carta importante. A escolha da caneta e do tipo de letra que você usa faz toda a diferença na mensagem que você quer passar, certo? No desenvolvimento web, a font-family é exatamente isso: ela define a fonte (ou família de fontes) que será usada para exibir o texto em um elemento HTML.

A font-family é uma das propriedades mais importantes para a tipografia, pois ela tem um impacto direto na legibilidade, na estética e na personalidade do seu site.

Pense na font-family como a "caligrafia" do seu site. Você pode escolher uma caligrafia mais formal, mais divertida, mais moderna, etc.

Como usar a propriedade font-family

A sintaxe é simples: você seleciona o elemento e atribui um ou mais nomes de fontes à propriedade font-family.

Sintaxe:

seletor {
  font-family: "Nome da Fonte 1", "Nome da Fonte 2", generic-family;
}

Lista de Fontes (Fallback System):

É uma boa prática listar várias fontes, separadas por vírgulas. Isso cria um "sistema de fallback" (ou "plano B"). O navegador tentará carregar a primeira fonte da lista. Se não conseguir (porque a fonte não está instalada no computador do usuário ou não pôde ser baixada), ele tentará a segunda, e assim por diante.

Exemplo:

p {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Neste exemplo:

  1. O navegador tenta usar "Helvetica Neue".
  2. Se "Helvetica Neue" não estiver disponível, ele tenta "Helvetica".
  3. Se "Helvetica" também não estiver disponível, ele tenta "Arial".
  4. Se nenhuma das fontes específicas estiver disponível, ele usa qualquer fonte sans-serif que o sistema do usuário tiver.

Tipos de Fontes:

Existem dois tipos principais de fontes que você usará:

1. Fontes Seguras para Web (Web Safe Fonts)

São fontes que são amplamente instaladas na maioria dos sistemas operacionais (Windows, macOS, Linux, Android, iOS). Usá-las garante que seu texto será exibido de forma consistente para a maioria dos usuários, sem a necessidade de baixar arquivos de fonte adicionais.

Exemplos comuns:

  • Arial: Sans-serif, limpa e moderna.
  • Verdana: Sans-serif, boa legibilidade em tamanhos pequenos.
  • Helvetica: Sans-serif, clássica e amplamente usada.
  • Tahoma: Sans-serif, similar à Verdana, mas mais compacta.
  • Trebuchet MS: Sans-serif, com um toque mais amigável.
  • Times New Roman: Serif, clássica e formal.
  • Georgia: Serif, boa legibilidade em telas.
  • Courier New: Monospace, usada para código ou texto que precisa de alinhamento preciso.
  • Lucida Console: Monospace, alternativa à Courier New.

2. Fontes Genéricas (Generic Families)

São categorias de fontes que o navegador usa como último recurso se nenhuma das fontes específicas da sua lista estiver disponível. É essencial incluir uma família genérica no final da sua lista de font-family.

  • serif: Fontes com "serifas" (pequenos traços nas extremidades das letras), como Times New Roman. Geralmente associadas a um estilo mais tradicional ou formal.
  • sans-serif: Fontes "sem serifa" (sem os traços), como Arial ou Helvetica. Geralmente associadas a um estilo mais moderno, limpo e são muito comuns para texto em tela.
  • monospace: Fontes onde todas as letras e caracteres têm a mesma largura, como Courier New. Usadas para código, tabelas ou quando o alinhamento vertical é importante.
  • cursive: Fontes que imitam a caligrafia manual, com letras conectadas ou fluidas.
  • fantasy: Fontes decorativas ou incomuns, com um estilo mais artístico.

Exemplo de uso de famílias genéricas:

body {
  font-family: "Open Sans", Arial, sans-serif; /* Open Sans (web font), Arial (web safe), sans-serif (genérica) */
}

h1 {
  font-family: "Playfair Display", "Times New Roman", serif; /* Playfair Display (web font), Times New Roman (web safe), serif (genérica) */
}

Nomes de Fontes com Espaços

Se o nome de uma fonte tiver espaços (ex: "Times New Roman", "Open Sans"), ele deve ser colocado entre aspas (simples ou duplas). Se o nome não tiver espaços (ex: Arial, Helvetica), as aspas são opcionais, mas é uma boa prática usá-las para consistência.

Web Fonts (Fontes Personalizadas)

As fontes seguras para web são ótimas para consistência, mas muitas vezes você vai querer usar fontes mais exclusivas para dar uma identidade visual única ao seu site. É aí que entram as Web Fonts (também conhecidas como fontes personalizadas ou fontes externas).

Web Fonts são arquivos de fonte que são baixados pelo navegador do usuário quando ele acessa seu site. Isso garante que todos os usuários verão a mesma fonte, independentemente de terem ela instalada em seu sistema.

As plataformas mais populares para Web Fonts são:

  • Google Fonts: Uma vasta biblioteca de fontes gratuitas e de código aberto. (Abordaremos isso em uma lição futura!)
  • Adobe Fonts (Typekit): Fontes premium para assinantes da Adobe Creative Cloud.
  • Fontes auto-hospedadas: Você baixa o arquivo da fonte e o hospeda em seu próprio servidor.

Boas Práticas:

  • Sempre inclua uma família genérica: É o seu último recurso para garantir que o texto seja exibido, mesmo que não seja com a fonte exata que você queria.
  • Priorize a legibilidade: Especialmente para o corpo do texto, escolha fontes que sejam fáceis de ler em diferentes tamanhos e em telas.
  • Consistência: Use um número limitado de fontes (geralmente 2-3) para manter a coesão visual do seu site.
  • Performance: Web Fonts adicionam um pequeno tempo de carregamento. Use-as com moderação e otimize seu carregamento.

A propriedade font-family é o ponto de partida para toda a tipografia do seu site. Escolha suas fontes com sabedoria para criar uma experiência de leitura agradável e um design impactante!