Las unidades absolutas y el píxel de referencia

CSS tiene siete unidades absolutas y seis de ellas están definidas como fracciones fijas de la séptima. Eso significa que 1cm en una pantalla no mide un centímetro, y que la única unidad con significado físico real es la que menos lo parece. Entender de dónde sale ese anclaje explica por qué el zoom funciona, por qué un borde de un píxel se ve distinto en cada dispositivo, y por qué pt sigue existiendo.

Siete unidades y una sola definición

Todas las conversiones son exactas y fijas por especificación. No dependen de la pantalla, ni del sistema operativo, ni de la densidad. 1in son 96 píxeles CSS siempre, y punto.

Esto tiene una consecuencia que sorprende a mucha gente: en pantalla, las unidades físicas no son físicas. Si escribes width: 1cm y mides la caja con una regla sobre el monitor, casi seguro que no mide un centímetro. Solo coincide si el dispositivo tiene exactamente 96 píxeles físicos por pulgada y no hay escalado del sistema, que es una combinación cada vez más rara.

En medios paginados la historia cambia: al imprimir, el navegador conoce el tamaño real del papel y 1cm sí es un centímetro. Por eso cm, mm, pt y Q no son unidades muertas, son unidades de otro medio.

El píxel de referencia

Si in se define como 96px, la pregunta obvia es cómo se define px. Y la respuesta es lo interesante: no se define como un píxel de la pantalla.

CSS Values define el píxel de referencia como el ángulo visual que subtiende un píxel en un dispositivo de 96 puntos por pulgada mirado desde la distancia típica de lectura, que la especificación fija en unos 71 centímetros. Ese ángulo sale aproximadamente 0.0213 grados.

La elección de un ángulo en lugar de una longitud no es una excentricidad: es lo que hace que el sistema tenga sentido a través de dispositivos con distancias de uso distintas. Un teléfono se mira a 30 centímetros y una televisión a tres metros. Si el píxel CSS fuera una longitud fija, el texto de la televisión sería microscópico. Definido como ángulo, un píxel CSS es “lo mismo que se ve” en los dos casos, y cada plataforma elige el factor de escala que lo cumpla.

De ahí sale la propiedad más útil del sistema: el píxel CSS es una unidad perceptual disfrazada de unidad técnica. Todo lo demás en CSS acaba resolviéndose a píxeles CSS, así que todo el lenguaje hereda ese anclaje.

Píxeles CSS y píxeles de dispositivo

El píxel de dispositivo es el punto físico del panel. La relación entre los dos la expone devicePixelRatio, y en CSS se consulta con la característica de media resolution en unidades dppx:

@media (resolution >= 2dppx) {
  .logo { background-image: url('logo@2x.png'); }
}

Un teléfono típico va de 2 a 3.5 dppx, y con el zoom del navegador el valor cambia porque el zoom es precisamente un cambio en esa relación. Ese es el mecanismo por el que el zoom de página funciona sin que ningún CSS se entere: no se recalculan tamaños, se cambia cuántos píxeles físicos ocupa un píxel CSS.

Dos consecuencias prácticas.

Un borde de 1px no es una línea de un píxel físico. En una pantalla de 3 dppx se dibuja con tres píxeles y se ve más grueso de lo que un diseñador esperaba viniendo del papel. Si quieres una línea capilar real, la vía es condicionarla a la densidad:

.separador { border-block-end: 1px solid var(--borde); }

@media (resolution >= 2dppx) {
  .separador { border-block-end: 0.5px solid var(--borde); }
}

Los motores redondean los grosores fraccionarios de formas distintas, así que esta es de las pocas cosas que hay que comprobar en dispositivo real y no en el emulador.

Las posiciones fraccionarias existen. El layout se calcula con precisión de subpíxel y luego se rasteriza. Un elemento colocado en x = 10.5px con 2 dppx cae exactamente en un píxel físico; con 1 dppx cae entre dos y se antialiasea. De ahí salen las diferencias de nitidez entre dispositivos que no son culpa de nadie.

Cuándo una unidad absoluta es la correcta

px no es el enemigo. Hay medidas cuyo significado es “esta cantidad de pantalla” y no “esta cantidad de texto”, y para esas la unidad relativa es el error.

Sí a px: anchos de borde, radios pequeños, desplazamientos de sombra, offsets de anillo de foco, grosores de trazo en iconos, y en general cualquier cosa cuya proporción con el texto no importa y cuyo aspecto empeora al escalarse.

No a px: tamaños de fuente, alturas de línea, medidas de línea, umbrales de consulta, y cualquier caja cuyo contenido sea texto y cuya altura dependa de él.

pt y sus parientes tienen exactamente un uso legítimo en pantalla: ninguno. Aparecen en CSS heredado de documentos de imprenta y su presencia es casi siempre un síntoma de que el estilo se copió de un procesador de textos. En una hoja de impresión, en cambio, pt y mm son las unidades naturales y px es el intruso.