📘 Aula 10 MD-2: Trabalhando com Fontes em CSS 📘
Introdução
Trabalhar com fontes em CSS vai além de escolher um estilo bonito. Cada fonte transmite personalidade e afeta a legibilidade do texto. Saber combinar fontes de forma harmônica garante um design mais profissional e agradável.
Propriedade font-family
Define a família de fontes de um elemento. É possível listar múltiplas fontes separadas por vírgula para criar um fallback. Exemplo:
font-family: 'Arial', 'Helvetica', sans-serif;
O navegador usa a primeira fonte disponível da lista.
Tamanhos e pesos de fonte
- font-size: define o tamanho do texto.
- font-weight: define a espessura (normal, bold, 100-900).
- line-height: altura da linha, essencial para leitura.
- letter-spacing: espaçamento entre caracteres.
Combinações de fontes
Combinar fontes corretamente cria contraste e hierarquia visual. Algumas regras práticas:
- Combine uma fonte serifada com uma sans-serif para contraste elegante.
- Evite usar mais de duas ou três famílias de fontes no mesmo layout.
- Combine fontes com personalidades complementares.
- Adapte o estilo ao projeto: moderno, clássico, informal ou corporativo.
Exemplos práticos de combinações
1. Serif + Sans-serif: ideal para títulos e corpo de texto.
Título Clássico
Corpo de texto moderno e legível usando sans-serif.
2. Display + Monospace: títulos chamativos com detalhes técnicos.
Título Impactante
Código ou detalhe técnico em monoespaçada.
3. Duas fontes modernas: combinações harmoniosas sem serifas.
Título Open Sans
Corpo de texto em Roboto, criando harmonia visual.
4. Serifadas diferentes: para projetos formais ou editoriais.
Título Georgia
Texto com Times New Roman, mantendo a sofisticação clássica.
Mais Sobre Combinações de Fontes
Para aprofundar-se em combinações de fontes e ver exemplos visuais, consulte o link:
Conclusão
Dominar fontes em CSS e suas combinações é essencial para criar layouts legíveis e esteticamente agradáveis. Sempre teste as combinações em contexto real e escolha fontes que transmitam a personalidade do projeto.