Font-size da raiz e px para rem

A maior parte da confusão px → rem vem de ignorar o contexto do font-size da raiz.

Modelo mental padrão

Se:

html {
  font-size: 16px;
}

Então:

px	rem
8px	0.5rem
16px	1rem
24px	1.5rem
32px	2rem

Fórmula:

rem = px / rootFontSize

Quando times mudam a raiz

Alguns projetos usam:

html {
  font-size: 62.5%; /* costuma resolver para 10px se o padrão do navegador for 16px */
}

Agora 1rem pode valer 10px, não 16px. Isso facilita conta mental (24px → 2.4rem), mas quebra suposições se misturado com valores convertidos de base 16px.

Confirme sempre a estratégia de raiz do projeto antes de converter um arquivo de design.

Fluxo de handoff de design

1. Confirme o font-size da raiz no código-alvo.
2. Converta espaçamento e tipografia em px para tokens rem.
3. Mantenha bordas e sombras em px se o design system assim definir.
4. Documente a base no README ou arquivo de tokens.

Exemplo de saída de tokens:

:root {
  --space-4: 1rem;    /* 16px com raiz 16px */
  --space-6: 1.5rem;  /* 24px */
  --text-lg: 1.125rem; /* 18px */
}

em entra quando o pai difere

Se um componente define:

.callout {
  font-size: 0.875rem;
}

Então padding 1em dentro de .callout é relativo a 0.875rem, não à raiz. Para matemática de componentes aninhados, defina o font-size do pai no contexto do conversor.

Erros comuns

• Converter px para rem com base de raiz errada
• Copiar valores rem de um projeto para outro com raiz diferente
• Usar rem para larguras que deveriam seguir escala local do componente (em pode encaixar melhor)

Conclusão

px → rem é divisão simples só depois de saber o font-size da raiz. Trate a raiz como entrada da conversão, não como detalhe depois do fato.

Use a aba de conversão do Conversor de unidades CSS / Gerador clamp com o font-size da raiz do seu projeto antes de copiar tokens rem.