Convierte entre px, rem, em, vw, vh y pt.
Los resultados tienen carácter informativo. Contrástalos con otras fuentes.
Anida 1,25em cuatro niveles y se convierte en 39px, no en 20px
em es relativo al padre, así que anidar lo multiplica. Cuatro elementos fijados cada uno en 1,25em acaban en 2,441 veces la raíz: 39,06px donde quien lo escribió casi con seguridad quería 20px. rem es relativo a la raíz y nunca se acumula, y esa es toda la diferencia práctica entre ambas unidades.
Cómo funciona
- Convierte entre px, rem, em, pt y porcentajes en la referencia CSS de 96 ppp.
- Hace explícito el efecto acumulativo de em, que es de donde vienen las sorpresas.
- Muestra en qué se convierte un valor cuando el usuario cambia el tamaño de fuente raíz, que es justo lo que hacen los ajustes de accesibilidad.
rem = px ÷ tamaño de fuente raíz (16px por defecto) em = px ÷ tamaño de fuente del padre 1pt = 96 ÷ 72 = 1,3333px así que 12pt = exactamente 16px em anidado se multiplica: 1,25em dentro de 1,25em = 1,5625 × raíz
Ejemplo resuelto
El mismo factor 1,25 aplicado como em y como rem, con cuatro niveles de anidamiento.
- nivel 1 — em: 20,00px · rem: 20px
- nivel 2 — em: 25,00px · rem: 20px
- nivel 3 — em: 31,25px · rem: 20px
- nivel 4 — em: 39,06px · rem: 20px
- 1,25⁴ = 2,4414
La cadena de em casi duplica el tamaño buscado al cuarto nivel, mientras que cada elemento en rem se queda en 20px. Ninguna unidad está rota; responden a preguntas distintas, y echar mano de em cuando querías rem es uno de los fallos de dimensionado más comunes en CSS.
Cómo leer el resultado
- El fallo clásico son las listas anidadas. Pon ul { font-size: 0,875em } y cada nivel encoge otra vez: 14,00px, luego 12,25px, luego 10,72px. Al tercer nivel el texto es un 33,0% menor que la raíz, y no el 12,5% que la regla parece anunciar.
- 12pt equivale exactamente a 16px, y es una coincidencia genuina que conviene conocer. El tamaño de fuente por defecto del navegador y el cuerpo estándar de impresión caen en el mismo valor con la referencia CSS de 96 ppp, así que pt y px coinciden en exactamente un punto útil y en ningún otro.
- rem es la opción accesible para tipografía porque sigue el ajuste raíz del usuario. Quien haya puesto su navegador en 24px ve 1,5rem representado como 36px, mientras que un 24px fijo se queda en 24px y lo ignora por completo.
- em sigue siendo la unidad correcta cuando quieres proporción respecto al texto local: por ejemplo, el relleno de un botón que debe escalar con su propia etiqueta. La regla práctica es rem para tamaños de fuente y em para espaciados que pertenecen al elemento.
Preguntas frecuentes
- ¿Debo usar rem o em?
- rem para tamaños de fuente, em para espaciados que deban escalar con el texto propio del elemento. rem nunca se acumula, así que un componente colocado tres niveles más abajo se representa igual; em se acumula a propósito, lo que resulta útil para el relleno y perjudicial para la tipografía.
- ¿Por qué encoge mi texto anidado?
- Porque em multiplica en cada nivel. Una regla de 0,875em aplicada a tres listas anidadas da 14,00px, 12,25px y después 10,72px. Cambia el font-size a rem y cada nivel se representa al mismo tamaño sea cual sea la profundidad.