CSS moderno oferece três unidades de comprimento comuns para tipografia e espaçamento – px, rem e em. É trivial convertê-los, mas escolher o caminho certo tem consequências reais para acessibilidade e manutenção. Este guia explica a matemática, as compensações e quando recorrer a cada uma delas.
Como funcionam as conversões
Cada conversão aqui é uma única divisão ou multiplicação. rem é medido em relação ao tamanho da fonte raiz (o elemento HTML), cujo padrão é 16px, então rem = px ÷ 16 e px = rem × 16. Mude a raiz e o divisor muda com ela — esta ferramenta permite definir qualquer base. em funciona da mesma maneira, mas contra o tamanho da fonte do próprio elemento (ou pai) em vez da raiz, então em = px ÷ pai. Os resultados são arredondados para quatro casas decimais e os zeros à direita são eliminados, então 24px retorna como um 1,5rem limpo em vez de 1,5000rem.
Por que rem supera px em acessibilidade
O maior motivo para preferir rem é o respeito pelas configurações do navegador do usuário. Quando alguém aumenta o tamanho da fonte padrão – comum para usuários com baixa visão – cada tamanho baseado em rem aumenta com ele. Um tamanho de fonte rígido pixels ignora totalmente essa preferência, deixando o texto preso no tamanho que você escolheu. Usar rem para tamanhos de fonte (e muitas vezes para espaçamento) é uma das vantagens de acessibilidade mais baratas disponíveis, e é por isso que a maioria dos sistemas de design expressa sua escala de tipo em rem. O padrão de 16px também é um piso sensato: ele corresponde ao padrão do navegador em torno do qual o mundo consciente das WCAG é construído.
Quando usá-los e o truque de 62,5%
Alcance em quando desejar que um valor seja dimensionado com um componente específico em vez de toda a página — preenchimento dentro de um botão que deve crescer com o texto do botão ou um ícone dimensionado em relação ao seu rótulo. O problema é a composição: aninhe elementos de tamanho grande e pilhas multiplicadoras, o que pode surpreendê-lo. Algumas equipes definem html { font-size: 62,5% } para que 1rem = 10px e a matemática mental seja mais fácil (1,6rem = 16px). Funciona, mas substitui o tamanho base do usuário para qualquer conteúdo de terceiros baseado em px e adiciona uma camada de indireção. Um conversor elimina o principal motivo pelo qual as pessoas recorrem a esse truque: você pode manter o padrão acessível de 16px e deixar a ferramenta cuidar da aritmética.