Fundamentos de Tipografia no Tailwind CSS: Fontes, Altura de Linha e Estilos de Texto

Q: P: Como uso fontes personalizadas no Tailwind?

R: Estenda a configuração fontFamily em tailwind.config, ou use a sintaxe de valor arbitrário como font-["MyFont",sans-serif]. Lembre-se de incluir o arquivo de fonte ou o link CDN no seu HTML.

Q: P: Qual é o tamanho padrão de text-base ? Posso alterá-lo?

R: text-base tem como padrão 16px. Você pode modificá-lo através da configuração fontSize no tailwind.config, ou usar a diretiva @theme no CSS para personalizá-lo.

Q: P: Como crio um efeito de gradiente no texto?

R: Combine as classes text-transparent, bg-clip-text e bg-gradient-to-r para recortar um gradiente de fundo no formato do texto.

Q: P: Qual é a diferença entre leading-tight e leading-[1.25] ?

R: Eles produzem o mesmo resultado. leading-tight é um nome semântico predefinido. Prefira nomes predefinidos para consistência e use apenas valores arbitrários para necessidades especiais.

Família de Fonte

O Tailwind fornece três famílias de fonte padrão: font-sans (sans-serif), font-serif (serif) e font-mono (monospace). Você também pode adicionar fontes personalizadas.

Exemplo

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Família de Fonte</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            'custom': ['"Inter"', 'system-ui', 'sans-serif'],
          }
        }
      }
    }
  </script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-3xl mx-auto space-y-8">
    <div class="bg-white p-6 rounded-lg shadow">
      <p class="font-sans text-lg mb-4">font-sans - Sans-serif</p>
      <p class="font-serif text-lg mb-4">font-serif - Serif</p>
      <p class="font-mono text-lg mb-4">font-mono - Monospace</p>
      <p class="font-custom text-lg">font-custom - Fonte Personalizada</p>
    </div>

    <!-- Exemplo prático -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h2 class="font-sans text-2xl font-bold mb-4">Títulos usam a fonte sans</h2>
      <p class="font-serif text-base leading-relaxed mb-4">
        O texto do corpo usa a fonte serif, ideal para leitura prolongada. Fontes serif são
        amplamente usadas em mídia impressa, guiando o olhar do leitor e melhorando a legibilidade.
      </p>
      <code class="font-mono bg-gray-100 px-2 py-1 rounded text-sm">
        console.log('O código usa a fonte mono');
      </code>
    </div>
  </div>
</body>
</html>

▶ Experimente

Referência de famílias de fonte:

Classe	Tipo de Fonte	Caso de Uso
`font-sans`	Sans-serif	Títulos, elementos de interface
`font-serif`	Serif	Texto corrido, leitura prolongada
`font-mono`	Monospace	Código, exibição de dados

CSS Tradicional vs Tailwind A abordagem tradicional exige definir propriedades font-family e tratar fallbacks de fonte manualmente. O Tailwind fornece pilhas de fontes prontas para uso com fallbacks cross-platform sensíveis por padrão.

Tamanho de Fonte

O Tailwind fornece um sistema completo de tamanhos de fonte, variando de text-xs (12px) a text-9xl (128px).

Exemplo

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Tamanho de Fonte</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto space-y-4">
    <p class="text-xs text-gray-600">text-xs (12px) - Menor tamanho</p>
    <p class="text-sm text-gray-600">text-sm (14px) - Tamanho pequeno</p>
    <p class="text-base text-gray-700">text-base (16px) - Tamanho padrão</p>
    <p class="text-lg text-gray-700">text-lg (18px) - Tamanho grande</p>
    <p class="text-xl text-gray-800">text-xl (20px) - Tamanho extra grande</p>
    <p class="text-2xl font-semibold">text-2xl (24px)</p>
    <p class="text-3xl font-semibold">text-3xl (30px)</p>
    <p class="text-4xl font-bold">text-4xl (36px)</p>
    <p class="text-5xl font-bold">text-5xl (48px)</p>
    <hr class="my-8">
    
    <!-- Exemplo prático -->
    <h1 class="text-4xl font-bold text-gray-900 mb-4">Título Principal da Página</h1>
    <h2 class="text-2xl font-semibold text-gray-800 mb-3">Título da Seção</h2>
    <h3 class="text-xl font-medium text-gray-700 mb-2">Título da Subseção</h3>
    <p class="text-base text-gray-600 leading-relaxed">
      O texto do corpo usa o tamanho de fonte padrão para garantir uma experiência de leitura confortável.
    </p>
    <p class="text-sm text-gray-500 mt-4">Notas e texto auxiliar usam um tamanho menor</p>
  </div>
</body>
</html>

▶ Experimente

Referência de tamanhos de fonte:

Classe	Tamanho	Altura de Linha
`text-xs`	12px	16px
`text-sm`	14px	20px
`text-base`	16px	24px
`text-lg`	18px	28px
`text-xl`	20px	28px
`text-2xl`	24px	32px
`text-3xl`	30px	36px
`text-4xl`	36px	40px
`text-5xl`	48px	1
`text-6xl`	60px	1
`text-7xl`	72px	1
`text-8xl`	96px	1
`text-9xl`	128px	1

CSS Tradicional vs Tailwind A abordagem tradicional exige memorizar valores exatos em pixels, enquanto o Tailwind usa nomes semânticos de tamanho que são mais fáceis de lembrar e usar.

Dica: Use a sintaxe de valores arbitrários para definir qualquer tamanho de fonte, como text-[22px] ou text-[1.375rem].

Peso da Fonte

O Tailwind fornece uma gama completa de opções de peso de fonte, de font-thin (100) a font-black (900).

Exemplo

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Peso da Fonte</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-3xl mx-auto space-y-4">
    <p class="font-thin text-xl">font-thin (100) - Fino</p>
    <p class="font-extralight text-xl">font-extralight (200) - Extra leve</p>
    <p class="font-light text-xl">font-light (300) - Leve</p>
    <p class="font-normal text-xl">font-normal (400) - Normal</p>
    <p class="font-medium text-xl">font-medium (500) - Médio</p>
    <p class="font-semibold text-xl">font-semibold (600) - Seminegrito</p>
    <p class="font-bold text-xl">font-bold (700) - Negrito</p>
    <p class="font-extrabold text-xl">font-extrabold (800) - Extra negrito</p>
    <p class="font-black text-xl">font-black (900) - Black</p>
    
    <hr class="my-8">
    
    <!-- Exemplo prático -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h2 class="font-bold text-2xl mb-4">Negrito para ênfase no título</h2>
      <p class="font-normal text-base mb-2">Peso normal para texto corrido</p>
      <p class="font-light text-sm text-gray-500">Peso leve para texto auxiliar</p>
      <span class="font-semibold text-blue-600">Semininegrito para rótulos importantes</span>
    </div>
  </div>
</body>
</html>

▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional exige lembrar valores numéricos como font-weight: 700, enquanto o Tailwind usa nomes semânticos intuitivos como font-bold.

Altura de Linha

A altura de linha controla o espaçamento entre as linhas de texto. O Tailwind fornece opções predefinidas de leading-none a leading-loose.

Exemplo

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Altura de Linha</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- Comparação de altura de linha -->
      <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="font-semibold mb-4">leading-none (line-height 1)</h3>
        <p class="leading-none text-gray-700">
          Este texto usa a altura de linha mínima, com quase nenhum espaçamento entre as linhas. Ideal para títulos ou layouts compactos.
        </p>
      </div>
      
      <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="font-semibold mb-4">leading-tight (line-height 1.25)</h3>
        <p class="leading-tight text-gray-700">
          Este texto usa uma altura de linha mais compacta, adequada para subtítulos ou texto que precisa de exibição mais condensada.
        </p>
      </div>
      
      <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="font-semibold mb-4">leading-normal (line-height 1.5)</h3>
        <p class="leading-normal text-gray-700">
          Este texto usa a altura de linha padrão, ideal para a maioria dos textos corridos. Equilibra conforto de leitura e eficiência de espaço.
        </p>
      </div>
      
      <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="font-semibold mb-4">leading-relaxed (line-height 1.625)</h3>
        <p class="leading-relaxed text-gray-700">
          Este texto usa uma altura de linha mais generosa, perfeita para leitura prolongada. O espaçamento extra ajuda a reduzir a fadiga visual.
        </p>
      </div>
    </div>

    <!-- Alturas de linha numéricas -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Alturas de Linha Numéricas Exatas</h3>
      <div class="space-y-4">
        <p class="leading-[1] text-gray-700">leading-[1] - Definido exatamente como 1</p>
        <p class="leading-[2rem] text-gray-700">leading-[2rem] - Definido exatamente como 2rem</p>
        <p class="leading-[32px] text-gray-700">leading-[32px] - Definido exatamente como 32px</p>
      </div>
    </div>
  </div>
</body>
</html>

▶ Experimente

Referência de alturas de linha:

Classe	Altura de Linha	Caso de Uso
`leading-none`	1	Títulos, botões
`leading-tight`	1.25	Subtítulos
`leading-snug`	1.375	Texto compacto
`leading-normal`	1.5	Texto corrido padrão
`leading-relaxed`	1.625	Leitura prolongada
`leading-loose`	2	Espaçamento muito amplo

CSS Tradicional vs Tailwind A abordagem tradicional exige definir valores de line-height separadamente para diferentes contextos de texto, enquanto o Tailwind fornece opções semânticas de altura de linha para seleção rápida.

Cor do Texto

O Tailwind fornece um sistema de cores abrangente que cobre todas as necessidades comuns de cor de texto.

Exemplo

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Cor do Texto</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Cores básicas -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Cores Básicas de Texto</h3>
      <div class="space-y-2">
        <p class="text-gray-900">text-gray-900 - Cinza mais escuro</p>
        <p class="text-gray-600">text-gray-600 - Cinza médio</p>
        <p class="text-gray-400">text-gray-400 - Cinza claro</p>
      </div>
    </div>

    <!-- Cores semânticas -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Cores Semânticas de Texto</h3>
      <div class="space-y-2">
        <p class="text-blue-600">text-blue-600 - Links/informações</p>
        <p class="text-green-600">text-green-600 - Sucesso</p>
        <p class="text-yellow-600">text-yellow-600 - Aviso</p>
        <p class="text-red-600">text-red-600 - Erro</p>
        <p class="text-purple-600">text-purple-600 - Ênfase especial</p>
      </div>
    </div>

    <!-- Opacidade -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Opacidade da Cor do Texto</h3>
      <div class="space-y-2">
        <p class="text-blue-600 opacity-100">opacity-100 - Totalmente opaco</p>
        <p class="text-blue-600 opacity-75">opacity-75 - 75% opaco</p>
        <p class="text-blue-600 opacity-50">opacity-50 - 50% opaco</p>
        <p class="text-blue-600 opacity-25">opacity-25 - 25% opaco</p>
      </div>
    </div>

    <!-- Texto com gradiente -->
    <div class="bg-gray-900 p-6 rounded-lg">
      <h3 class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500 text-3xl font-bold">
        Efeito de Texto com Gradiente
      </h3>
    </div>
  </div>
</body>
</html>

▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional exige definir variáveis de cor ou valores hexadecimais no CSS, enquanto o Tailwind fornece um sistema de cores semântico (ex.: text-red-600) que expressa diretamente a intenção visual.

Alinhamento e Decoração de Texto

O Tailwind fornece opções completas de alinhamento e decoração de texto para diversas necessidades de tipografia.

Exemplo

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Alinhamento e Decoração de Texto</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Alinhamento de texto -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Alinhamento de Texto</h3>
      <div class="space-y-4">
        <p class="text-left bg-gray-100 p-3 rounded">text-left - Texto alinhado à esquerda</p>
        <p class="text-center bg-gray-100 p-3 rounded">text-center - Texto centralizado</p>
        <p class="text-right bg-gray-100 p-3 rounded">text-right - Texto alinhado à direita</p>
        <p class="text-justify bg-gray-100 p-3 rounded">
          text-justify - Texto justificado. Este parágrafo demonstra o alinhamento justificado, onde o texto é distribuído uniformemente ao longo do container quando ocupa múltiplas linhas.
        </p>
      </div>
    </div>

    <!-- Decoração de texto -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Decoração de Texto</h3>
      <div class="space-y-4">
        <p class="underline">underline - Texto sublinhado</p>
        <p class="overline">overline - Texto com linha superior</p>
        <p class="line-through">line-through - Texto tachado</p>
        <p class="no-underline">no-underline - Sem decoração</p>
      </div>
    </div>

    <!-- Transformação de texto -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Transformação de Texto</h3>
      <div class="space-y-4">
        <p class="uppercase">uppercase - Transformação para maiúsculas</p>
        <p class="lowercase">LOWERCASE - Transformação para minúsculas</p>
        <p class="capitalize">capitalize - Capitalizar primeira letra</p>
        <p class="normal-case">normal-case - Capitalização normal</p>
      </div>
    </div>

    <!-- Cor e espessura da decoração -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Estilos de Linha de Decoração</h3>
      <div class="space-y-4">
        <p class="underline decoration-blue-500">Sublinhado azul</p>
        <p class="underline decoration-2">Sublinhado grosso (2px)</p>
        <p class="underline decoration-4 decoration-wavy">Decoração ondulada</p>
        <p class="underline decoration-dashed">Decoração tracejada</p>
        <p class="underline decoration-dotted">Decoração pontilhada</p>
      </div>
    </div>
  </div>
</body>
</html>

▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional exige definir text-align, text-decoration, text-transform e outras propriedades individualmente, enquanto o Tailwind usa nomes de classes concisos como text-center, underline e uppercase.

Estilos de Lista

O Tailwind fornece controles de estilo de lista, incluindo tipo e posição do marcador.

Exemplo

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Estilo de Lista</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
    <!-- Listas não ordenadas -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Estilos de Lista Não Ordenada</h3>
      <ul class="list-disc space-y-2 pl-5">
        <li>list-disc - Marcador sólido</li>
        <li>Segundo item da lista</li>
        <li>Terceiro item da lista</li>
      </ul>
      
      <ul class="list-[square] space-y-2 pl-5 mt-4">
        <li>list-[square] - Quadrado sólido</li>
        <li>Usando sintaxe de valor arbitrário</li>
      </ul>
      
      <ul class="list-none space-y-2 mt-4">
        <li>list-none - Sem marcador</li>
        <li>Bom para estilos de lista personalizados</li>
      </ul>
    </div>

    <!-- Listas ordenadas -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Estilos de Lista Ordenada</h3>
      <ol class="list-decimal space-y-2 pl-5">
        <li>list-decimal - Numerada</li>
        <li>Segundo item da lista</li>
        <li>Terceiro item da lista</li>
      </ol>
      
      <ol class="list-[upper-alpha] space-y-2 pl-5 mt-4">
        <li>Numeração com letras maiúsculas</li>
        <li>list-[upper-alpha]</li>
      </ol>
      
      <ol class="list-[lower-roman] space-y-2 pl-5 mt-4">
        <li>Numerais romanos minúsculos</li>
        <li>list-[lower-roman]</li>
      </ol>
    </div>

    <!-- Posição do marcador -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Posição do Marcador da Lista</h3>
      <ul class="list-disc list-inside space-y-2 bg-gray-100 p-4 rounded">
        <li>list-inside - Marcador dentro da área de conteúdo</li>
        <li>Texto longo do item da lista quebra abaixo do marcador sem indentação</li>
      </ul>
    </div>

    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Posição do Marcador da Lista</h3>
      <ul class="list-disc list-outside space-y-2 pl-5 bg-gray-100 p-4 rounded">
        <li>list-outside - Marcador fora da área de conteúdo</li>
        <li>Texto longo do item da lista mantém sua indentação</li>
      </ul>
    </div>
  </div>
</body>
</html>

▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional exige definir as propriedades list-style-type e list-style-position, enquanto o Tailwind usa nomes de classes concisos como list-disc e list-inside.

Dica: Use a sintaxe de valores arbitrários para definir qualquer estilo de lista, como list-[upper-alpha] ou list-[lower-roman].

❓ Perguntas Frequentes

P: Como uso fontes personalizadas no Tailwind? R: Estenda a configuração fontFamily em tailwind.config, ou use a sintaxe de valor arbitrário como font-["MyFont",sans-serif]. Lembre-se de incluir o arquivo de fonte ou o link CDN no seu HTML.

P: Qual é o tamanho padrão de text-base? Posso alterá-lo? R: text-base tem como padrão 16px. Você pode modificá-lo através da configuração fontSize no tailwind.config, ou usar a diretiva @theme no CSS para personalizá-lo.

P: Como crio um efeito de gradiente no texto? R: Combine as classes text-transparent, bg-clip-text e bg-gradient-to-r para recortar um gradiente de fundo no formato do texto.

P: Qual é a diferença entre leading-tight e leading-[1.25]? R: Eles produzem o mesmo resultado. leading-tight é um nome semântico predefinido. Prefira nomes predefinidos para consistência e use apenas valores arbitrários para necessidades especiais.

📖 Resumo

O Tailwind fornece três famílias de fonte padrão: font-sans, font-serif e font-mono
Os tamanhos de fonte variam de text-xs a text-9xl, cobrindo de 12px a 128px
Os pesos de fonte variam de font-thin (100) a font-black (900) em 9 níveis
As alturas de linha variam de leading-none a leading-loose, com valores arbitrários para controle preciso
As cores de texto usam nomenclatura semântica, como text-blue-600 e text-red-600
Alinhamento, decoração e transformação de texto possuem nomes de classes concisos correspondentes

📝 Exercícios

⭐ Crie uma página de artigo com um título (usando text-4xl font-bold), subtítulo, texto corrido e notas, demonstrando diferentes combinações de tamanho e peso de fonte
⭐⭐ Crie um card de preço que use texto com gradiente para o preço, incluindo um preço original (line-through) e um preço com desconto, demonstrando o uso prático de decoração de texto
⭐⭐⭐ Crie uma página de conteúdo completa que inclua listas ordenadas e não ordenadas, citações em bloco, blocos de código e implemente adaptação de cor de texto para alternância entre modo escuro/claro