Tipografia e Hierarquia Visual

01. O que é Tipografia?

📌 Definição

No desenvolvimento web, a tipografia determina como os textos aparecerão para o usuário.

Isso inclui características como:

• Tipo de fonte;
• Tamanho da fonte;
• Peso da fonte;
• Espaçamento entre linhas;
• Espaçamento entre letras;
• Alinhamento;
• Cor;
• Contraste;
• Organização dos títulos e textos.

h1 {
    font-family: Arial, sans-serif;
    font-size: 36px;
    font-weight: 700;
}

02. O que é uma Fonte?

Cada fonte possui uma aparência própria.

03. Principais Tipos de Fontes

🔹 Serifadas

Exemplo:

font-family: Georgia, serif;

🔹 Sem Serifa

São muito utilizadas em sites, sistemas e aplicativos.

font-family: Arial, sans-serif;

🔹 Monoespaçadas

São muito utilizadas para apresentar códigos de programação.

font-family: "Courier New", monospace;

🔹 Display

04. Propriedade font-family

📝 Sintaxe

seletor {
    font-family: nome-da-fonte;
}

💻 Exemplo

body {
    font-family: Arial, sans-serif;
}

font-family: Arial, Helvetica, sans-serif;

05. Tamanho da Fonte — font-size

💻 Exemplo

h1 {
    font-size: 40px;
}

p {
    font-size: 16px;
}

📏 Exemplos de tamanhos

06. Unidades para Tipografia

O CSS permite utilizar diferentes unidades para definir tamanhos.

💻 Exemplo com rem

html {
    font-size: 16px;
}

h1 {
    font-size: 2rem;
}

07. Peso da Fonte — font-weight

📊 Principais valores

h1 {
    font-weight: 700;
}

p {
    font-weight: 400;
}

08. Estilo da Fonte — font-style

p {
    font-style: italic;
}

Os valores mais conhecidos são:

• normal — texto normal;
• italic — texto em itálico;
• oblique — texto inclinado.

09. Espaçamento entre Linhas — line-height

💻 Exemplo

p {
    font-size: 16px;
    line-height: 1.6;
}

10. Espaçamento entre Letras — letter-spacing

h1 {
    letter-spacing: 2px;
}

Também podemos utilizar valores negativos:

h1 {
    letter-spacing: -1px;
}

11. Espaçamento entre Palavras — word-spacing

p {
    word-spacing: 5px;
}

12. Transformação do Texto — text-transform

h1 {
    text-transform: uppercase;
}

📌 Principais valores

• uppercase — transforma em maiúsculas.
• lowercase — transforma em minúsculas.
• capitalize — coloca a inicial das palavras em maiúscula.
• none — mantém o texto original.

13. Alinhamento do Texto — text-align

h1 {
    text-align: center;
}

p {
    text-align: left;
}

📊 Valores principais

• left — esquerda;
• right — direita;
• center — centro;
• justify — justificado.

14. Decoração do Texto — text-decoration

a {
    text-decoration: none;
}

Alguns valores:

• none
• underline
• overline
• line-through

15. Sombra no Texto — text-shadow

h1 {
    text-shadow: 2px 2px 4px #000000;
}

16. O que é Hierarquia Visual?

Em um site, nem todas as informações possuem a mesma importância.

Um título principal deve chamar mais atenção do que um texto secundário.

Um botão importante pode possuir mais destaque do que uma informação complementar.

H1
↓
Título principal

H2
↓
Seção importante

H3
↓
Subseção

Parágrafo
↓
Informação detalhada

Texto auxiliar
↓
Informação secundária

17. H1, H2, H3, H4, H5 e H6

<h1>Título principal</h1>

<h2>Seção</h2>

<h3>Subseção</h3>

<h4>Subseção menor</h4>

<h5>Título de nível menor</h5>

<h6>Título de nível menor</h6>

h2 {
    font-size: 32px;
}

18. Criando uma Escala Tipográfica

💻 Exemplo

h1 {
    font-size: 40px;
}

h2 {
    font-size: 32px;
}

h3 {
    font-size: 24px;
}

p {
    font-size: 16px;
}

.texto-auxiliar {
    font-size: 14px;
}

19. Contraste Tipográfico

Podemos criar contraste utilizando:

• Tamanho;
• Peso;
• Cor;
• Espaçamento;
• Família de fonte;
• Estilo.

💻 Exemplo

h1 {
    font-size: 42px;
    font-weight: 700;
}

p {
    font-size: 16px;
    font-weight: 400;
}

20. Como Combinar Fontes?

🎯 Estratégia simples

Uma estratégia comum é utilizar uma fonte para títulos e outra para textos.

h1, h2, h3 {
    font-family: "Poppins", sans-serif;
}

body {
    font-family: "Roboto", sans-serif;
}

21. Utilizando Google Fonts

📝 Exemplo

Uma fonte pode ser carregada no HTML através de um link fornecido pelo serviço.

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">

Depois podemos utilizar a fonte no CSS:

body {
    font-family: "Poppins", sans-serif;
}

22. Tipografia Responsiva

💻 Exemplo com Media Query

h1 {
    font-size: 42px;
}

@media (max-width: 768px) {

    h1 {
        font-size: 32px;
    }

}

23. Tipografia Fluida com clamp()

h1 {
    font-size: clamp(2rem, 5vw, 4rem);
}

clamp(
    mínimo,
    valor preferencial,
    máximo
)

24. Largura das Linhas e Legibilidade

💻 Exemplo

.texto {
    max-width: 700px;
}

Em textos muito largos, os olhos precisam percorrer uma distância maior para encontrar a próxima linha.

25. Tipografia e Acessibilidade

✅ Boas práticas

• Utilizar tamanho de texto confortável;
• Manter bom contraste entre texto e fundo;
• Evitar fontes excessivamente decorativas;
• Utilizar espaçamento adequado;
• Organizar corretamente os títulos;
• Não transmitir informações apenas pela aparência;
• Permitir boa leitura em telas menores.

26. Estrutura Tipográfica de um Site

H1
Título principal do site

Texto introdutório

H2
Primeira seção

Parágrafo explicativo

H3
Subseção

Parágrafo

H2
Segunda seção

Parágrafo

Texto auxiliar

27. Criando um Sistema de Tipografia com Variáveis CSS

💻 Exemplo

:root {

    --fonte-principal: "Poppins", sans-serif;

    --tamanho-h1: 40px;

    --tamanho-h2: 32px;

    --tamanho-h3: 24px;

    --tamanho-texto: 16px;

}

body {

    font-family: var(--fonte-principal);

}

h1 {

    font-size: var(--tamanho-h1);

}

h2 {

    font-size: var(--tamanho-h2);

}

p {

    font-size: var(--tamanho-texto);

}

28. Erros Comuns de Tipografia

❌ Utilizar fontes demais

Muitas famílias tipográficas podem deixar o projeto visualmente desorganizado.

❌ Texto muito pequeno

Pode dificultar a leitura, principalmente em dispositivos menores.

❌ Pouco espaçamento

Textos muito próximos podem causar sensação de conteúdo "apertado".

❌ Excesso de negrito

Se tudo estiver em negrito, nada terá destaque.

❌ Usar caixa alta em textos longos

Grandes blocos em letras maiúsculas podem dificultar a leitura.

❌ Não criar hierarquia

Se títulos, subtítulos e parágrafos tiverem praticamente o mesmo tamanho e peso, será mais difícil identificar a estrutura.

❌ Ignorar dispositivos móveis

Uma tipografia que funciona bem em um monitor grande pode não funcionar da mesma forma em um celular.

29. Exemplo Completo de Tipografia

<section class="conteudo">

    <h1>
        Desenvolvimento Web
    </h1>

    <p class="subtitulo">
        Aprenda a criar sites modernos.
    </p>

    <h2>
        Front-end
    </h2>

    <p>
        O desenvolvimento front-end trabalha
        com a interface apresentada ao usuário.
    </p>

    <h3>
        Tecnologias
    </h3>

    <p>
        HTML, CSS e JavaScript são algumas
        das principais tecnologias.
    </p>

</section>

:root {

    --fonte-principal: Arial, sans-serif;

}

body {

    font-family: var(--fonte-principal);

    line-height: 1.6;

}

.conteudo {

    max-width: 800px;

    margin: auto;

}

h1 {

    font-size: 42px;

    font-weight: 700;

}

.subtitulo {

    font-size: 20px;

    font-weight: 400;

}

h2 {

    font-size: 32px;

    margin-top: 40px;

}

h3 {

    font-size: 24px;

}

p {

    font-size: 16px;

}

30. Checklist de Tipografia

• Escolhi uma fonte adequada ao projeto.
• Os textos estão fáceis de ler.
• Existe diferença visual entre títulos e parágrafos.
• Os títulos estão organizados corretamente.
• O tamanho da fonte funciona em telas pequenas.
• O espaçamento entre linhas está confortável.
• O contraste entre texto e fundo é adequado.
• Não estou utilizando fontes demais.
• Os textos auxiliares não estão pequenos demais.
• Testei o site no celular.

🏆 Desafio Final — Crie uma Hierarquia Visual

📝 Etapa 1 — Crie o HTML

<main>

    <h1>
        Minha Tecnologia
    </h1>

    <p>
        Conheça as principais tecnologias
        utilizadas no desenvolvimento web.
    </p>

    <h2>
        HTML
    </h2>

    <p>
        HTML é responsável pela estrutura
        da página.
    </p>

    <h2>
        CSS
    </h2>

    <p>
        CSS é utilizado para estilizar
        a página.
    </p>

    <h2>
        JavaScript
    </h2>

    <p>
        JavaScript permite criar
        interações.
    </p>

</main>

🎨 Etapa 2 — Crie a hierarquia

Utilize pelo menos:

• Uma fonte principal;
• Um tamanho para H1;
• Um tamanho para H2;
• Um tamanho para parágrafos;
• Diferentes pesos;
• Espaçamento entre linhas;
• Margens entre seções.

📱 Etapa 3 — Torne responsivo

Crie uma Media Query para alterar o tamanho do H1 em telas menores.

@media (max-width: 768px) {

    h1 {
        font-size: 32px;
    }

}

🎯 Etapa 4 — Teste

1. Abra o projeto no navegador.
2. Observe o título principal.
3. Observe os subtítulos.
4. Observe os parágrafos.
5. Reduza o tamanho da janela.
6. Abra o DevTools.
7. Teste diferentes tamanhos de tela.
8. Verifique se o conteúdo continua fácil de ler.

📚 Resumo da Aula