En el mundo del frontend, la tipografía es tan importante como la funcionalidad. Tres propiedades CSS que influyen directamente en la legibilidad y la estética son letter-spacing, line-height y text-align. En este artículo descubrirás:

• Qué hace cada propiedad y cuándo usarla.
• Ejemplos de código listos para copiar.
• Comparativas visuales en una tabla de dos columnas.
• Consejos de accesibilidad, rendimiento y SEO.
• Solución de problemas comunes y trucos de optimización.

Comparativa rápida

p { letter-spacing: 0.05em; }

p { line-height: 1.6; }

p { text-align: justify; }

letter‑spacing

Esta propiedad acepta valores en em, px o rem. Un valor positivo aumenta el espacio, mientras que un valor negativo lo reduce.

Ejemplo práctico

/* Sin espacio */
p { letter-spacing: 0; }
/* Espaciado amplio */
p.wide { letter-spacing: 0.1em; }
/* Espaciado comprimido */
p.tight { letter-spacing: -0.02em; }

Buenas prácticas:

• Usa em para que el espaciado escale con el tamaño de fuente.
• No exageres; un exceso de espacio puede romper la lectura en dispositivos móviles.
• Aplica letter-spacing principalmente a títulos, logotipos o bloques de texto en mayúsculas.

line‑height

Controla la altura de la caja de cada línea de texto. Se puede expresar como número sin unidad (factor de la fuente), porcentaje, px o rem.

Ejemplo práctico con diferentes unidades

/* Factor (recomendado) */
p { line-height: 1.6; }
/* Valor absoluto */
p { line-height: 24px; }
/* Porcentaje */
p { line-height: 150%; }

Tips de accesibilidad:

• Un line-height entre 1.4 y 1.8 mejora la legibilidad para usuarios con dislexia.
• No fijes la altura de línea en px si el texto es responsivo; usa un factor relativo.
• Combina line-height con font-size modular (ej. clamp()) para diseños fluidos.

text‑align

Define la alineación horizontal del contenido de bloque. Los valores más comunes son left, right, center y justify. En diseños multilingües se combina con text-align: start/end para soportar escritura de derecha a izquierda.

Ejemplo visual

p.left   { text-align: left; }
p.center { text-align: center; }
p.right  { text-align: right; }
p.justify{ text-align: justify; }

Consideraciones de SEO y usabilidad:

• Evita justify en bloques de texto corto; genera espacios irregulares que pueden dificultar la lectura.
• Para contenido multilingüe, usa text-align: start; y text-align: end; para que el navegador respete la dirección del idioma.
• Los encabezados suelen centrarse (h1, h2) para mejorar la jerarquía visual.

Cómo combinar estas propiedades con Bootstrap 5

Bootstrap ya incluye clases utilitarias que facilitan su uso sin escribir CSS adicional:

• .text-start, .text-center, .text-end → text-align
• .lh-1, .lh-sm, .lh-base, .lh-lg → valores predefinidos de line-height
• Para letter-spacing no hay utilidad nativa, pero puedes crear una clase personalizada y reutilizarla con la convención .ls-*.

/* Clase personalizada para letter‑spacing */
.ls-1 { letter-spacing: 0.05em; }
.ls-2 { letter-spacing: 0.1em; }
.ls-n { letter-spacing: -0.02em; }

Ejemplo de uso en un card de Bootstrap:

<div class="card p-4">
  <h5 class="card-title text-center ls-2">Título destacado</h5>
  <p class="card-text lh-lg text-justify">Lorem ipsum dolor sit amet, consectetur…</p>
</div>

Rendimiento, accesibilidad y buenas prácticas

Minimiza repintados

Cambiar letter-spacing o line-height en tiempo de ejecución (por ejemplo, mediante JavaScript) provoca repintados del texto, lo que puede afectar la velocidad en dispositivos móviles. Usa classList.toggle() con clases predefinidas para limitar el impacto.

Variables CSS y clamp()

:root {
  --base-fs: clamp(1rem, 2.5vw, 1.5rem);
  --base-lh: 1.6;
  --base-ls: 0.02em;
}
p {
  font-size: var(--base-fs);
  line-height: var(--base-lh);
  letter-spacing: var(--base-ls);
}

Con clamp() garantizas que la tipografía sea responsiva sin media queries adicionales.

Auditoría con Lighthouse

En la pestaña "Accessibility" de Chrome Lighthouse verifica los "Contrast Ratio" y la "Text Spacing". Un line-height bajo o un letter-spacing negativo pueden marcar advertencias.

FAQ y troubleshooting

¿Por qué mi letter-spacing no se ve en Safari?

Safari necesita que el elemento tenga display: inline-block o block cuando se aplica a inline sin envolver. Añade display: inline-block; a la regla.

El texto justificado crea espacios muy grandes.

Reduce el ancho del contenedor o usa hyphens: auto; para habilitar la separación de palabras y evitar huecos.

Mi line-height parece ignorado en h1.

Los encabezados a menudo tienen valores de margin que crean la ilusión de un line‑height diferente. Ajusta margin-top/bottom o usa display: inline-block; para observar el efecto real.

Conclusión

Dominar letter-spacing, line-height y text-align permite crear interfaces más legibles, accesibles y estéticamente consistentes. Integra estas propiedades con las utilidades de Bootstrap, usa variables CSS para mantener la consistencia y revisa siempre con herramientas de auditoría para garantizar una experiencia óptima en todos los dispositivos.