rem vs em vs px: qual unidade CSS usar em cada propriedade

rem vs em vs px depende de com o que o tamanho é relativo. rem é relativo ao tamanho de fonte do elemento raiz, então 1rem significa o mesmo em toda a página. em é relativo ao tamanho de fonte do próprio elemento (ou do pai, quando usado em font-size), então muda de componente para componente. px é um pixel CSS fixo que ignora a preferência de tamanho de fonte do usuário. Um padrão prático: rem para tamanhos de fonte e espaçamento da página, em para o que deve crescer com o próprio texto (o preenchimento de um botão, o tamanho de um ícone), px para bordas e sombras, e em ou rem nas media queries.

Em vs rem: como cada unidade é calculada

As três unidades diferem apenas no ponto de referência. A referência de comprimentos do MDN as define assim (conferido em outubro de 2026):

O valor de 16px é o padrão comum dos navegadores, não uma constante. O MDN observa que as preferências do usuário podem alterá-lo, e essa é a razão inteira para preferir unidades relativas no texto.

Em um componente:

html { font-size: 100%; }      /* 16px com os padrões do navegador */

.card { font-size: 1.25rem; }  /* 20px */
.card h2 { font-size: 1.5em; } /* 1,5 × 20px = 30px */
.card p  { font-size: 1.5rem; }/* 1,5 × 16px = 24px, o card não importa */
.card .tag { padding: 0.5em; } /* metade do tamanho de fonte da própria tag */

O título em em depende de onde está. Tire-o de .card e ele vira 24px. O parágrafo em rem tem 24px em qualquer lugar.

Por que o em se acumula

Como o em em font-size multiplica o tamanho do pai, elementos aninhados se multiplicam de novo:

li { font-size: 0.875em; }

Uma lista com três níveis de profundidade termina em 0,875 × 0,875 × 0,875 ≈ 0,67 do tamanho base: cerca de 10,7px a partir de uma raiz de 16px. Com 0.875rem, cada nível fica em 14px. Essa acumulação é o motivo de rem ser a escolha mais segura para tamanhos de fonte, e de em ficar reservado para onde escalar com o texto local é justamente o objetivo.

Qual unidade usar em cada propriedade CSS

Escolha a unidade perguntando a que o tamanho deve acompanhar: a preferência de texto do usuário, o texto próprio do componente, ou nada. Estas são recomendações e uma decisão de design; nenhuma especificação as exige:

Larguras de layout em px são adequadas quando devem acompanhar a tela e não o texto. Uma borda de 1px, um avatar fixo de 44px ou um contêiner de página de 1200px não precisam crescer com o tamanho da fonte. O texto dentro dessas caixas, sim.

O espaçamento é uma questão de julgamento. Espaçamento em rem mantém o ritmo da página em sintonia com o texto quando o usuário o aumenta. Espaçamento em px deixa mais conteúdo em uma tela pequena com texto grande. Em um celular de 360px de largura, esse compromisso aparece logo, e por isso vale testá-lo (veja a última seção).

Rem vs px para tamanho de fonte e acessibilidade

Use rem (ou %, ou palavras-chave como medium) para tamanhos de fonte, porque um px ignora o tamanho de texto padrão que o usuário escolheu no navegador. No Chrome para desktop, essa configuração fica em Configurações > Aparência > Tamanho da fonte, com mais opções em Personalizar fontes (Ajuda do Chrome). Um usuário que a aumenta do padrão para 20px recebe texto de 20px com 1rem, e continua com 16px usando 16px.

O zoom do navegador funciona de outra forma. O zoom escala tudo, inclusive px, então um layout em px também aumenta quando o usuário pressiona Ctrl e +. A configuração de tamanho de fonte é o caso em que rem e px se comportam de forma diferente, e é a configuração em que pessoas com baixa visão confiam quando querem texto maior sem uma página que rola na horizontal.

O critério de sucesso WCAG 2.2 1.4.4 Redimensionar texto (nível AA) pede que o texto possa ser ampliado até 200 por cento sem perda de conteúdo ou funcionalidade. Suas técnicas suficientes incluem usar unidades em para tamanhos de fonte. Unidades relativas facilitam esse critério; não o garantem, porque uma caixa de altura fixa ainda pode cortar um texto que cresceu.

Celulares e o tamanho de texto do sistema

Nos celulares, o quadro está mudando. O Chrome 146 (estável em 10 de março de 2026) adicionou uma tag meta opcional que faz o tamanho de fonte raiz acompanhar a escala de texto do sistema operacional e do navegador (notas de versão do Chrome 146):

<meta name="text-scale" content="scale">
<meta name="viewport" content="width=device-width, initial-scale=1">

Com a tag, a referência text-scale do MDN diz que rem, em e as palavras-chave de tamanho de fonte escalam com a configuração do sistema, enquanto tamanhos de fonte em px não. Em outubro de 2026, o MDN marca a tag como experimental, com disponibilidade limitada, e alerta que a escala de texto mobile pode ir de 200% a mais de 300%, então uma página que a adota precisa de testes nesses tamanhos. Sem a tag, o Chrome no Android oferece um controle deslizante de Zoom padrão em Configurações > Acessibilidade, que amplia a página inteira (Ajuda do Chrome), então px e rem crescem juntos ali.

Esse é o argumento mais forte para tamanhos de fonte em rem hoje: um site dimensionado em rem está pronto para a escala de texto do sistema no dia em que ganhar uma única tag meta.

O tamanho de fonte raiz e o truque dos 62,5%

Deixe o tamanho de fonte raiz em paz, ou defina-o como porcentagem. Definir html { font-size: 16px; } sobrescreve a preferência do usuário em toda a página, porque cada rem agora aponta para 16px fixos.

O conhecido truque dos 62,5% define html { font-size: 62.5%; } para que 1rem seja igual a 10px com os padrões e 1.6rem seja igual a 16px. Ele mantém o escalonamento do usuário, porque a porcentagem é aplicada sobre o padrão do usuário. O custo é que qualquer componente de terceiros escrito para um rem de 16px sai com 62,5% do tamanho pretendido. Se você quer contas fáceis, uma função Sass ou uma propriedade personalizada CSS faz a conversão sem mexer na raiz.

Tabela de conversão de px para rem

Com o tamanho de fonte raiz padrão, rem = px / 16:

Mantenha os campos de formulário em 16px (1rem) ou mais: o Safari no iOS dá zoom em campos cujo texto é menor.

Em, rem ou px nas media queries

Use em ou rem nas condições de media query, porque assim os breakpoints acompanham o tamanho de fonte padrão do usuário. Nas media queries, as duas unidades têm o mesmo sentido: a especificação Media Queries Level 4 diz que as unidades relativas ali se baseiam no tamanho de fonte inicial, definido pelo user agent ou pelas preferências do usuário, e não na sua regra html.

/* 48em = 768px com padrão de 16px, 960px com 20px */
@media (min-width: 48em) {
  .layout { display: grid; grid-template-columns: 1fr 2fr; }
}

Considere um tablet em retrato com uma área de visualização de 820px de largura (820x1180 representou 5,06% das resoluções de tablet no mundo, segundo os dados da StatCounter de setembro de 2026). Com as configurações padrão, o layout de duas colunas é ativado em 768px, então o tablet recebe duas colunas. Um usuário com padrão de 20px recebe a coluna única até 960px, que é o layout que ainda cabe com o texto maior dele. Uma query min-width: 768px imporia duas colunas a ele e espremeria o texto.

Como escolher os valores dos breakpoints está em escolher breakpoints responsivos, e a sintaxe das queries em si no guia de media queries CSS.

Confira suas unidades na largura de um celular

Para ver se as suas unidades reagem ao tamanho de texto do usuário, aumente a fonte padrão e olhe a página em uma largura pequena de celular:

1. No Chrome para desktop, abra Configurações > Aparência > Tamanho da fonte e escolha um tamanho maior, ou defina um tamanho exato em Personalizar fontes.
2. Abra a página em um viewport de celular de 360px de largura. O Mobile View Extension recarrega a aba como um celular, com user agent mobile e tamanho de tela mobile; escolha uma predefinição ou digite 360 × 800 como resolução personalizada. O modo de dispositivo do DevTools também serve.
3. Confira se o texto do corpo aumentou. Se não aumentou, alguma coisa fixa o tamanho de fonte em px ou o tamanho raiz em px.
4. Procure texto que estoure botões, rótulos cortados em caixas de altura fixa e navegação que quebre em duas linhas.
5. Volte a configuração para o padrão e compare os dois estados lado a lado.

Isso testa só a configuração de tamanho de fonte do desktop. A prévia roda no Chrome de desktop, com mouse, então não reproduz o tamanho de texto do sistema de um celular, a renderização do Safari nem a tag text-scale no Android. Para isso, use um celular real ou um emulador e aumente lá a fonte do sistema.

Como layouts fluidos são construídos com essas unidades está em o que é design web responsivo.

Perguntas frequentes

Devo usar rem ou px para o tamanho da fonte?

Use rem para o tamanho da fonte. Um px ignora o tamanho de texto padrão que o usuário escolheu no navegador, enquanto rem o acompanha, e são também os tamanhos em rem que a tag text-scale do Chrome faz escalar nos celulares.

Quando usar em em vez de rem?

Use em quando um tamanho deve acompanhar o texto do próprio elemento: preenchimento de botões e badges, ícones dentro do texto, espaçamento entre letras e condições de media query. Evite em em valores de font-size aninhados, porque eles se acumulam.

1rem é sempre 16px?

Não. 1rem é igual ao tamanho de fonte do elemento raiz, que só é 16px com o padrão comum do navegador. Uma configuração do usuário, uma porcentagem em html ou a tag text-scale podem alterá-lo.

Em e rem se comportam de forma diferente nas media queries?

Não. Nas media queries, os dois se baseiam no tamanho de fonte inicial vindo do navegador e das configurações do usuário, então 48em e 48rem dão o mesmo breakpoint. Um tamanho de fonte definido em html na sua folha de estilo não os afeta.