Conversor PX, REM e EM

Como usar Conversor PX, REM e EM

Durante anos, o pixel foi a única unidade que importava no design para web. Quando a tela padrão era um monitor CRT de 1024x768, falar em `font-size: 16px` era falar em algo concreto e previsível. O iPhone em 2007 começou a mudar isso, e o display Retina da Apple em 2010 consolidou a transformação: agora havia mais pixels físicos do que pixels CSS numa mesma área. O CSS pixel deixou de ser um ponto físico na tela e se tornou uma unidade abstrata — o que a especificação chama de pixel de referência — calibrada para parecer razoavelmente consistente em dispositivos com densidades diferentes. Surgiram os screen sizes variados, os zooms de acessibilidade, as preferências de fonte do sistema operacional, e de repente `px` sozinho não era mais suficiente para construir interfaces que funcionassem bem para todo mundo.

O `em` existe desde o CSS1 em 1996, mas tem um comportamento que pega muita gente de surpresa: ele é relativo ao `font-size` do elemento pai, não da raiz do documento. Isso significa que dentro de um componente aninhado, `1.2em` aplicado em três níveis resulta em `1.2 × 1.2 × 1.2 = 1.728em` em relação ao tamanho base — um fenômeno chamado compound cascading que pode fazer a tipografia crescer de forma inesperada. O `rem`, introduzido no CSS3 e suportado com segurança desde 2013, resolve isso sendo sempre relativo ao `font-size` do elemento `html`. O truque antigo de setar `font-size: 62.5%` no `html` vem daí: como o tamanho padrão da maioria dos browsers é 16px, 62.5% disso dá 10px, e `1rem` passa a equivaler a `10px`, tornando os cálculos mentais muito mais simples.

A questão de acessibilidade é onde a escolha entre `rem` e `px` realmente importa. Quando um usuário vai nas configurações do sistema operacional ou do navegador e aumenta o tamanho padrão de fonte — algo comum para pessoas com baixa visão — layouts construídos com `px` ignoram completamente essa preferência. Layouts com `rem` se adaptam automaticamente. O `em`, por sua vez, brilha quando você quer que um componente seja completamente auto-suficiente: botões, alertas e cards que definem espaçamentos internos em `em` vão se dimensionar proporcionalmente se você apenas mudar o `font-size` do componente pai, sem precisar ajustar cada propriedade individualmente. A regra prática mais usada: `rem` para tipografia e espaçamentos globais, `em` para componentes isolados que precisam escalar internamente.