Tras años aplicando estas propiedades CSS a veces sí, a veces no, esta semana me di cuenta que algunos compañeros no las conocen (o las usan con frecuencia en sus trabajos). Así que aquí va mi granito de arena al mundo del texto legible.
Sí, ya sé que los blogs no están de moda, ni los feeds, —¿verdad Erseco?—, ni leer. Pero para los vintage que leen mucho en web seguro que estas propiedades os harán más ergonómica la lectura. Muchas de ellas no están en Figma. Ups… ya dejo el discurso anti-Figma, pero no, simplemente soy pro-navegador y pro Claude.
Por qué estas propiedades mejoran la experiencia de usuario
No es perfeccionismo tipográfico. Es UX fundamental:
- Titulares equilibrados: Reducen la carga cognitiva y mejoran la jerarquía visual
- Números alineados: Facilitan la comparación y transmiten orden, especialmente importante en datos tabulares
- Texto sin huérfanas: Mejora el ritmo de lectura y reduce la fatiga visual
- Enlaces legibles: Aumentan la accesibilidad y reducen errores de clic en móvil
Un texto sin los principales arreglos se podría leer así:
Usando Balance para el titular y pretty para el párrafo de esta otra manera, bastante más equilibrado y sin letras huérfanas.
Los encabezados descompensados
Todos hemos visto este escenario: un titular que en desktop ocupa toda la línea y en móvil deja dos palabras huérfanas que destrozan la jerarquía visual.
En Figma lo arreglas manualmente. En producción, cambia con cada viewport.
text-wrap: balance
h1, h2, h3 {
text-wrap: balance;
}El navegador redistribuye las palabras para equilibrar las líneas automáticamente. En todos los viewports. Sin media queries ni JavaScript.
Disponible desde:
- Chrome 114 (Mayo 2023)
- Safari 17 (Septiembre 2023)
- Firefox (en desarrollo)
Palabras huérfanas en párrafos
Ese momento cuando un párrafo termina con una palabra suelta. O peor, cuando deja una preposición en su propia línea (similar a Balance, pero para textos largos).
text-wrap: pretty
p, .lead-text, .card-description {
text-wrap: pretty;
}Ajusta inteligentemente los saltos de línea para evitar palabras huérfanas. El cambio es sutil pero mejora notablemente la lectura.
Disponible desde:
- Chrome 117 (Septiembre 2023)
- Safari y Firefox (en desarrollo)
¿Cuáles es la diferencias entre pretty y balance?
Ambas propiedades mejoran el texto, pero tienen diferentes objetivos.
- text-wrap: balance equilibra los titulares. redistribuye las palabras entre líneas para que todas tengan longitud similar.
- text-wrap: pretty es más sutil: ajusta los saltos de línea para evitar palabras huérfanas y respeta el flujo natural del texto.
Números desalineados en tablas y precios
Un problema clásico: tienes una tabla de precios y cuando los números cambian, todo el layout tiembla:
$1,234.56
$999.99 ← todo se desplaza
$10,123.45font-variant-numeric: números tabulares
.price, .stats, table {
font-variant-numeric: tabular-nums;
}Cada dígito ocupa exactamente el mismo espacio. Los contadores no parpadean. Las tablas mantienen su alineación perfecta.
Disponible desde:
- Chrome 52 (Julio 2016)
- Firefox 34 (Diciembre 2014)
- Safari 9.1 (Marzo 2016)
Extractos cortados sin contexto
El clásico excerpt cortado por caracteres:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliq..."line-clamp
.card-excerpt {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}Corta por líneas completas, respetando las palabras y adaptándose al contenedor.
Disponible desde:
- Chrome/Safari con -webkit- (2011)
- Firefox 68 sin prefijo (Julio 2019)
- Estándar oficial CSS Overflow Module Level 3 (2020)
Enlaces que no respetan la tipografía
¿Quién no ha marcado un enlace como un inline-block; border-bottom:1px; padding-bottom: 3px para evitar los subrayados nativos del navegador (g, j, p, q, y)?
text-underline-offset
a {
text-underline-offset: 0.4rem;
}Disponible desde:
- Chrome 87 (Noviembre 2020)
- Firefox 70 (Octubre 2019)
- Safari 12.1 (Marzo 2019)
Texto justificado sin guiones
Justificar en web está mal, pero si lo haces añade separación silábica.
hyphens
/* Requiere lang="es" en el HTML */
.article-content {
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
}Aplica reglas de separación silábica del idioma correspondiente.
Disponible desde:
- Firefox 6 (Agosto 2011)
- Safari 5.1 con -webkit- (2011)
- Chrome 55 en Android (Diciembre 2016)
- Chrome 88 en desktop (Enero 2021)
Anchors ocultos bajo headers fijos
Esto me lo enseñó Sergio, hace años, cuando estábamos con la web de Liceo. Al navegar a una sección mediante anchor (#contacto), el contenido queda oculto bajo el header fijo.
scroll-padding-top
html {
scroll-padding-top: calc(var(--header-height) + 2rem);
}Ajusta automáticamente el scroll para respetar elementos fijos. Sin JavaScript.
Disponible desde:
- Chrome 69 (Septiembre 2018)
- Firefox 68 (Julio 2019)
- Safari 14.1 (Abril 2021)
Implementación mínima recomendada
Si buscas el mayor impacto con el menor esfuerzo:
/* 1. Titulares */
h1, h2, h3 { text-wrap: balance; }
/* 2. Números */
.price { font-variant-numeric: tabular-nums; }
/* 3. Enlaces */
a { text-underline-offset: 0.2em; }Tres reglas de CSS sin dependencias. Mejora inmediata en la experiencia de lectura.
Y sí, son detalles. Pero la diferencia entre una web correcta y una web que se disfruta está precisamente en cómo tratamos el contenido que más importa: el texto.