Píxeles, rem, em, puntos y milímetros

Unidades CSS, lado a lado

El diseño web mezcla varias unidades, y pasar de una a otra es una tarea constante: un diseño te da los tamaños en píxeles, la hoja de estilos usa rem, una hoja de estilos de impresión quiere puntos o milímetros y alguien pregunta cuánto mide algo en centímetros. Este conversor muestra cualquier valor en todas ellas a la vez, de modo que no tienes que calcular la conversión cada vez.

Qué es cada unidad

• px es el píxel CSS, una unidad de referencia que no es lo mismo que un punto físico de la pantalla. Por definición, 96 píxeles CSS hacen una pulgada.
• rem es relativo al tamaño de fuente raíz, el fijado en el elemento html. Con el valor por defecto del navegador de 16 px, 1 rem son 16 px, así que 24 px son 1,5 rem.
• em es relativo al tamaño de fuente del elemento donde se usa, o de su padre. Cuando el padre usa el tamaño raíz, em y rem dan lo mismo; dentro de elementos anidados con tamaños distintos difieren, y por eso em se acumula.
• pt es el punto, 1/72 de pulgada, habitual en imprenta y procesadores de texto. 12 pt son 16 px.
• pc es la pica, 12 puntos o 16 px. mm, cm e in son longitudes físicas, fijadas en CSS a 96 píxeles por pulgada.

Por qué merece la pena usar rem

Dimensionar el texto y los espacios en rem permite que tu maquetación siga el ajuste de tamaño de letra del propio lector. Quien ha aumentado el tamaño de texto por defecto en su navegador obtiene una página proporcionalmente mayor, mientras que los tamaños fijados en píxeles ignoran esa preferencia. Es un beneficio real de accesibilidad. El campo del tamaño raíz te permite convertir para hojas de estilos que cambian la base, como una raíz del 62,5 % que hace que 1 rem valga 10 px.

Impresión y pantalla

Las conversiones a puntos, milímetros y pulgadas siguen la definición de CSS, en la que una pulgada son 96 píxeles. En una pantalla real, el tamaño físico de un píxel varía con el dispositivo, así que una línea de 96 píxeles no siempre mide exactamente una pulgada en pantalla. En los estilos de impresión la conversión es exacta, que es donde más útiles son estas unidades.

Lo que no hace

No convierte unidades de ventana (vw, vh) ni porcentajes, que dependen del tamaño de la ventana o del elemento padre, y no conoce la densidad de píxeles del dispositivo. Para hallar la forma de una imagen o una pantalla, usa la calculadora de proporción de aspecto.