Temas de Tipografia

Parte da seção Practical Frontend do Journey de HTML da Coddy — lição 15 de 35.

A tipografia é uma parte importante do tema e do design. Em vez de escrever estilos de fonte em todos os lugares, podemos defini-los como variáveis CSS e reutilizá-los em todo o site. Isso mantém o estilo consistente e facilita alterações posteriores.

Você pode definir variáveis para:

Família de fontes (ex: --font-family-base, --font-family-heading)

Tamanhos de fonte (ex: --font-size-base, --font-size-h1)
Altura da linha
Espaçamento entre letras

Primeiro, vamos definir nossas variáveis de tipografia no elemento :root:

:root {
  --font-primary: 'Open Sans', sans-serif;
  --font-secondary: 'Roboto', sans-serif;
  --font-size-base: 16px;
  --line-height: 1.5;
  --heading-color: #333;
  --text-color: #555;
}

Agora, aplique estas variáveis aos seus elementos de texto:

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-secondary);
  color: var(--heading-color);
}

Esta configuração cria um sistema de tipografia unificado que você pode modificar facilmente alterando os valores das variáveis em um só lugar.

Desafio

Fácil

Crie um tema de tipografia para um site de blog com variáveis separadas para títulos e texto de parágrafo. Sua tarefa:

Defina variáveis CSS para:
- Tamanhos de fonte para títulos (--h1-size e --h2-size)
- Cor do texto para parágrafos (--text-color) — escolha uma cor diferente do preto puro para melhor legibilidade
- Cor do texto para títulos ( --heading-color ) — escolha uma cor que se destaque do texto do corpo
Aplique essas variáveis para estilizar:
- O texto do corpo
- títulos h1 e h2

Seu CSS deve criar uma hierarquia visual clara entre os títulos e o texto do parágrafo.

Folha de consulta

Use variáveis CSS para criar sistemas de tipografia consistentes, definindo estilos de fonte uma única vez e reutilizando-os em todo o site.

Defina variáveis de tipografia no elemento :root:

:root {
  --font-primary: 'Open Sans', sans-serif;
  --font-secondary: 'Roboto', sans-serif;
  --font-size-base: 16px;
  --line-height: 1.5;
  --heading-color: #333;
  --text-color: #555;
}

Aplique variáveis a elementos de texto usando var():

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-secondary);
  color: var(--heading-color);
}

Variáveis de tipografia comuns incluem:

Família de fontes (fontes base e de título)
Tamanhos de fonte (tamanho base e tamanhos de título)
Altura da linha
Espaçamento entre letras
Cores (cores de texto e de título)

Experimente você mesmo

<!DOCTYPE html>
<html>
<head>
  <title>Typography Theming</title>
  <style>
    :root {
      /* Typography variables */
      --primary-font: "Georgia", serif;       /* for paragraphs */
      --secondary-font: "Arial", sans-serif; /* for headings */

    }

    body {
      font-family: var(--primary-font);
      color: #000000;
      line-height: 1.6;
      margin: 0;
      padding: 20px;
      background-color: #f9f9f9;
    }

    h1, h2 {
      font-family: var(--secondary-font);
      color: #000000;
      margin-bottom: 0.5em;
    }

    h1 {
      font-size: 16px;
    }

    h2 {
      font-size: 16px;
    }

    p {
      margin-bottom: 1.2em;
    }

    .blog-post {
      max-width: 700px;
      margin: 0 auto;
      background: #fff;
      padding: 2rem;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
  <div class="blog-post">
    <h1>The Beauty of Typography in Web Design</h1>
    <p>Typography plays a crucial role in how users read and experience content online. A good choice of fonts and sizes can make a website more readable and enjoyable.</p>

    <h2>Why Typography Matters</h2>
    <p>Clear and consistent typography improves accessibility, creates a visual hierarchy, and gives your website a professional feel. Without it, even the best design can look unpolished.</p>

    <h2>Mobile-First Typography</h2>
    <p>Starting with smaller, readable text for mobile and scaling up for desktops ensures your content looks great on any device. This approach is part of mobile-first design and theming.</p>
  </div>
</body>
</html>