Existem diversas formas de trabalhar e configurar textos no CSS. Vou listar alguns dos atributos mais populares para uso no dia-a-dia.

Atributo: font-family

O atributo font-family no CSS define a família de fontes a ser usada para o texto em um elemento HTML. Ele especifica quais fontes o navegador deve tentar usar para exibir o texto, listando-as em ordem de preferência.

Quando você define o font-family, é comum fornecer uma lista de fontes separadas por vírgulas. O navegador tentará usar a primeira fonte listada; se essa fonte não estiver disponível no sistema do usuário, ele passará para a próxima da lista, e assim por diante, até encontrar uma fonte instalada. Caso nenhuma das fontes especificadas esteja disponível, o navegador usará a fonte padrão do sistema ou uma das fontes genéricas como serif, sans-serif, ou monospace.

Exemplo de Uso:

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

Neste exemplo, o navegador tentará usar a fonte Arial primeiro. Se Arial não estiver disponível, ele tentará Helvetica Neue. Se nenhuma dessas fontes estiver disponível, o navegador usará a fonte genérica sans-serif, que pode variar dependendo do sistema operacional do usuário.

Prática Comum:

• Fontes Genéricas: As fontes genéricas como serif, sans-serif, monospace, cursive, e fantasy são usadas como última opção caso nenhuma das fontes específicas esteja disponível.
• Aspas: Se o nome da fonte contém espaços ou caracteres especiais, ele deve ser colocado entre aspas, como "Times New Roman".

Atributo: font-weight

O atributo font-weight no CSS controla a espessura ou o peso das letras em um elemento HTML. Ele permite ajustar o quão "grossas" ou "finas" as letras aparecerão, o que pode ser útil para destacar partes do texto ou ajustar a estética de uma página.

Valores:

• Palavras-chave:
  • normal: Define o peso padrão da fonte. Geralmente, esse valor é equivalente a 400.
  • bold: Define o texto como negrito. Geralmente, esse valor é equivalente a 700.
  • bolder: Define o peso como mais grosso que o peso do elemento pai.
  • lighter: Define o peso como mais fino que o peso do elemento pai.
• Valores numéricos:
  • Você pode usar valores numéricos de 100 a 900, onde 400 é o valor padrão (normal) e 700 é o valor padrão para negrito (bold). Outros valores, como 100, 200, etc., representam variações mais finas ou mais grossas, dependendo da fonte.

Exemplo de Uso:

h1 {
  font-weight: bold;
}

p {
  font-weight: 300;
}

No exemplo acima:

• O título (h1) será exibido em negrito.
• O parágrafo (p) será exibido com uma fonte mais fina do que o normal.

Prática Comum:

• Negrito em Títulos: O font-weight: bold; é comumente usado para destacar títulos ou cabeçalhos.
• Valores Numéricos: Usar valores numéricos permite maior controle sobre o peso da fonte, especialmente se a fonte em uso oferece múltiplas variações de peso.

Atributo: font-style

O atributo font-style no CSS define o estilo da fonte, como itálico ou normal, para o texto em um elemento HTML.

Valores:

• normal: Exibe o texto com o estilo normal, sem inclinação.
• italic: Exibe o texto em itálico.
• oblique: Exibe o texto inclinado, semelhante ao itálico, mas geralmente com uma inclinação sintética.

Exemplo de Uso:

em {
  font-style: italic;
}

p {
  font-style: oblique;
}

Atributo: line-height

O atributo line-height no CSS define a altura da linha, ou seja, o espaço vertical entre as linhas de texto em um elemento HTML.

Valores:

• Número: Multiplicador do tamanho da fonte. Exemplo: 1.5 significa 1.5 vezes o tamanho da fonte.
• Unidades: Pode ser em pixels (px), em pontos (pt), ou em porcentagem (%). Exemplo: 20px ou 150%.
• Normal: Define uma altura de linha padrão baseada no tamanho da fonte.

Exemplo de Uso:

p {
  line-height: 1.5;
}

h1 {
  line-height: 30px;
}

Atributo: letter-spacing

O atributo letter-spacing no CSS define o espaçamento entre as letras de um texto em um elemento HTML.

Valores:

• Unidades: Pode ser em pixels (px), em (em), pontos (pt), ou outras unidades. Valores positivos aumentam o espaçamento, e valores negativos o diminuem. Exemplo: 2px, 0.1em.
• Normal: O espaçamento padrão entre letras, que é geralmente zero ou a configuração padrão da fonte.

Exemplo de Uso:

h1 {
  letter-spacing: 2px;
}

p {
  letter-spacing: -1px;
}

Atributo: word-spacing

O atributo word-spacing no CSS define o espaçamento entre as palavras de um texto em um elemento HTML.

Valores:

• Unidades: Pode ser em pixels (px), em (em), pontos (pt), ou outras unidades. Valores positivos aumentam o espaçamento, e valores negativos o diminuem. Exemplo: 4px, 0.2em.
• Normal: O espaçamento padrão entre palavras, que é geralmente zero ou a configuração padrão do navegador.

Exemplo de Uso:

p {
  word-spacing: 4px;
}

.quoted-text {
  word-spacing: -2px;
}

Atributo: text-transform

O atributo text-transform no CSS controla a transformação do texto, como a conversão para maiúsculas, minúsculas, ou capitalização de cada palavra.

Valores:

• uppercase: Converte todo o texto para maiúsculas.
• lowercase: Converte todo o texto para minúsculas.
• capitalize: Converte a primeira letra de cada palavra para maiúsculas.
• none: Não aplica nenhuma transformação, exibindo o texto conforme ele é escrito.

Exemplo de Uso:

h1 {
  text-transform: uppercase;
}

p {
  text-transform: capitalize;
}

Atributo: text-align

O atributo text-align no CSS define o alinhamento do texto dentro de um elemento HTML.

Valores:

• left: Alinha o texto à esquerda.
• right: Alinha o texto à direita.
• center: Centraliza o texto.
• justify: Justifica o texto, ajustando o espaçamento entre palavras para que o texto se estenda por toda a largura do elemento.

Exemplo de Uso:

p {
  text-align: center;
}

div {
  text-align: justify;
}

Atributo: text-decoration

O atributo text-decoration no CSS adiciona decorações ao texto, como sublinhado, linha sobre o texto, ou linha através do texto.

Valores:

• none: Remove todas as decorações do texto.
• underline: Adiciona uma linha abaixo do texto.
• overline: Adiciona uma linha acima do texto.
• line-through: Adiciona uma linha através do texto.
• blink: Faz o texto piscar (obsoleto e não suportado por todos os navegadores).

Exemplo de Uso:

a {
  text-decoration: underline;
}

del {
  text-decoration: line-through;
}