Tipografia no CSS

Tempo de leitura: 4 minutos

Tipografia no CSS: O controle de Fontes (font-family, font-size) garante que a fonte certa seja exibida. No entanto, o controle de Tipografia vai além, focando em como o texto se comporta em seu container: alinhamento, espaçamento, tratamento de quebras e efeitos visuais.

O CSS oferece um conjunto robusto de propriedades para transformar blocos de texto comuns em conteúdo legível, hierárquico e esteticamente agradável.

Neste artigo, Tipografia no CSS, exploraremos as principais propriedades CSS que controlam o Layout do Texto e o refinamento tipográfico.

1. Alinhamento e Direção do Texto

Propriedade	Função	Valores Comuns	Notas
`text-align`	Alinhamento horizontal do conteúdo em nível de bloco.	`left`, `right`, `center`, `justify`	Afeta as linhas do texto, não o elemento em si.
`text-align-last`	Define o alinhamento da última linha em um bloco de texto.	`auto`, `left`, `center`	Mais usado em conjunto com `text-align: justify`.
`vertical-align`	Alinhamento vertical de elementos `inline` (texto, imagens).	`baseline`, `middle`, `top`, `bottom`	Importante: Esta propriedade só funciona em elementos que se comportam como inline ou inline-block.

Exemplo de `vertical-align`

CSS

/* Alinha o ícone verticalmente ao centro do texto ao lado */
.texto-com-icone {
  font-size: 1.2rem;
}
.texto-com-icone img {
  vertical-align: middle; 
}

2. Espaçamento e Indentação

O controle do espaçamento tipográfico (tracking, leading, kerning) é vital para a legibilidade.

Propriedade	Função	Exemplo	Unidade Recomendada
`line-height`	Espaçamento vertical entre linhas.	`1.5`	Sem unidade (relativo ao `font-size`) para melhor herança.
`letter-spacing`	Espaço horizontal entre letras.	`0.1em`	Use `em` ou `rem` para que o espaçamento escale com o tamanho da fonte.
`word-spacing`	Espaço horizontal entre palavras.	`0.5rem`	Raro, geralmente ajustado pelo navegador.
`text-indent`	Recuo da primeira linha de um bloco de texto.	`2em`	Bom para parágrafos longos, imitando o estilo de impressão.

3. Transformação e Decoração de Texto

A. Transformação de Texto

A propriedade text-transform permite alterar a capitalização sem modificar o HTML subjacente:

CSS

/* Transforma todo o texto do cabeçalho em MAIÚSCULAS */
h1 {
  text-transform: uppercase;
}

/* Transforma a primeira letra de cada palavra em Maiúscula */
.nome-proprio {
  text-transform: capitalize;
}

B. Decoração de Texto (Shorthand)

A propriedade text-decoration é um shorthand moderno para definir a linha, a cor e o estilo da decoração de uma só vez.

Propriedade	Função	Valores Comuns
`text-decoration-line`	Tipo de linha.	`underline`, `line-through`, `none`, `overline`
`text-decoration-color`	Cor da linha.	`red`, `#333`, `var(--cor)`
`text-decoration-style`	Estilo da linha.	`solid`, `double`, `dotted`, `wavy`

Exemplo Shorthand:

CSS

a {
  /* Linha: sublinhada | Cor: vermelho | Estilo: ondulado */
  text-decoration: underline red wavy; 
}

4. Controle de Quebras e Espaços em Branco

Essas propriedades são cruciais para lidar com conteúdo gerado, nomes longos ou código pré-formatado.

white-space: Controla como o CSS trata os espaços em branco, quebras de linha e tabulações dentro do elemento.
- nowrap: Impede que o texto quebre linhas, forçando-o a permanecer em uma única linha.
- pre-wrap: Preserva os espaços em branco e quebras de linha do código-fonte, mas envolve o texto se ele for muito longo para a linha.
word-break / overflow-wrap: Lidam com palavras que são muito longas para caber na linha.
- overflow-wrap: break-word; (ou word-wrap): Quebra uma palavra longa apenas se for necessário para evitar que ela transborde o container. (Recomendado).
- word-break: break-all;: Quebra qualquer palavra para que caiba, independentemente da necessidade (pode ser usado em idiomas asiáticos).

5. Efeitos Visuais

A propriedade text-shadow permite adicionar uma ou mais sombras ao texto, melhorando a legibilidade em fundos complexos ou criando efeitos estilísticos.

CSS

/* text-shadow: [horizontal] [vertical] [blur] [color] */
h1 {
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8); /* Efeito de brilho */
}

✅ Conclusão Tipografia no CSS

O CSS fornece as ferramentas para que o texto não seja apenas conteúdo, mas um elemento de design funcional. Ao dominar as propriedades de Alinhamento, Espaçamento e Quebra de Palavras, e combiná-las com boas práticas de Unidades Relativas (rem), você cria uma tipografia que é não apenas esteticamente agradável, mas altamente legível, hierárquica e responsiva em qualquer dispositivo.

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo: