Death to px: por qué ‘ch’ da los 66 caracteres ideales

Por qué el píxel en CSS es una "doble mentira"

Edent, autor del blog shkspr.mobi, abre su último post con una afirmación incómoda: "los píxeles son una mentira". La razón es técnica y rara vez se discute en los equipos de producto. La documentación de MDN, citada por el propio Edent, lo explica sin rodeos: "1px no equivale necesariamente a un píxel físico del dispositivo. En pantallas HD puede abarcar varios píxeles físicos".

El px de CSS es, en realidad, una unidad perceptual. La especificación busca que 16px se vea "aproximadamente igual" en un móvil, un portátil o un televisor a la distancia de visión típica. Eso ya convierte cualquier layout basado en píxeles en una apuesta por una densidad uniforme de pantalla que no existe.

Qué es la unidad `ch` (y `ex`) en la práctica

La unidad ch representa el ancho del carácter "0" en la fuente actual del elemento. Eric Meyer lleva años explicando que no es exactamente un carácter — depende de las métricas de la tipografía — pero es lo bastante cercano como para servir de referencia.

👥 ¿Quieres ir más allá de la noticia?

En nuestra comunidad discutimos las tendencias, compartimos oportunidades y nos ayudamos entre emprendedores. Sin humo, solo acción.

👥 Unirme a la comunidad

Edent propone reemplazar píxeles por ch en el ancho del contenido principal:

--width-content: min(75ch, 100%);
main {
   max-width: var(--width-content);
}

El resultado: el ancho del texto se mide en función de los caracteres que contiene, no del dispositivo en que se renderiza. Padding y márgenes también pueden expresarse en ch para que el espacio respire en proporción al texto, no a la pantalla.

Para distancias verticales existe ex, que representa la altura típica de una letra minúscula. Útil cuando quieres que el aire vertical escale con el tipo, no con la densidad del monitor.

El propio Edent aclara que está experimentando, no evangelizando: no ha convertido cada referencia de px a ch, solo ha sustituido las que afectan a la legibilidad.

La regla de los 66 caracteres: lo que dice la investigación

¿Por qué importa este cambio? Porque hay un consenso robusto sobre el ancho de línea ideal para lectura cómoda en pantalla, y ch lo implementa de forma nativa.

Robert Bringhurst recomienda entre 45 y 75 caracteres por línea (CPL) en The Elements of Typographic Style.
WCAG 2.2, criterio 1.4.8, fija un máximo de 80 CPL para idiomas no CJK y 40 para chino, japonés y coreano.
Estudios de seguimiento ocular recogidos por UXPin sitúan las líneas de ~55 CPL como el punto que equilibra velocidad y comprensión.
Lectores adultos en inglés leen en promedio 238 palabras por minuto en no ficción; líneas mal dimensionadas reducen esa velocidad.

El max-width: 66ch que aplican sitios como el blog de Edent no es arbitrario: cae en el centro del rango que la investigación considera óptimo. La ventaja real de ch es que se adapta a la fuente que elijas: si cambias a una tipografía más ancha o más condensada, el ancho del texto se recalcula solo.

Container queries: control a nivel de componente

Hasta hace poco, esta lógica solo funcionaba al nivel del viewport. Desde 2023 hay una herramienta complementaria: container queries, que aplican estilos según el tamaño del contenedor padre, no de la ventana.

Según la guía de Josh Comeau, el soporte llegó a todos los navegadores principales entre agosto de 2022 y febrero de 2023: Safari 16, Chrome/Edge 105 y Firefox 110. Combinadas con ch, abren un control fino: un mismo componente de texto puede ajustar su medida dentro de un sidebar, un modal o una página completa sin tocar el CSS global.

Para SaaS con sistema de diseño esto cambia el cálculo. El "ancho legible" ya no depende de dónde cae el componente en el layout, sino del propio componente. Un bloque de documentación, una card de pricing, un email transaccional — todos pueden compartir la misma regla de tipografía sin hacks de CSS.

Las style queries documentadas por el equipo de Chrome llevan esta idea más lejos: permiten condicionar estilos a valores de custom properties, separando datos y presentación dentro del mismo sistema.

Qué significa esto para tu startup

Si tu producto vive en la web — landing, dashboard, documentación, blog — la tipografía es una palanca de retención que pocos equipos optimizan. Tres acciones concretas que puedes aplicar esta semana:

Audita tu max-width hoy mismo. Abre DevTools, mide el ancho del contenedor principal de tus textos largos. Si supera 80ch en desktop, estás fuera del rango recomendado por WCAG. Cambiar max-width: 1100px por max-width: 66ch es un diff de una línea y suele mejorar el dwell time de páginas largas.
Adopta ch para anchos de lectura y deja px para lo que no escala con la fuente. Bordes, sombras, radios y separaciones fijas siguen funcionando bien en píxeles. Lo que debe escalar con el texto va en ch o ex. Mezclar unidades no es un error, es una decisión.
Mide tiempo en página antes y después. Si tu producto tiene bloques largos de texto — docs, artículos, planes de pricing detallados — un ajuste de tipografía suele reflejarse en métricas de engagement en pocas semanas. Mide scroll depth y dwell time para validar el impacto.