PX / REM / EM converter

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.

For years, pixels were the only unit that mattered in web design. When the standard screen was a 1024x768 CRT monitor, writing `font-size: 16px` meant something concrete and predictable. The iPhone in 2007 started to change that, and Apple's Retina display in 2010 completed the transformation: now there were more physical pixels than CSS pixels in the same area. The CSS pixel stopped being a physical dot on the screen and became an abstract unit — what the spec calls the reference pixel — calibrated to appear reasonably consistent across devices with different densities. Variable screen sizes, accessibility zooms, and system-level font size preferences emerged, and suddenly `px` alone was no longer sufficient to build interfaces that worked well for everyone.

The `em` unit has existed since CSS1 in 1996, but it has a behavior that catches many developers off guard: it is relative to the `font-size` of the parent element, not the document root. This means that inside a nested component, `1.2em` applied at three levels compounds to `1.2 × 1.2 × 1.2 = 1.728em` relative to the base size — a phenomenon called compound cascading that can cause typography to grow unexpectedly. The `rem` unit, introduced in CSS3 and safely supported since 2013, solves this by always being relative to the `font-size` of the `html` element. The classic trick of setting `font-size: 62.5%` on `html` comes from this: since the default size in most browsers is 16px, 62.5% of that is 10px, making `1rem` equivalent to `10px` and mental math much simpler.

The accessibility argument is where the choice between `rem` and `px` really matters. When a user goes into their operating system or browser settings and increases the default font size — common for people with low vision — layouts built with `px` completely ignore that preference. Layouts using `rem` adapt automatically. The `em` unit, on the other hand, shines when you want a component to be entirely self-contained: buttons, alerts, and cards that define internal spacing in `em` will scale proportionally if you simply change the `font-size` of the parent component, without having to adjust each property individually. The most widely adopted practical rule: use `rem` for typography and global spacing, `em` for isolated components that need to scale internally.

Durante años, el pixel fue la única unidad que importaba en el diseño web. Cuando la pantalla estándar era un monitor CRT de 1024x768, escribir `font-size: 16px` significaba algo concreto y predecible. El iPhone en 2007 empezó a cambiar eso, y la pantalla Retina de Apple en 2010 completó la transformación: ahora había más píxeles físicos que píxeles CSS en la misma área. El píxel CSS dejó de ser un punto físico en la pantalla y se convirtió en una unidad abstracta — lo que la especificación llama pixel de referencia — calibrada para parecer razonablemente consistente en dispositivos con distintas densidades. Surgieron los tamaños de pantalla variables, los zooms de accesibilidad, las preferencias de fuente del sistema operativo, y de repente `px` solo no era suficiente para construir interfaces que funcionaran bien para todos.

La unidad `em` existe desde CSS1 en 1996, pero tiene un comportamiento que sorprende a muchos: es relativa al `font-size` del elemento padre, no de la raíz del documento. Esto significa que dentro de un componente anidado, `1.2em` aplicado en tres niveles se convierte en `1.2 × 1.2 × 1.2 = 1.728em` respecto al tamaño base — un fenómeno llamado compound cascading que puede hacer crecer la tipografía de forma inesperada. La unidad `rem`, introducida en CSS3 y soportada de forma segura desde 2013, resuelve esto siendo siempre relativa al `font-size` del elemento `html`. El truco clásico de establecer `font-size: 62.5%` en `html` viene de aquí: como el tamaño predeterminado en la mayoría de los navegadores es 16px, el 62,5% de eso son 10px, haciendo que `1rem` equivalga a `10px` y simplificando mucho el cálculo mental.

El argumento de accesibilidad es donde la elección entre `rem` y `px` realmente importa. Cuando un usuario va a la configuración de su sistema operativo o navegador y aumenta el tamaño de fuente predeterminado — algo habitual en personas con baja visión — los layouts construidos con `px` ignoran completamente esa preferencia. Los layouts con `rem` se adaptan de forma automática. La unidad `em`, por su parte, brilla cuando quieres que un componente sea completamente autónomo: botones, alertas y tarjetas que definen su espaciado interno en `em` escalarán proporcionalmente si solo cambias el `font-size` del componente padre, sin necesidad de ajustar cada propiedad por separado. La regla práctica más usada: `rem` para tipografía y espaciado global, `em` para componentes aislados que necesitan escalar internamente.