🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

Ajustando o tamanho do texto de h1, h2, h3

Esta página explica como ajustar o tamanho da fonte das tags h1, h2 e h3.

🔹 Código Parcial

<h1>Este é um título h1</h1>
<h2>Este é um título h2</h2>
<h3>Este é um título h3</h3>

<style>
  h1 {
    font-size: 2em;
  }
  h2 {
    font-size: 1.5em;
  }
  h3 {
    font-size: 1.2em;
  }
</style>

💻 Código Completo (Este código funciona diretamente em HTML)

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title>Ajustando o tamanho do texto de h1, h2, h3</title>
  <style>
    h1 {
      font-size: 2em;
    }
    h2 {
      font-size: 1.5em;
    }
    h3 {
      font-size: 1.2em;
    }
  </style>
</head>
<body>
  <h1>Este é um título h1</h1>
  <h2>Este é um título h2</h2>
  <h3>Este é um título h3</h3>
</body>
</html>

🧩 Aplicação e Casos de Uso

Os tamanhos de fonte das tags h1, h2, h3 podem ser ajustados para se adequar ao design da sua página. Por exemplo, você pode diminuir o tamanho do h1 e aumentar um pouco o tamanho do h2 para criar um layout visualmente equilibrado.

🎯 Dicas Adicionais para Ajustar o Tamanho do Texto

Ajustar o tamanho do texto afeta significativamente o design e o layout da sua página. Ajustando corretamente o tamanho de cada tag, você pode garantir uma aparência bem organizada e transmitir visualmente a importância do conteúdo.

📝 Melhores Práticas para Ajustar o Tamanho dos Cabeçalhos

Ajustar o tamanho dos cabeçalhos é um aspecto importante para manter uma estrutura hierárquica clara enquanto equilibra o design. Embora existam as tags h1 a h6, as mais usadas são h1 a h3.

Estabelecendo Proporções de Tamanho Adequadas

Geralmente, se você configurar o h1 em cerca de 2em, o h2 deve ser cerca de 75% disso (1.5em) e o h3 cerca de 60% (1.2em). Essas são diretrizes, mas ajustes podem ser necessários dependendo do design.

Considerações para Design Responsivo

Em dispositivos móveis, considere diminuir o tamanho do h1 (cerca de 1.8em). Você pode implementar isso facilmente usando consultas de mídia como @media (max-width: 768px) { h1 { font-size: 1.8em; } }.

Ao ajustar o tamanho dos cabeçalhos, sempre leve em consideração seu tamanho relativo em relação a outros elementos. Por exemplo, ter um h1 do mesmo tamanho que um p pode dificultar a compreensão da estrutura hierárquica.

Copiado!