Aula 7 — Fontes e tipografia no CSS

Tipografia é a forma como o texto aparece e se comporta visualmente. No CSS, ela influencia diretamente a legibilidade, a estética e a experiência do usuário.

Nesta aula, você vai aprender os principais controles tipográficos do CSS e como usá-los com bom senso.

A propriedade font-family

A propriedade font-family define a fonte do texto.

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

É comum definir uma lista de fontes, caso a primeira não esteja disponível, o navegador tentará carregar as seguintes, da esquerda para a direita.

Fontes serifadas e sem serifa

Existem dois grupos principais de fontes:

• Serifadas — possuem pequenos “detalhes” nas letras
• Sem serifa — letras mais limpas e modernas

Na web, fontes sem serifa são mais comuns por serem mais legíveis em telas.

Tamanho do texto com font-size

A propriedade font-size define o tamanho da fonte.

 p { font-size: 16px; } 

Unidades comuns:

• px — tamanho fixo
• rem — relativo ao tamanho base do documento
• em — relativo ao elemento pai

Por que rem é a unidade mais usada em projetos modernos?

No CSS, existem várias unidades para definir tamanhos de fonte, mas nem todas se comportam bem em projetos reais.

Entre elas, o rem se tornou a escolha padrão em projetos modernos — e isso não é por acaso.

O que é rem?

A unidade rem significa root em.

Ela é baseada no tamanho da fonte do elemento raiz da página, normalmente o <html>.

 html { font-size: 16px; } 

Nesse caso:

• 1rem = 16px
• 2rem = 32px
• 0.875rem ≈ 14px

Por que não usar só px?

Pixels são unidades fixas.

Isso significa que:

• Não respeitam preferências do usuário
• Dificultam escalabilidade
• Tornam ajustes globais mais trabalhosos

O problema do em

A unidade em também é relativa, mas funciona diferente.

Ela se baseia no tamanho da fonte do elemento pai.

 .card { font-size: 1.2em; }

.card p {
font-size: 1.2em;
}

Aqui ocorre um efeito cascata:

• O parágrafo cresce sobre o tamanho da `.card`
• O cálculo fica menos previsível

A grande vantagem do rem

O rem resolve esse problema.

Ele sempre se baseia no mesmo ponto: o tamanho da fonte do <html>.

 html { font-size: 16px; }

h1 {
font-size: 2rem;
}

p {
font-size: 1rem;
}

.small {
font-size: 0.875rem;
}

Tudo cresce ou diminui de forma previsível.

Escalabilidade e acessibilidade

Usuários podem aumentar o tamanho da fonte no navegador.

Quando você usa rem:

• O layout se adapta automaticamente
• O texto continua legível
• A experiência melhora para todos

Exemplo prático de ajuste global

Imagine um site inteiro feito com rem.

Para aumentar todo o texto, basta mexer no valor do seletor html:

 html { font-size: 18px; } 

Sem mexer em mais nada:

• Títulos aumentam
• Parágrafos aumentam
• Espaçamentos baseados em rem acompanham

Quando usar rem, em e px?

• rem → tipografia e layout base
• em → ajustes locais e componentes específicos
• px → detalhes muito precisos (bordas, ícones)

Peso da fonte com font-weight

O font-weight controla o “peso” da fonte. É quase como se controlasse o nível de negrito dela.

 h1 { font-weight: 700; } 

Valores comuns:

• 400 — normal
• 700 — negrito

Nem toda fonte suporta todos os pesos.

Estilo do texto com font-style

A propriedade font-style define variações como itálico.

 em { font-style: italic; } 

Altura da linha com line-height

O line-height controla o espaçamento entre linhas.

 p { line-height: 1.6; } 

Uma boa altura de linha melhora muito a leitura.

Fontes externas (Google Fonts)

Também é possível usar fontes externas, como as do Google Fonts.

 <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet"> 

 body { font-family: 'Open Sans', sans-serif; } 

Na próxima aula, vamos aprender sobre espaçamento e o box model — como o CSS realmente mede e organiza os elementos 📐✨