Converta rem em píxeis com qualquer base

O rem passa a píxeis com uma única multiplicação: o valor em rem vezes o tamanho de letra base. Com a predefinição do navegador essa base vale 16 px, pelo que 1rem dá 16 píxeis e 1,5rem dá 24. A unidade refere-se ao tamanho de texto do elemento html, a raiz do documento, daí o nome root em [1].

A conversão serve assim que trabalha a partir de uma maqueta. O designer entrega medidas em píxeis, a folha de estilos guarda-as em rem e falta-lhe um número para confirmar se um título de 1,875rem tem mesmo os 30 píxeis do projeto.

A base pode assumir outro valor além de 16 px. A técnica dos 62,5% fixa-a em 10 px e quem lê pode aumentá-la nas definições do navegador, por isso o campo aceita qualquer valor de 1 a 100.

Mais abaixo encontra uma tabela com 26 valores em três bases, a escala completa de tamanhos do Tailwind CSS e a explicação do estatuto do número 16. O caminho inverso cabe ao conversor de píxeis para rem.

A fórmula tem uma só operação: píxeis = rem × tamanho de letra base. O tamanho de letra base é o que o elemento html traz, e se ninguém o alterou o navegador usa 16 px.

Exemplo com um espaçamento de 1,25rem: com base de 16 px sai 1,25 × 16 = 20 píxeis. Esse mesmo valor com base de 10 px dá 12,5 píxeis, e em quem definiu 20 px no navegador sobe para 25.

A técnica dos 62,5% consiste em escrever html { font-size: 62.5% }, o que deixa a base em 10 px, porque 62,5% de 16 é exatamente 10. O cálculo passa a fazer-se de cabeça: 2,4rem são 24 píxeis. Traz uma condição: o texto do body precisa de voltar a um tamanho legível, normalmente 1.6rem, caso contrário a página inteira fica composta em corpo dez.

A unidade em calcula-se da mesma forma, com a diferença de se referir ao elemento pai em vez da raiz do documento: esse cálculo cabe ao conversor de em para píxeis. Esses mesmos 16 píxeis valem 12 pontos tipográficos na composição, do que trata o conversor de pontos para píxeis.

O número 16 vem do navegador e não da especificação CSS. É o tamanho de texto que um navegador atribui por defeito a um documento, e quem lê altera-o nas definições do seu programa. Quem vê pior coloca ali 20 ou 24 px e espera que a página o acompanhe.

É aqui que assenta toda a diferença entre o rem e o píxel. Um elemento escrito font-size: 24px mantém-se com 24 píxeis de altura, seja qual for a escolha de quem lê. O mesmo elemento escrito 1.5rem cresce com a base: a 20 px dá 30 píxeis e a 24 px dá 36.

O critério WCAG 1.4.4 exige que o texto possa ser ampliado até 200% sem perda de conteúdo nem de funcionalidade [2]. Um layout assente em rem cumpre-o sozinho, porque escala junto com a definição de quem lê.

Em Portugal esse critério tem força de lei. O Decreto-Lei n.º 83/2018 transpõe a diretiva (UE) 2016/2102 e obriga os sítios web e as aplicações móveis dos organismos públicos a cumprir a norma EN 301 549, ou seja, as WCAG 2.1 de nível AA, e ainda a publicar uma declaração de acessibilidade [3]. No Brasil, o artigo 63 da Lei 13.146/2015 estende a obrigação aos sítios de empresas com sede ou representação comercial no país, embora continue por publicar a regulamentação técnica própria, pelo que as WCAG servem de referência na prática [4].

Daí a divisão prática: tamanhos de texto, espaçamentos e larguras de coluna em rem, e o píxel onde uma medida deva ficar fixa independentemente do texto, como contornos, sombras e filetes.