Carregando...

Fontes em CSS

Já sabe como o texto assenta na linha. As fontes escolhem quais letras vê — a família tipográfica, o tamanho, o peso e se ficam em itálico. Carregar fontes web personalizadas é a lição seguinte; aqui domina as propriedades básicas de fonte.

Ferramentas de fonte num relance

📊 Propriedades de fonte comuns

Propriedade Trabalho do dia a dia
font-family Nomeia a pilha tipográfica (mais um fallback genérico)
font-size Define o tamanho do texto
font-weight Define o quão negrito é (ex. 400, 700, bold)
font-style Define normal ou italic (e estilos relacionados)
font (atalho) Combina estilo, peso, tamanho e família numa declaração

Pilhas font-family

Liste primeiro as fontes preferidas, depois alternativas mais seguras, e termine com uma família genérica como sans-serif ou serif para que algo seja sempre desenhado.

Pilha sans-serif legível

css
CSS Code 
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

Tamanho da fonte

font-size define o tamanho do texto. Unidades relativas como rem costumam escalar com mais calma; px e palavras-chave como large também funcionam.

Tamanhos de título e corpo

css
CSS Code 
h1 {
font-size: 2rem;
}

p {
font-size: 1rem;
}

Peso tipográfico

font-weight controla o negrito. Pesos numéricos (400, 700) ou palavras-chave (normal, bold) são comuns. A face tem de suportar o peso que pede.

Ênfase com peso

css
CSS Code 
.lead {
font-weight: 700;
}

.caption {
font-weight: 400;
}

Estilo tipográfico — italic

font-style: italic inclina o texto quando existe uma variante itálica. Use em citações ou ênfase suave, não em cada parágrafo.

Citação em itálico

css
CSS Code 
blockquote {
font-style: italic;
font-family: Georgia, "Times New Roman", serif;
}

Atalho font

O atalho font pode definir estilo, peso, tamanho e família juntos. Tamanho e família são obrigatórios na forma que a maioria dos browsers espera.

Atalho font num título de cartão

css
CSS Code 
.card-title {
font: italic 700 1.25rem Georgia, "Times New Roman", serif;
}

Um hábito calmo para o corpo

Escolha uma pilha clara para a página, um peso ou tamanho um pouco mais forte para títulos, e mantenha o corpo fácil de ler.

Linha de base tipográfica da página

css
CSS Code 
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
}

h2 {
font-family: Georgia, "Times New Roman", serif;
font-size: 1.5rem;
font-weight: 700;
}

Experimente você

  1. Defina body com uma pilha sans-serif que termine em sans-serif.
  2. Dê a h1 um font-size maior e font-weight: 700.
  3. Estilize um blockquote com font-style: italic e pilha serif.
  4. Reescreva um título com o atalho font.
  5. Compare o mesmo parágrafo em serif vs sans-serif — note a mudança de tom.

Erros comuns

  • Nomear uma fonte fancy sem fallback (quebra se a face faltar)
  • Definir px enormes fixos em todo o lado sem pensar em relativo
  • Pedir font-weight: 900 quando a face só traz regular e bold
  • Saltar aqui para @font-face / fontes web alojadas (próxima lição)
  • Usar text-align ou text-decoration quando queria font-family ou font-weight

Resumo

  • font-family lista uma pilha e deve terminar numa família genérica
  • font-size define o tamanho; unidades relativas costumam escalar com calma
  • font-weight e font-style dão ênfase negrito e itálico
  • O atalho font empacota estilo, peso, tamanho e família
  • Mantenha uma pilha de corpo clara; carregar fontes web personalizadas é a próxima lição

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
7
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 27 de 35
Css Tutorial