📘 Aula 12 MD-2: Peso, Estilo, Decoração & Shorthand Font em CSS 📘

Introdução

Nesta aula, vamos explorar como controlar o peso da fonte, o estilo, a decoração do texto e como usar a shorthand font para combinar tudo em uma linha. Isso ajuda a criar hierarquia, estilo e destaque visual no seu conteúdo.

💡 Dica: Entender estas propriedades é essencial para criar textos claros, legíveis e visualmente organizados.

font-weight

Controla a espessura da fonte, tanto com valores literais quanto numéricos:

• Literals: lighter, normal, bold, bolder — usados para design rápido ou compatibilidade entre fontes.

• Numéricos: 100, 200, 300 ... até 900 — fornecem controle detalhado da espessura, ideal para hierarquia visual.

💡 Dica: Use valores mais pesados para títulos e mais leves para textos longos, mantendo legibilidade.

font-style

Define normal, italic ou oblique para o texto:

• normal — sem inclinação, padrão da fonte.

• italic — itálico clássico, útil para citações ou palavras estrangeiras.

• oblique — inclinação sutil, alternativa ao italic.

💡 Dica: Combine com pesos diferentes para criar destaque sem prejudicar a hierarquia.

text-decoration

Adiciona decorações visuais no texto:

• underline — sublinha, ideal para links.

• overline — linha acima, efeito estilizado.

• line-through — linha atravessando, usado para mostrar alterações ou exclusões.

💡 Dica: Evite múltiplas decorações em textos longos para não atrapalhar a leitura.

Shorthand font

Permite combinar várias propriedades tipográficas em uma única linha:

Inclui: font-style, font-variant, font-weight, font-size/line-height, font-family e até text-decoration.

💡 Dica: Use para manter CSS organizado e simplificado, especialmente em títulos ou textos destacados.

p {
  font: italic small-caps bold 24px/1.5 'Times New Roman', serif;
  text-decoration:   text-decoration: underline overline;
  color: #55ffcc;
}

Exemplos de combinações

Veja como combinar peso, estilo, variante e decorações para criar hierarquia e impacto visual:

Painel interativo em Tempo Real

Altere peso, estilo, variante e decoração do texto em tempo real e veja os resultados no parágrafo abaixo:

💡 Dica: Experimente diferentes combinações para perceber o impacto visual de cada propriedade CSS no texto.

Boas práticas

• Use pesos e estilos com coerência para criar hierarquia visual.

• Evite excesso de text-decoration para não poluir a leitura.

• Shorthand font ajuda a simplificar CSS, mas use de forma legível e organizada.

Resumo Geral

• font-weight: controla espessura da fonte, literal ou numérico.

• font-style: normal, italic, oblique.

• text-decoration: underline, overline, line-through.

• shorthand font: combina várias propriedades de tipografia em uma linha.

• Painel interativo permite visualizar combinações em tempo real.