Converter pixels em rem com o tamanho correto da fonte raiz

Para converter pixels CSS em rem, divida o valor em pixels pelo tamanho da fonte do elemento raiz: valor em rem = valor em px ÷ tamanho da fonte raiz em px. Com uma fonte raiz de 16 px, 24 px correspondem a 1,5 rem. Com uma fonte raiz de 20 px, os mesmos 24 px correspondem a 1,2 rem.

O conversor de px em rem faz essa divisão. O campo da fonte raiz começa em 16, mas não lê sua folha de estilos. Portanto, confira a base antes de converter um tamanho de texto ou espaçamento.

Encontrar o tamanho da fonte raiz da sua página

Um rem se refere ao tamanho da fonte do elemento raiz, geralmente html. O valor de 16 px é comum, mas não é universal: os estilos do site e as preferências do navegador podem alterá-lo. A MDN explica essa referência da unidade rem.

1. Abra a página do seu projeto no navegador. Inspecione o elemento html com as ferramentas de desenvolvimento.
2. No painel de estilos calculados, procure font-size e anote o valor em pixels. Não use o valor de body nem o do título que deseja converter.
3. Outra opção: no console dessa mesma página, execute getComputedStyle(document.documentElement).fontSize. Uma resposta “20px” indica uma base de 20 para o conversor.
4. Confira o valor novamente se uma regra responsiva ou configuração mudar o tamanho da fonte raiz. A medição representa a página em seu estado atual.

Esse método usa os estilos realmente aplicados, como esclarece a documentação de getComputedStyle.

Converter e aplicar o valor

1. Digite 24 no campo de pixels CSS, sem acrescentar px.
2. Digite a base encontrada, por exemplo, 16. A base deve ser maior que zero; o valor a converter pode ser zero, mas não negativo.
3. Inicie a conversão. A ferramenta mostra “24px ÷ 16px = 1,5rem”. Na exibição, o resultado usa vírgula decimal; para uma declaração CSS, use o ponto decimal em 1.5rem, por exemplo, “font-size: 1.5rem;”.
4. Confira a aparência na sua página. Se a fonte raiz for 20 px, use o resultado 1.2rem para obter 24 px. Manter 1.5rem produziria 30 px.

Em português, escrevemos 1,5 em uma explicação; o código CSS exige o ponto decimal: 1.5rem. Os pixels dessa conversão são pixels CSS, não os pixels físicos da tela. Não aplique nenhum multiplicador relacionado à densidade da tela. A MDN detalha essa diferença.

Entender a diferença entre rem e em

As unidades rem permitem compartilhar uma referência comum entre componentes. As unidades em acompanham o tamanho da fonte do elemento; em uma declaração font-size, acompanham o tamanho da fonte do elemento pai. Por isso, tamanhos de texto em em podem se multiplicar com o aninhamento. Escolha em se essa dependência do componente for desejada e rem se quiser uma referência à raiz. O módulo CSS Values and Units define essas unidades.

Evitar erros de base e precisão

Não mude o tamanho da fonte raiz só para fazer um cálculo dar certo: isso também alteraria as dimensões em rem já existentes. Em vez disso, corrija a base informada e recalcule.

O resultado é arredondado para, no máximo, seis casas decimais. Assim, 17 px com uma fonte raiz de 18 px aparecem como 0,944444rem na ferramenta. No código CSS, escreva 0.944444rem, com ponto decimal. Zeros desnecessários no final não são mantidos.

Um valor muito pequeno pode desaparecer na exibição: 0.000001 px ÷ 16 produz 0rem após o arredondamento. Isso não significa que o quociente matemático seja zero. Confira antes de substituir um valor muito pequeno no CSS. Números não finitos e resultados que ultrapassam a faixa numérica suportada são recusados.

Verificar também o redimensionamento do texto

Usar rem não garante acessibilidade. Teste o zoom até 200%, assim como a ampliação do texto e as preferências de fonte: títulos, botões e campos devem continuar legíveis e utilizáveis. Observe se há texto cortado ou sobreposto em contêineres rígidos. Uma dimensão em px não é automaticamente inacessível: o zoom da página também a amplia. O critério WCAG 1.4.4 trata do redimensionamento sem perda de conteúdo nem de funcionalidade, não do uso obrigatório de uma unidade.

Perguntas frequentes

Quantos rem equivalem a 16 px?

1rem com uma fonte raiz de 16 px; 0.8rem com uma fonte raiz de 20 px. É preciso conhecer a base para responder.

Preciso converter todos os valores px em rem?

Não. Escolha a unidade conforme o comportamento desejado: acompanhar a tipografia da raiz, a do componente ou manter um comprimento CSS independente da fonte.

Por que meu resultado é diferente do resultado do conversor?

Confira o tamanho calculado de html, as regras CSS que substituem sua declaração e o arredondamento. O conversor calcula apenas com base nos dois valores informados.