🎨 AULA 3

Cores e Tipografia no CSS

Aprenda a escolher paletas de cores, aplicar contrastes, definir fontes e criar uma tipografia profissional e acessível para seus projetos web.

⏱️ 60 min
🎯 Essencial
🔤 Tipografia
🌈 Cores

🎯 Objetivos de Aprendizagem

🌈 Dominar Cores no CSS

Entender sistemas de cores (hex, rgb, hsl), contraste e acessibilidade.

🔤 Tipografia Profissional

Escolher fontes, tamanhos, pesos e espaçamentos para uma leitura agradável.

🖌️ Prática Visual

Aplicar paletas, variações e hierarquia visual em exemplos reais.

🌈 1. Cores no CSS

O CSS permite usar diferentes sistemas de cores: hexadecimal, RGB, HSL e nomes pré-definidos. Cores são essenciais para identidade visual, contraste e acessibilidade. 

/* Exemplos de cores no CSS */
body {
    background: #f8f9fa;      /* Hexadecimal */
    color: rgb(44, 62, 80);   /* RGB */
}

h1 {
    color: hsl(210, 100%, 40%); /* HSL */
}

.botao {
    background: var(--primary-color); /* Variável CSS */
    color: #fff;
}

💡 Dica

🎨 2. Paleta de Cores e Variáveis CSS

Defina uma paleta consistente usando variáveis CSS para facilitar manutenção e garantir harmonia visual. 

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --accent-color: #e67e22;
    --background: #f8f9fa;
    --text-color: #2c3e50;
}

body {
    background: var(--background);
    color: var(--text-color);
}

.botao {
    background: var(--primary-color);
    color: #fff;
}

🎯 Boas Práticas

  • Centralize as cores no :root para fácil alteração.
  • Use nomes semânticos (ex: --danger-color, --success-color).

🔤 3. Tipografia no CSS

A tipografia define a personalidade do site. Escolha fontes legíveis, defina hierarquia visual e ajuste espaçamentos para uma leitura confortável. 

body {
    font-family: 'Inter', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 400;
}

h1, h2, h3 {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
}

p {
    margin-bottom: 1em;
}

💡 Dica de Tipografia

  • Use no máximo 2 famílias de fontes principais.
  • Garanta contraste entre títulos e textos.
  • Prefira fontes do Google Fonts para web.

📏 4. Hierarquia Visual e Espaçamento

Crie uma hierarquia clara usando tamanhos, pesos e espaçamentos. Isso guia o olhar do usuário e facilita a leitura. 

h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

h2 {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

p {
    margin-bottom: 1em;
}

🎯 Boas Práticas de Hierarquia

  • Use rem para tamanhos responsivos.
  • Espaçamento consistente melhora a experiência.

🏋️‍♂️ Exercício: Landing Page Colorida

Crie uma landing page simples utilizando:

📋 Resumo da Aula