El CSS moderno le ofrece tres unidades de longitud comunes para tipografía y espaciado: px, rem y em. Es trivial convertir entre ellos, pero elegir el correcto tiene consecuencias reales para la accesibilidad y la mantenibilidad. Esta guía explica las matemáticas, las compensaciones y cuándo recurrir a cada una.
How the conversions work
Cada conversión aquí es una sola división o multiplicación. rem se mide con respecto al tamaño de fuente raíz (el elemento html), que por defecto es 16px, por lo que rem = px ÷ 16 y px = rem × 16. Cambie la raíz y el divisor cambiará con ella; esta herramienta le permite establecer cualquier base. em funciona de la misma manera pero con el tamaño de fuente propio del elemento (o principal) en lugar de la raíz, por lo que em = px ÷ parent. Los resultados se redondean a cuatro decimales y los ceros finales se eliminan, por lo que 24px vuelve como un 1.5rem limpio en lugar de 1.5000rem.
Why rem beats px for accessibility
La principal razón para preferir rem es el respeto por la configuración del navegador del usuario. Cuando alguien aumenta su tamaño de fuente predeterminado (común para usuarios con baja visión), cada tamaño basado en rem aumenta con él. Un tamaño de fuente estricto píxeles ignora esa preferencia por completo, dejando el texto atascado en el tamaño que usted eligió. Usar rem para los tamaños de fuente (y a menudo para el espaciado) es una de las ventajas de accesibilidad más baratas disponibles y es la razón por la que la mayoría de los sistemas de diseño expresan su escala de tipos en rem. El valor predeterminado de 16px también es un piso sensato: coincide con el valor predeterminado del navegador alrededor del cual se construye el mundo consciente de las WCAG.
Cuándo usarlos y el truco del 62,5%
Utilice em cuando desee que un valor se escale con un componente específico en lugar de toda la página: relleno dentro de un botón que debería crecer con el texto del botón, o un icono de tamaño relativo a su etiqueta. El problema es complicado: anida los elementos del tamaño de em y las pilas multiplicadoras, que pueden sorprenderte. Algunos equipos configuran html { font-size: 62.5% } para que 1rem = 10px y el cálculo mental sea más fácil (1.6rem = 16px). Funciona, pero anula el tamaño base del usuario para cualquier contenido de terceros basado en px y agrega una capa de indirección. Un convertidor elimina la razón principal por la que la gente recurre a ese truco: puedes mantener el valor predeterminado accesible de 16 píxeles y dejar que la herramienta se encargue de la aritmética.