Fluid Typography (Tipografia Fluida)

1. Introdução

A tipografia fluida (fluid typography) é uma técnica de CSS que permite que os tamanhos de fonte se ajustem dinamicamente conforme o tamanho da tela, melhorando a legibilidade e a experiência do usuário em diferentes dispositivos.

2. Problemas das Abordagens Tradicionais

• Fontes fixas (px) não se adaptam bem a diferentes viewports.
• Uso direto de vw pode levar a textos muito pequenos (em mobile) ou muito grandes (em desktop).
• Cálculos manuais (calc()) exigem manutenção complexa.

3. Solução Moderna: clamp() e Variáveis CSS

3.1. Sintaxe Básica

:root {
        --min-font: 1rem;    /* Tamanho mínimo */
        --max-font: 1.5rem;  /* Tamanho máximo */
        font-size: clamp(var(--min-font), 2vw + 1rem, var(--max-font));
      }

3.2. Parâmetros do clamp()

4. Vantagens

• ✅ Adaptação suave (sem quebras bruscas entre breakpoints).
• ✅ Acessibilidade (evita textos ilegíveis em telas pequenas/grandes).
• ✅ Manutenção simplificada (usa variáveis CSS para controle centralizado).

5. Boas Práticas

5.1. Escolha de Valores

• Use rem em vez de px para respeitar preferências do usuário.
• Defina limites razoáveis (min e max) para evitar extremos.

5.2. Ferramentas Úteis

• Geradores de escala fluida: Fluid Type Scale Calculator
• Pré-processadores: Use SASS/PostCSS para automatizar cálculos.

6. Exemplo Completo

:root {
        --min-font: 1rem;
        --max-font: 1.8rem;
        --ideal-font: 0.5vw + 1rem; /* Ajuste conforme necessário */
      }
      
      body {
        font-size: clamp(var(--min-font), var(--ideal-font), var(--max-font));
      }
      
      h1 {
        --min-font: 2rem;
        --max-font: 3.5rem;
        font-size: clamp(var(--min-font), 3vw + 1rem, var(--max-font));
      }