⚡ Curso de CSS • Web-ZoneWare

Alinhamento e Decoração de Texto no CSS | Web Academy

Lição 19 de 50

Alinhamento e Decoração de Texto no CSS | Web Academy

A tipografia na web não termina na escolha do tamanho e peso das fontes. A forma como os blocos de texto se acomodam horizontalmente, a sofisticação visual das linhas de link e o tratamento estético das palavras determinam o profissionalismo de um produto digital. Nesta lição, você dominará o alinhamento e decoração de texto no CSS: aprenderá por que o texto justificado é um grave erro de acessibilidade na web, como customizar links elegantes com espessuras e a propriedade text-underline-offset, a regra de acessibilidade para maiúsculas com text-transform e a fórmula mágica do truncamento com reticências (text-overflow: ellipsis).

1. Alinhamento Horizontal com text-align e Propriedades Lógicas

A propriedade text-align controla como o texto em linha é distribuído dentro de um elemento de bloco:

Valor Alinhamento Visual Suporte a Internacionalização? Uso Recomendado
start (Moderno) Alinha no início da linha de leitura. Sim! Esquerda em LTR; Direita em RTL. Padrão Ouro: Textos de leitura e parágrafos.
end (Moderno) Alinha no fim da linha de leitura. Sim! Direita em LTR; Esquerda em RTL. Tabelas numéricas e preços em e-commerce.
center Centraliza o texto entre as bordas. Simétrico Títulos curtos de Hero, badges e cards de produto.
left / right Alinhamento físico rígido. Não (ignora idiomas RTL) Layouts que exigem direção física fixa.
justify Estica o texto para tocar as duas bordas. Gera falhas graves de UX Anti-padrão na web! Evite sempre.
🚫
Por que NUNCA usar text-align: justify na Web?

Em jornais e livros impressos, os diagramadores ajustam manualmente o corte de palavras com hifenização milimétrica. Nos navegadores, o algoritmo do justify simplesmente adiciona espaços gigantescos e aleatórios entre as palavras. Isso cria o fenômeno dos “Rios de Branco” (Rivers of White): vãos verticais vazios que causam fadiga visual e desorientam gravemente pessoas com dislexia ou TDAH.

Diretriz WCAG 2.1 (Critério 1.4.8): Todo texto na web deve ser alinhado à esquerda (text-align: start), mantendo a borda direita naturalmente irregular (“ragged right”) para guiar os olhos na troca de linha.

2. A Nova Era do text-decoration: Linhas, Cores e Espessuras

No CSS antigo, text-decoration: underline; desenhava uma linha azul fina, colada diretamente na base das letras.

No CSS moderno (CSS Text Decoration Module Level 3), text-decoration tornou-se uma propriedade resumida (shorthand) extremamente poderosa composta por 4 eixos:

CSS
modern-decorations.css
CSS3 16 linhas 
/* Sintaxe: [line] [style] [color] [thickness] */
 
/* 1. Sublinhado elegante com cor suave e espessura controlada */
a.link-moderno {
    text-decoration: underline solid #38bdf8 2px;
}
 
/* 2. Preço riscado em e-commerce (line-through) */
.preco-antigo {
    text-decoration: line-through solid #ef4444 1.5px;
}
 
/* 3. Sublinhado ondulado de erro de ortografia (wavy) */
.erro-gramatical {
    text-decoration: underline wavy #dc2626 2px;
}

3. O Segredo dos Links Modernos: text-underline-offset

Um dos problemas estéticos mais irritantes do sublinhado clássico é que ele corta as hastes inferiores de letras descendentes (como ‘p’, ‘q’, ‘y’, ‘g’ e ‘j’).

A propriedade moderna text-underline-offset resolve isso de forma brilhante, permitindo afastar o sublinhado para baixo da linha de base:

CSS
underline-offset.css
CSS3 16 linhas 
a.link-editorial {
    color: #ffffff;
    text-decoration: underline solid #0284c7 2px;
    
    /* Afasta a linha 4px para baixo, deixando as letras 'p', 'g' e 'y' respirarem! */
    text-underline-offset: 4px;
    
    /* Evita colisão com os traços das letras */
    text-decoration-skip-ink: auto;
    transition: text-underline-offset 0.2s ease, text-decoration-color 0.2s ease;
}
 
a.link-editorial:hover {
    text-underline-offset: 6px;  /* Micro-interação elegante ao passar o mouse */
    text-decoration-color: #38bdf8;
}

4. Transformações de Caixa com text-transform & Acessibilidade

A propriedade text-transform altera a capitalização visual do texto sem modificar os caracteres originais no HTML:

  • uppercase: Transforma tudo em MAIÚSCULAS.
  • lowercase: Transforma tudo em minúsculas.
  • capitalize: Transforma A Primeira Letra De Cada Palavra Em Maiúscula.
  • none: Mantém o texto exatamente como foi digitado.
💡
Acessibilidade para Leitores de Tela:

Nunca digite palavras em caixa alta diretamente no HTML (ex: <button>COMPRAR AGORA</button>). Certos sintetizadores de voz para pessoas cegas tratam palavras em caixa alta como siglas e soletram letra por letra (“C-O-M-P-R-A-R”).

O padrão correto: Digite normalmente no HTML (<button>Comprar agora</button>) e transforme visualmente no CSS com text-transform: uppercase;.

A Dupla Inseparável: uppercase + letter-spacing

Textos em letras maiúsculas ficam naturalmente apertados e pesados. Sempre que aplicar text-transform: uppercase em badges, botões ou títulos, adicione espaçamento entre letras (tracking):

CSS
badge-tracking.css
CSS3 8 linhas 
.badge-topo {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    
    /* O letter-spacing afasta as maiúsculas e confere sofisticação de alta costura */
    letter-spacing: 0.08em;
}

5. Truncamento com Reticências: text-overflow: ellipsis

Em dashboards, tabelas e cards com títulos dinâmicos vindos de bancos de dados, textos longos frequentemente quebram layouts. Para truncar o texto e adicionar reticências (“…”) de forma automática, utilizamos uma tríade clássica do CSS:

CSS
single-line-ellipsis.css
CSS3 7 linhas 
/* A Tríade Obrigatória do Truncamento de Linha Única: */
.texto-truncado-1-linha {
    white-space: nowrap;       /* 1. Proíbe o texto de quebrar para a linha seguinte */
    overflow: hidden;          /* 2. Esconde o que passar do limite da caixa */
    text-overflow: ellipsis;   /* 3. Desenha automaticamente os "..." no ponto de corte! */
    max-width: 250px;
}

Truncamento Multilinha Moderno (Line Clamp)

Se você deseja permitir até duas ou três linhas de texto antes de truncar, o CSS moderno oferece o line-clamp:

CSS
multiline-clamp.css
CSS3 6 linhas 
.resumo-card-2-linhas {
    display: -webkit-box;
    -webkit-line-clamp: 2;        /* Exibe no máximo 2 linhas */
    -webkit-box-orient: vertical;
    overflow: hidden;             /* Corta o excesso com "..." na 2ª linha */
}

6. Laboratório Prático: Card de E-Commerce com Preços e Tipografia Refinada

Neste laboratório completo, construiremos um card de produto de alta conversão integrando truncamento multilinha, links com text-underline-offset, badges com tracking e preços com line-through:

HTML
product-card-typography.html
HTML5 21 linhas 
<div class="produto-card">
    <span class="badge-promocao">Oferta Especial</span>
 
    <!-- Título com truncamento em 2 linhas -->
    <h3 class="produto-titulo">
        Monitor Gamer Curvo UltraWide 34 Polegadas 165Hz com HDR400 e Painel IPS
    </h3>
 
    <div class="produto-precos">
        <span class="preco-de">R$ 2.899,00</span>
        <span class="preco-por">R$ 1.999,00</span>
    </div>
 
    <p class="produto-descricao">
        Imersão panorâmica completa para desenvolvedores e criadores de conteúdo com fidelidade cromática DCI-P3 de 98%.
    </p>
 
    <div class="produto-links">
        <a href="#" class="link-detalhes">Ver Especificações Completas →</a>
    </div>
</div>
CSS
product-card-typography.css
CSS3 100 linhas 
/* Reset e base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
 
body {
    background-color: #0b0f19;
    color: #e2e8f0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
}
 
.produto-card {
    background-color: #1e293b;
    border: 1px solid #334155;
    border-radius: 16px;
    padding: 2rem;
    max-width: 380px;
    width: 100%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
}
 
/* 1. Badge em caixa alta com letter-spacing */
.badge-promocao {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;     /* Essencial para maiúsculas elegantes */
    background-color: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 9999px;
    margin-bottom: 1rem;
}
 
/* 2. Truncamento de título em no máximo 2 linhas */
.produto-titulo {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
    color: #ffffff;
    margin-bottom: 1rem;
    
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
 
.produto-precos {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
 
/* 3. Preço antigo com line-through decorativo */
.preco-de {
    font-size: 0.9rem;
    color: #64748b;
    text-decoration: line-through solid #ef4444 1.5px;
}
 
.preco-por {
    font-size: 1.6rem;
    font-weight: 800;
    color: #38bdf8;
}
 
.produto-descricao {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #94a3b8;
    margin-bottom: 1.75rem;
    text-align: start; /* Alinhamento seguro e acessível */
}
 
/* 4. Link sofisticado com text-underline-offset */
.link-detalhes {
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: underline solid #0284c7 2px;
    text-underline-offset: 4px;
    transition: all 0.2s ease;
}
 
.link-detalhes:hover {
    color: #38bdf8;
    text-decoration-color: #38bdf8;
    text-underline-offset: 6px;
}
⚡ Abrir no Playground IDE →

7. Boas Práticas da Indústria & Checklist de Estilização

  • ❌ Banimento do text-align: justify: Nunca justifique textos corridos na web. Mantenha text-align: start para proteger a legibilidade de pessoas com dislexia e cumprir a WCAG 2.1.
  • ✅ Adote text-underline-offset em Links de Artigos: Um deslocamento de 3px ou 4px transforma links amadores em tipografia de alto padrão visual.
  • ✅ Combine text-transform: uppercase com letter-spacing: O espaçamento entre letras de 0.05em a 0.1em descompressa maiúsculas e melhora a clareza óptica de botões e tags.
  • ✅ Nunca Digite Maiúsculas Diretamente no HTML: Escreva em caixa mista e aplique a transformação no CSS para proteger a leitura correta em sintetizadores de voz de acessibilidade.

8. Ferramentas Relacionadas & Próximos Passos

Valide decorações de texto e pratique tipografia no portal Web-ZoneWare:

🏆
A Seguir: Conclusão do Módulo 2!

Na Lição 20: Sombras no CSS: text-shadow e box-shadow, encerraremos o Módulo 2 dominando luz, elevação, sombras suaves multicamadas, sombras internas (inset) e efeitos de brilho neon (Glow).

9. Referências Técnicas & Especificações Oficiais

Rolar para cima