Propriedade font-size: Controlando o tamanho do texto

Descubra como ajustar o tamanho do texto usando diferentes unidades de medida (px, em, rem, %).

Depois de escolher a fonte perfeita com font-family, o próximo passo crucial é definir o tamanho do seu texto. A propriedade font-size é responsável por controlar o tamanho da fonte de um elemento.

O tamanho do texto é vital para a legibilidade e para estabelecer uma hierarquia visual clara na sua página. Títulos devem ser maiores que subtítulos, que por sua vez devem ser maiores que o corpo do texto, e assim por diante.

Pense na font-size como o tamanho da letra que você escolhe ao escrever um documento no computador. Você pode querer uma letra grande para o título e uma menor para o corpo do texto.

Como usar a propriedade font-size

A sintaxe é direta: você seleciona o elemento e atribui um valor de tamanho à propriedade font-size.

Sintaxe:

seletor {
  font-size: valor;
}

O valor pode ser especificado usando diferentes unidades de medida. A escolha da unidade é muito importante e afeta como seu texto se comporta em diferentes dispositivos e configurações do usuário.

Unidades de Medida para font-size:

Existem dois tipos principais de unidades: absolutas e relativas.

1. Unidades Absolutas

Essas unidades são fixas e não mudam de tamanho, independentemente do tamanho da tela ou das configurações do usuário.

  • px (pixels): É a unidade mais comum e fácil de entender. 16px significa 16 pixels na tela.

    • Vantagens: Controle preciso do tamanho.
    • Desvantagens: Não são responsivas (não se adaptam ao tamanho da tela ou às preferências do usuário para tamanho de fonte base). Se um usuário aumentar o tamanho da fonte padrão do navegador, o texto em px não será afetado, o que pode gerar problemas de acessibilidade.
    • Uso: Pode ser usada para elementos que precisam de um tamanho muito específico e não devem escalar, mas geralmente é desencorajada para o corpo do texto principal.

  • pt (pontos): Unidade de medida tipográfica, geralmente usada para impressão. 1pt é igual a 1/72 de uma polegada.

    • Uso: Raramente usada para web.

2. Unidades Relativas

Essas unidades são flexíveis e se adaptam ao tamanho da tela, ao tamanho da fonte do elemento pai ou às configurações do usuário. São as mais recomendadas para um design responsivo e acessível.

  • em: Relativa ao font-size do elemento pai.

    • 1em é igual ao font-size do elemento pai.
    • 2em é o dobro do font-size do elemento pai.
    • Vantagens: Responsiva, escala bem.
    • Desvantagens: Pode ser um pouco confuso, pois o tamanho final de um em depende do font-size do pai, que por sua vez pode depender do font-size do avô, e assim por diante. Isso pode levar a um "efeito cascata" indesejado se não for bem gerenciado.
    • Uso: Boa para elementos que devem escalar em relação ao seu contexto imediato.

  • rem (root em): Relativa ao font-size do elemento raiz (<html>).

    • 1rem é igual ao font-size do elemento <html>.
    • Vantagens: Responsiva e mais fácil de gerenciar que em, pois o font-size base é sempre o mesmo (o do <html>), evitando o efeito cascata. Se o usuário alterar o tamanho da fonte base do navegador, todos os elementos em rem escalarão proporcionalmente.
    • Uso: Altamente recomendada para a maioria dos textos em um site, pois oferece responsividade e acessibilidade previsíveis.

  • % (porcentagem): Relativa ao font-size do elemento pai.

    • 100% é igual ao font-size do elemento pai.
    • Vantagens: Similar ao em, responsiva.
    • Desvantagens: Compartilha a mesma complexidade de gerenciamento do em devido ao efeito cascata.
    • Uso: Pode ser usada de forma similar ao em.

  • vw (viewport width): Relativa à largura da viewport (janela do navegador).

    • 1vw é igual a 1% da largura da viewport.
    • Vantagens: O texto escala perfeitamente com a largura da tela.
    • Desvantagens: Pode se tornar muito pequeno em telas estreitas ou muito grande em telas muito largas, sem controle.
    • Uso: Para títulos grandes ou elementos que precisam escalar agressivamente com a largura da tela, mas geralmente combinado com outras unidades ou media queries para evitar extremos.

  • vh (viewport height): Relativa à altura da viewport.

    • 1vh é igual a 1% da altura da viewport.
    • Uso: Menos comum para font-size, mas pode ser usada para designs específicos.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Font Size</title>
  <style>
    /* Definindo um tamanho de fonte base no HTML para unidades relativas */
    html {
      font-size: 16px; /* 1rem = 16px */
    }

    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }

    h1 {
      font-size: 3em;   /* 3 * (font-size do body) = 3 * 16px = 48px */
      /* Se o body não tivesse font-size, seria 3 * (font-size do html) = 3 * 16px = 48px */
    }

    h2 {
      font-size: 2.5rem; /* 2.5 * (font-size do html) = 2.5 * 16px = 40px */
    }

    p {
      font-size: 1rem;   /* 1 * (font-size do html) = 1 * 16px = 16px */
    }

    .small-text {
      font-size: 0.8em; /* 0.8 * (font-size do pai, que é o p, que é 1rem = 16px) = 0.8 * 16px = 12.8px */
    }

    .fixed-size {
      font-size: 24px; /* Tamanho fixo em pixels */
    }

    .responsive-title {
      font-size: 5vw; /* 5% da largura da viewport */
    }
  </style>
</head>
<body>
  <h1>Título Principal (3em)</h1>
  <h2>Subtítulo (2.5rem)</h2>
  <p>Este é um parágrafo de texto normal (1rem).</p>
  <p class="small-text">Este é um texto menor (0.8em).</p>
  <p class="fixed-size">Este texto tem tamanho fixo em pixels (24px).</p>
  <h1 class="responsive-title">Título Responsivo (5vw)</h1>
</body>
</html>

Resultado: Observe como os tamanhos de fonte são calculados e como o responsive-title muda de tamanho ao redimensionar a janela do navegador.

Boas Práticas:

  • Defina um font-size base no <html>: Geralmente 16px (que é o padrão do navegador) ou 100% (que também resulta em 16px na maioria dos navegadores). Isso facilita o cálculo de rem.
  • Use rem para a maioria dos textos: Oferece a melhor combinação de responsividade e acessibilidade.
  • Use em para componentes: em pode ser útil para elementos que devem escalar em relação ao seu próprio componente, como um botão onde o padding e o font-size devem ser proporcionais.
  • Evite px para texto principal: Use px com moderação e apenas para elementos que não devem escalar com as preferências do usuário.
  • Teste em diferentes tamanhos de tela: Sempre verifique como seus tamanhos de fonte se comportam em dispositivos móveis, tablets e desktops.

Dominar a propriedade font-size e suas unidades é fundamental para criar interfaces legíveis, acessíveis e responsivas.