La fórmula
rem = píxeles ÷ tamaño de fuente de la raíz
De dónde sale
El rem es relativo al tamaño de fuente del elemento raíz, que por defecto son 16 píxeles en todos los navegadores: 24 px son 1,5 rem. Usarlo en vez de píxeles importa por una razón concreta y no estética: cuando alguien sube el tamaño de letra en las preferencias del navegador —porque ve mal, no por capricho—, lo que cambia es esa raíz, y un diseño hecho en píxeles ignora esa preferencia por completo.
Cómo calcularlo a mano
- Mira el tamaño de fuente de la raíz; por defecto son 16 px
- Divide el tamaño en píxeles entre esa raíz
- El resultado son los rem
- Para la escala, multiplica por la razón en cada nivel
Lo que conviene saber
La escala modular toma sus nombres de los intervalos musicales, y no es una coincidencia bonita: son las mismas razones. Una tercera mayor es 1,25, una quinta justa 1,5 y el número áureo 1,618. Cuanto mayor es la razón, más contraste hay entre el cuerpo de texto y los títulos: 1,125 da una jerarquía sutil que funciona en interfaces densas, y 1,5 da una muy marcada, más propia de una portada. Un aviso sobre el em, que se confunde con el rem: el em es relativo a su elemento padre y por tanto se acumula al anidar, así que dos niveles de listas con 0,9 em dan 0,81. El rem siempre mira a la raíz y no tiene ese problema.