px, rem e em

Essas três unidades aparecem em quase todo codebase frontend. Em exemplos pequenos parecem intercambiáveis, mas em componentes reais se comportam de forma diferente.

px: o padrão do handoff de design

px é unidade absoluta em CSS. 16px significa dezesseis pixels CSS, independente do font-size do pai.

Use px quando:

• Borda fixa, sombra ou divisor de 1px
• Canvas, traço SVG ou assets pixel-perfect
• Spec pontual onde tokens em rem ainda não existem

Evite px para toda a tipografia se o design system espera escala em rem.

rem: relativo ao elemento raiz

1rem equivale ao font-size computado do elemento raiz (html), em geral 16px por padrão.

html {
  font-size: 16px;
}

.title {
  font-size: 1.5rem; /* 24px */
}

Use rem quando:

• Criar tokens de design para font-size, espaçamento e radius
• Quiser que tamanhos escalem se o projeto mudar o font-size da raiz
• Precisar de valores consistentes entre componentes não relacionados

em: relativo ao font-size do elemento atual

1em equivale ao font-size computado do próprio elemento (ou do pai em alguns casos de herança, como padding).

.button {
  font-size: 1rem;
  padding: 0.75em 1.25em;
}

Aqui o padding escala automaticamente com o font-size do botão.

Use em quando:

• Espaçamento deve seguir a tipografia local dentro do componente
• Ícones ou badges devem escalar com o texto próximo
• Você quer comportamento de tamanho aninhado de propósito

Comparação rápida

Unidade	Melhor para	Cuidado
px	Bordas, assets precisos	Não escala com configurações da raiz
rem	Tokens globais, tipografia	Assume font-size estável na raiz
em	Ritmo interno do componente	Compõe em texto muito aninhado

Erro comum: misturar contextos

O designer passa corpo em 20px. Você escreve 20px no CSS. Depois a equipe adota html { font-size: 62.5%; } para facilitar conta em rem, e seus px não alinham mais com os tokens rem.

Fluxo melhor: converter px para rem uma vez, guardar tokens e reutilizar.

Resumo

Use px para detalhes físicos fixos, rem para tokens do sistema e em para tamanhos que devem seguir o texto local.

Converta px de design para rem no Conversor de unidades CSS / Gerador clamp e defina o font-size da raiz do projeto antes de copiar valores.