Compatibilidad: consulta las fichas de soporte enlazadas en cada apartado y prueba los navegadores de tu proyecto. Estas mejoras deben conservar una lectura correcta cuando una propiedad no esté disponible; especialmente, no des por equivalente el soporte de line-clamp y el de su variante prefijada.
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.
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.
¿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.
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.
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;
}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.
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.
Estas propiedades necesitan una jerarquía que tenga sentido. También conviene revisar la jerarquía tipográfica en interfaces generadas con IA: equilibrar un titular no arregla una pantalla en la que todo intenta llamar la atención.
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.
0 comentarios