Como Converter PX para REM
A conversão entre pixels (px) e rem é uma das tarefas mais frequentes no desenvolvimento web moderno. Quem trabalha com CSS depara-se constantemente com a necessidade de traduzir valores de uma unidade para outra, seja para adaptar um design entregue em pixels, seja para tornar uma folha de estilos mais acessível e escalável.
A boa notícia é que a fórmula é extremamente simples. Para converter pixels em rem, basta dividir o valor em pixels pelo tamanho da fonte raiz (root font-size). Com a base padrão dos navegadores, que é de 16px, a operação resume-se a dividir por 16. A conversão inversa, de rem para pixels, faz-se multiplicando o valor em rem pelo tamanho da fonte raiz.
A Fórmula
A relação matemática pode escrever-se assim:
rem = px ÷ root font-size
E no sentido inverso:
px = rem × root font-size
Se a fonte raiz for os habituais 16px, então 16px equivalem a 1rem, 32px a 2rem e 8px a 0,5rem. Alterar o valor da fonte raiz altera automaticamente todas estas equivalências, o que é precisamente a vantagem do rem.
O que é a Unidade REM
O nome rem deriva de “root em”, ou seja, “em da raiz”. É uma unidade de medida relativa introduzida no CSS que se baseia sempre no tamanho da fonte definido no elemento raiz do documento, o elemento html. Ao contrário do pixel, que representa um tamanho fixo e absoluto, o rem escala em função dessa fonte de referência.
Por predefinição, os navegadores atribuem ao elemento html um tamanho de fonte de 16px. É por isso que, sem qualquer configuração adicional, 1rem corresponde a 16px. No entanto, se um utilizador alterar o tamanho da fonte padrão nas definições do navegador, ou se o programador redefinir o font-size do html, todas as medidas em rem ajustam-se em conformidade.
REM, EM e PX: as diferenças
É fácil confundir as três unidades, mas cada uma tem um comportamento distinto. O pixel (px) é absoluto e não escala com as preferências do utilizador. O em é relativo, mas ao tamanho da fonte do elemento pai mais próximo, o que pode gerar efeitos de composição difíceis de prever em estruturas aninhadas. O rem é relativo, mas sempre à fonte raiz, o que o torna muito mais previsível e fácil de gerir em projetos de grande dimensão. Por esta razão, o rem tornou-se a escolha preferida para tamanhos de fonte e espaçamentos na maioria dos projetos modernos.
Exemplo Prático de Conversão
Suponhamos que recebeu de um designer uma maquete em que os títulos têm 24px e o texto corrente tem 18px, e que a fonte raiz do projeto é a padrão de 16px.
Para os títulos: 24 ÷ 16 = 1,5rem Para o texto corrente: 18 ÷ 16 = 1,125rem
Se mais tarde decidir que a fonte base do projeto deve ser 20px, para melhorar a legibilidade, não precisa de reescrever cada valor. Basta alterar o font-size do html para 20px, e o título de 1,5rem passará automaticamente a ocupar 30px, enquanto o texto de 1,125rem passará a 22,5px. Esta escalabilidade proporcional é a grande força do rem.
Vejamos ainda algumas equivalências comuns com a base de 16px:
- 12px ÷ 16 = 0,75rem
- 16px ÷ 16 = 1rem
- 24px ÷ 16 = 1,5rem
- 32px ÷ 16 = 2rem
- 48px ÷ 16 = 3rem
Por que Usar REM: Acessibilidade e Manutenção
A principal razão para preferir o rem em vez do px é a acessibilidade. Muitos utilizadores, sobretudo pessoas com dificuldades visuais, aumentam o tamanho da fonte padrão no navegador para conseguirem ler confortavelmente. Quando um site define os seus tamanhos em rem, todo o conteúdo escala proporcionalmente com essa preferência, respeitando a escolha do utilizador. Se, pelo contrário, os tamanhos estiverem fixados em pixels, o texto ignora essa configuração e permanece pequeno, prejudicando a experiência.
Além da acessibilidade, o rem simplifica enormemente a manutenção. Ao concentrar o controlo da escala num único ponto, o font-size do html, é possível ajustar toda a tipografia e todo o espaçamento de um projeto alterando apenas um valor. Isto é particularmente útil em design responsivo, em que se pode adaptar a escala global consoante o tamanho do ecrã através de media queries.
Boas Práticas de Acessibilidade
A recomendação geral é usar rem para tamanhos de fonte, margens, espaçamentos e a maioria das dimensões que devem escalar com as preferências do utilizador. Desta forma, o layout respeita as configurações de acessibilidade sem quebrar o design.
O pixel continua a ter o seu lugar, mas deve reservar-se para elementos que não devem escalar, como bordas finas de 1px, sombras subtis ou determinados detalhes gráficos em que um valor fixo é preferível. Um erro comum a evitar é definir o font-size do html em pixels de forma rígida, o que anularia parte do benefício de acessibilidade; muitos programadores optam por não redefinir de todo a fonte raiz, deixando-a nos 16px predefinidos, ou por defini-la em percentagem.
Outra boa prática é adotar uma base de cálculo mental simples. Alguns projetos definem a fonte raiz em 62,5%, o que corresponde a 10px, tornando a conversão trivial: 1px passa a equivaler a 0,1rem. Esta técnica, embora prática, deve ser usada com cuidado para não comprometer a escalabilidade.
Conclusão
Dominar a conversão entre px e rem é uma competência fundamental para qualquer programador front-end. A fórmula é simples, mas as implicações para a acessibilidade e a manutenção do código são profundas. Ao adotar o rem como unidade principal para tipografia e espaçamentos, cria interfaces que respeitam as preferências dos utilizadores e que são muito mais fáceis de manter e adaptar. Use este conversor sempre que precisar de traduzir valores rapidamente e construa projetos web mais robustos e inclusivos.