Adiós al píxel, bienvenido el carácter: repensar las unidades de medida en CSS

Fuentes: Death to px, long live ch!

El píxel es una mentira doble, y este artículo lo explica con claridad: en CSS, 1px no equivale necesariamente a un píxel físico del dispositivo. En pantallas de alta densidad puede abarcar varios píxeles reales, y 1cm acostumbra a no corresponderse con una centésima del metro del Sistema Internacional. Las longitudes en CSS son perceptivas: 16px se ven parejos en un móvil, un portátil o un televisor a la distancia de lectura habitual.

Partiendo de esa base, el autor propone sustituir el píxel por unidades relativas al texto en su blog, cuyo contenido es eminentemente textual. Para fijar el ancho máximo de la columna principal usa la unidad ch, que mide aproximadamente la anchura del carácter '0' y resulta un proxy razonable del tamaño real de los caracteres. La regla concreta es width: min(75ch, 100%), de modo que la línea nunca supere las 75 anchuras de carácter ni el ancho completo del viewport. Márgenes y rellanos interiores siguen la misma lógica: se expresan también en ch para mantener proporciones coherentes con el texto.

Para la altura, donde medir en anchura de carácter no tiene tanto sentido, se baraja la unidad ex, basada en la altura típica de una letra minúscula. El autor advierte, no obstante, que la cruzada tiene límites: reconoce que ha sustituido px por ch de forma experimental, sin convertir todas las referencias, y que no hay nada malo en usar píxeles. La unidad solo encaja con la orientación del sitio, que prioriza la legibilidad por encima del píxel perfecto.