📘Aula 8 MD-2: Estudo básico e teórico de Tipografia 📘

Introdução à Tipografia

Esta aula apresenta conceitos fundamentais de tipografia aplicados ao design e ao desenvolvimento web. Você aprenderá como as fontes comunicam emoções, quais são as tendências atuais, como categorizar famílias tipográficas e como aplicar boas práticas em projetos digitais.

Objetivos da aula:

• Entender a função e o impacto da tipografia na comunicação visual;
• Reconhecer categorias tipográficas e quando usá-las;
• Aplicar regras práticas de legibilidade e hierarquia tipográfica;
• Executar pequenos exemplos com stacks de fontes e propriedades CSS.

Emoção das fontes

As fontes transmitem personalidade — elas não são neutras. A escolha tipográfica influencia a percepção da marca, o tom da mensagem e a experiência do usuário.

Dicas rápidas

• Combine uma fonte de título (display) com uma fonte de texto (serif ou sans-serif) para equilibrar personalidade e legibilidade.

• Evite usar muitas fontes diferentes — 2 a 3 famílias são suficientes para a maioria dos projetos.

• Considere o público e o contexto: formalidade requer fontes com serifa; apps modernos muitas vezes preferem sans-serif.

Moda da Tipografia

Tendências mudam, mas alguns movimentos recentes merecem atenção pois impactam projetos digitais:

• Tipografia variável: fontes que permitem ajustar peso, largura e outros eixos via CSS (font-variation-settings).
• Contrastes marcantes: títulos com peso extra e textos com fontes neutras para criar hierarquia forte.
• Fonts geometricas e grotescas: uso crescente em interfaces pela clareza em pixels.
• Retorno do serif contemporâneo: serifs revigoradas para marcas premium e editoriais digitais.
• Microtipografia: atenção em letter-spacing, line-height e kerning para melhorar legibilidade em telas pequenas.

Exemplo de código — importando uma fonte do Google (referência)

<!-- Exemplo (colocar no head do HTML caso queira usar) -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">

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

Para usar fontes externas, como as do Google Fonts, é necessário adicioná-las no arquivo de estilos global do seu site. Dessa forma, todas as páginas poderão utilizar a mesma tipografia sem repetir código onde quer que seja necessário.

Categorias de fontes

A tipografia pode ser dividida em diferentes categorias, cada uma transmitindo uma emoção e sendo adequada para usos específicos. Veja os exemplos abaixo:

Serif

Fontes com pequenos traços nas extremidades das letras. Transmitem tradição, confiança e seriedade. Muito utilizadas em livros, jornais e documentos acadêmicos.

Sans-serif

Fontes sem serifas; modernas, limpas e altamente legíveis em telas digitais. Padrão para sites, aplicativos e interfaces.

Monospace

Fontes de largura fixa; cada caractere ocupa o mesmo espaço. Ideais para código, tabelas ou contextos técnicos.

Display / Decorative

Fontes criadas para chamar atenção. São impactantes e cheias de personalidade, mas devem ser usadas apenas em títulos e peças gráficas curtas.

Script / Handwriting

Fontes que imitam a escrita manual. São delicadas, elegantes e transmitem proximidade, mas precisam ser usadas com moderação para não prejudicar a leitura.

Boas práticas e legibilidade

• Tamanho: no corpo de texto web recomenda-se entre 16px e 18px como base.
• Altura da linha (line-height): 1.4–1.8 para textos longos; ajuda a leitura.
• Contraste: texto sobre fundo deve ter contraste suficiente (WCAG 2.1 recomenda 4.5:1 para corpo).
• Espaçamento entre letras (letter-spacing): use leve aumento em textos grandes; reduz em corpos pequenos se necessário.
• Hierarquia: combine variações de peso e tamanho para guiar o leitor (H1 > H2 > H3).
• Fallbacks: sempre declare uma pilha de fontes (font-family) terminando em uma família genérica.

Exemplo de stacks recomendados

/* Stack para corpo legível */
body {
font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}

/* Stack para texto monoespaçado */
code, pre {
font-family: "Fira Code", "Courier New", Courier, monospace;
}

Exercícios práticos

1. Escolha uma marca fictícia (3 palavras) e defina 2 fontes: uma para título e outra para corpo. Explique por que escolheu cada uma (emoção/legibilidade).

2. Implemente uma pequena página HTML (apenas markup) aplicando a pilha de fontes e ajuste line-height e letter-spacing para melhorar leitura.

3. Teste contraste das cores (texto x fundo). Anote os resultados e ajuste até conseguir boa legibilidade.

Exemplo de implementação (HTML snippet)

<!-- Exemplo simples -->
<h1 style="font-family: 'Georgia', serif; font-weight:700;">Título da Marca</h1>
<p style="font-family: Arial, sans-serif; font-size:16px; line-height:1.6;">Parágrafo de exemplo para avaliar legibilidade e ritmo do texto.</p>

Recursos e leitura recomendada

• MDN — font-family (referência)
• WebAIM — Contrast Checker (acessibilidade)

• Sites de fontes: Google Fonts, Adobe Fonts, Font Squirrel.

Conclusão e recomendações finais

A tipografia é uma ferramenta estratégica: bem utilizada melhora a comunicação, a usabilidade e a identidade visual. Pratique combinando famílias, testando tamanhos e avaliando contraste — e documente suas escolhas em um pequeno guia de estilo.