Unidades CSS

Você já sabe escrever uma declaração como color: teal. Propriedades de tamanho precisam de uma segunda ideia: quão grande. font-size: 16 sozinho é inválido para a maioria dos comprimentos — o navegador precisa de uma unidade para saber o que «16» significa.

O que são unidades CSS?

Unidades CSS são os sufixos de medida ligados a valores de comprimento — por exemplo px, rem, %, vw e vh. Unidades absolutas mantêm o mesmo tamanho independentemente do pai. Relativas escalam com outra coisa: a fonte do elemento, a fonte raiz, o tamanho do pai ou o viewport.

Absolutas vs relativas em um olhar

Use esta tabela como mapa. Você não precisa de cada unidade no primeiro dia — aprenda as famílias e depois pratique as do dia a dia.

Pixels (px)

px é uma unidade absoluta na tela. Previsível para bordas finas e pequenos detalhes fixos. Menos ideal como única unidade para toda a tipografia em um site responsivo, porque não escala automaticamente com a preferência de fonte raiz do usuário como o rem pode.

Quando px ainda brilha

Prefira px para bordas finíssimas, deslocamentos de sombra e chrome de UI minúsculo com borda fixa. Prefira unidades relativas quando o design deve respirar com o tamanho da fonte ou a largura do contêiner.

rem e em

rem é relativa ao tamanho da fonte do elemento raiz (geralmente <html>). em é relativa ao tamanho da fonte do elemento atual (ou do pai, conforme a propriedade). Para iniciantes, rem é o padrão mais seguro para font-size e muitos espaçamentos porque permanece consistente em elementos aninhados.

em em uma frase

Use em quando quiser que um valor escale com a fonte local — por exemplo padding que cresça se o texto daquele componente aumentar. Se em aninhados se multiplicarem e «fugirem», mude esses tamanhos para rem.

Porcentagens (%)

Uma porcentagem é relativa a uma medida do pai. Com width: 50%, o elemento mira metade da largura do pai (quando o pai tem largura definida). Porcentagens são a ferramenta clássica de layouts fluidos dentro de um contêiner.

Unidades de viewport (vw e vh)

1vw é 1% da largura do viewport; 1vh é 1% da altura do viewport. Potentes para heroes em tela cheia, mas fáceis de abusar — texto medido só em vw pode ficar ilegível em telas muito largas ou muito estreitas.

Um hábito padrão prático

Hábito inicial: rem para tamanhos de fonte e a maior parte do espaçamento vertical, % ou ferramentas de layout flexíveis (depois: Flexbox/Grid) para larguras, e px para bordas e detalhes fixos minúsculos. Volte às unidades de viewport ao construir seções full-bleed — não para cada margem.

Experimente você mesmo

1. Crie uma regra .card com width: 80%, max-width: 24rem e border: 1px solid #94a3b8.
2. Defina .card h2 { font-size: 1.5rem; } e um parágrafo curto em 1rem.
3. Adicione uma seção .banner { min-height: 40vh; } acima do cartão.
4. Redimensione a janela e altere html { font-size: … } raiz para sentir como %, vh e rem reagem de forma diferente.
5. Opcional: converta o título para 1.5em dentro de .card e veja se o aninhamento surpreende.

Erros comuns

• Escrever font-size: 16 sem unidade — inválido para comprimentos em CSS padrão
• Usar só px para cada fonte em um site que deveria respeitar zoom/preferências
• Aninhar muitos em até o texto ficar enorme ou minúsculo
• Definir o texto do corpo só com vw e ver as linhas explodirem em monitores grandes
• Assumir que altura % funciona quando o pai não tem altura explícita

Resumo

• Valores de comprimento geralmente precisam de uma unidade (px, rem, %, vw, …)
• Absolutas ficam fixas; relativas escalam com fonte, pai ou viewport
• Prefira rem para tipografia, %/sistemas de layout para larguras, px para bordas finas
• em escala com a fonte local; vw/vh com o viewport
• Combine a unidade com a tarefa — não force uma única unidade em todo lugar