Line Height, Letter Spacing y Text Alignment

La tipografía en diseño web va más allá de elegir la fuente adecuada y su tamaño. El espaciado entre líneas, entre letras y la alineación del texto son aspectos cruciales que afectan significativamente la legibilidad y la estética de tu contenido. En este artículo, exploraremos en detalle estas tres propiedades CSS fundamentales para el control tipográfico.

Line Height (Altura de línea)

La propiedad line-height controla la altura de cada línea de texto, es decir, el espacio vertical entre líneas. Es uno de los factores más importantes para la legibilidad del texto.

Sintaxis y valores

p {
  line-height: 1.5;
}

La propiedad line-height puede tomar varios tipos de valores:

Número (sin unidad)

p {
  line-height: 1.5; /* 1.5 veces el tamaño de fuente */
}

Este es el método recomendado, ya que el valor se hereda como un multiplicador del tamaño de fuente, no como un valor absoluto.

Longitud

p {
  line-height: 24px;
}

Especifica una altura de línea fija, independientemente del tamaño de fuente.

Porcentaje

p {
  line-height: 150%; /* 150% del tamaño de fuente */
}

Similar al valor numérico, pero se hereda como un valor calculado, no como un multiplicador.

Palabras clave

p {
  line-height: normal; /* Depende del navegador, generalmente entre 1.0 y 1.2 */
}

Cómo afecta al texto

La propiedad line-height determina el espacio entre las líneas base del texto:

┌─────────────────────────────┐
│ Línea de texto              │ ↑
├─────────────────────────────┤ │ line-height
│ Espacio entre líneas        │ │
├─────────────────────────────┤ ↓
│ Siguiente línea de texto    │
└─────────────────────────────┘

Valores recomendados según el contexto

• Texto de párrafo: 1.5 - 1.6
• Encabezados: 1.2 - 1.3
• Texto pequeño: 1.4 - 1.5
• Texto grande: 1.1 - 1.2

Ejemplos prácticos

Párrafo con buena legibilidad

p {
  font-size: 16px;
  line-height: 1.6;
}

Encabezados con espaciado ajustado

h1 {
  font-size: 2.5rem;
  line-height: 1.2;
}

h2 {
  font-size: 2rem;
  line-height: 1.3;
}

Texto en tarjetas

.card-text {
  font-size: 0.875rem;
  line-height: 1.5;
}

Line height y altura de caja

Es importante entender que line-height afecta la altura total de la caja que contiene el texto:

.example {
  line-height: 1.5;
  background-color: #f0f0f0;
  /* La altura del fondo será afectada por line-height */
}

Letter Spacing (Espaciado entre letras)

La propiedad letter-spacing controla el espacio horizontal entre caracteres en un texto. También conocido como "tracking" en diseño gráfico.

Sintaxis y valores

h1 {
  letter-spacing: 0.05em;
}

La propiedad letter-spacing acepta los siguientes valores:

Longitud

h1 {
  letter-spacing: 2px; /* Espacio fijo entre caracteres */
}

.tight {
  letter-spacing: -0.5px; /* Valores negativos reducen el espacio */
}

Normal

p {
  letter-spacing: normal; /* Valor predeterminado */
}

Cuándo y cómo utilizarlo

El espaciado entre letras puede mejorar significativamente la legibilidad y el impacto visual del texto:

Texto en mayúsculas

.uppercase-text {
  text-transform: uppercase;
  letter-spacing: 0.05em; /* Mejora la legibilidad del texto en mayúsculas */
}

Encabezados grandes

h1 {
  font-size: 3rem;
  letter-spacing: -0.02em; /* Espaciado negativo para títulos grandes */
}

Texto pequeño

.small-text {
  font-size: 0.75rem;
  letter-spacing: 0.02em; /* Mejora la legibilidad del texto pequeño */
}

Ejemplos prácticos

Logotipo o marca

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

Botones

.button {
  text-transform: uppercase;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

Citas

blockquote {
  font-style: italic;
  letter-spacing: 0.01em;
}

Text Alignment (Alineación de texto)

La propiedad text-align controla la alineación horizontal del texto dentro de su contenedor.

Sintaxis y valores

p {
  text-align: left;
}

La propiedad text-align acepta los siguientes valores:

left

p {
  text-align: left; /* Alinea el texto a la izquierda (predeterminado en LTR) */
}

right

.date {
  text-align: right; /* Alinea el texto a la derecha */
}

center

h1 {
  text-align: center; /* Centra el texto horizontalmente */
}

justify

.article p {
  text-align: justify; /* Distribuye el texto para alinear ambos márgenes */
}

start y end

p {
  text-align: start; /* Alinea al inicio según la dirección del texto (izquierda en LTR, derecha en RTL) */
}

.footer {
  text-align: end; /* Alinea al final según la dirección del texto */
}

Cuándo usar cada alineación

Cada tipo de alineación tiene sus casos de uso específicos:

• left: Ideal para la mayoría del texto en idiomas LTR (izquierda a derecha). Mejora la legibilidad al proporcionar un punto de inicio consistente para cada línea.
• right: Útil para elementos secundarios como fechas, precios o información complementaria.
• center: Efectivo para títulos, encabezados, citas destacadas y texto corto con énfasis.
• justify: Puede funcionar bien para columnas de texto largas, como artículos o libros, pero debe usarse con precaución.

Problemas con text-justify

La alineación justificada puede crear "ríos" de espacio blanco y espaciado irregular entre palabras, especialmente en columnas estrechas:

/* Mejor para texto justificado */
.justified-text {
  text-align: justify;
  hyphens: auto; /* Permite la separación de palabras */
  word-spacing: -0.05em; /* Ajusta ligeramente el espaciado entre palabras */
}

Ejemplos prácticos

Artículo de blog

.article h1 {
  text-align: center;
  margin-bottom: 1.5rem;
}

.article .meta {
  text-align: center;
  font-size: 0.875rem;
  color: #666;
}

.article p {
  text-align: left; /* Mejor para legibilidad en pantalla */
  margin-bottom: 1rem;
}

.article blockquote {
  text-align: center;
  font-size: 1.25rem;
  font-style: italic;
  margin: 2rem 0;
}

Tarjeta de producto

.product-card {
  text-align: center; /* Centra todo el contenido por defecto */
}

.product-card .description {
  text-align: left; /* La descripción se alinea a la izquierda para mejor legibilidad */
}

.product-card .price {
  text-align: right;
  font-weight: bold;
}

Combinando las propiedades

Estas propiedades a menudo se utilizan juntas para crear estilos tipográficos efectivos y coherentes:

Sistema tipográfico completo

:root {
  /* Variables para espaciado de texto */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
}

/* Estilos base */
body {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  text-align: left;
}

/* Encabezados */
h1, h2, h3, h4, h5, h6 {
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

h1 {
  font-size: 2.5rem;
  text-align: center;
}

/* Párrafos */
p {
  margin-bottom: 1.5rem;
}

/* Texto destacado */
.lead {
  font-size: 1.25rem;
  line-height: var(--line-height-relaxed);
  letter-spacing: var(--letter-spacing-normal);
}

/* Botones y llamadas a la acción */
.button {
  text-transform: uppercase;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: var(--letter-spacing-wider);
  text-align: center;
}

/* Citas */
blockquote {
  font-style: italic;
  line-height: var(--line-height-relaxed);
  letter-spacing: 0.01em;
  text-align: center;
  padding: 1rem 2rem;
}

/* Texto pequeño */
small, .text-small {
  font-size: 0.875rem;
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-wide);
}

Ejemplos avanzados

Texto con efecto de espaciado dramático

.dramatic-title {
  font-size: 3rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  line-height: 1.2;
  text-align: center;
}

Texto con ajuste responsivo

.responsive-text {
  text-align: left;
  line-height: clamp(1.3, 1.2 + 0.2vw, 1.5);
  letter-spacing: clamp(0em, -0.02em + 0.05vw, 0.02em);
}

@media (min-width: 768px) {
  .responsive-text {
    text-align: justify;
    hyphens: auto;
  }
}

Texto con estilo de revista

.magazine-heading {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-align: left;
  margin-bottom: 0.5em;
}

.magazine-subheading {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-align: left;
  color: #666;
  margin-bottom: 2em;
}

.magazine-text {
  font-family: 'Merriweather', serif;
  font-size: 1.05rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
  text-align: justify;
  hyphens: auto;
}

.magazine-text::first-letter {
  font-size: 3.5em;
  line-height: 0.8;
  float: left;
  padding-right: 0.1em;
}

Mejores prácticas

Para line-height

1. Usa valores sin unidad: Prefiere valores numéricos sin unidad para line-height para que se hereden como multiplicadores.
2. Ajusta según el tamaño de fuente: Textos más grandes generalmente necesitan un line-height más pequeño, mientras que textos pequeños necesitan un line-height mayor.
3. Considera el ancho de línea: Las líneas más largas (con más caracteres) se benefician de un line-height mayor.

Para letter-spacing

1. Sutileza: Los cambios en letter-spacing deben ser sutiles; incluso pequeños ajustes pueden tener un gran impacto.
2. Mayúsculas: El texto en mayúsculas casi siempre se beneficia de un letter-spacing positivo.
3. Títulos grandes: Los títulos grandes a menudo se ven mejor con un letter-spacing ligeramente negativo.

Para text-align

1. Prioriza la legibilidad: La alineación a la izquierda suele ser la más legible para bloques de texto en idiomas LTR.
2. Evita justificar en columnas estrechas: La justificación puede crear espacios irregulares, especialmente en dispositivos móviles.
3. Consistencia: Mantén un sistema coherente de alineación en todo tu sitio.

Consideraciones de accesibilidad

1. Line-height adecuado: Un line-height de al menos 1.5 para el texto principal mejora la legibilidad para todos, especialmente para personas con dificultades de lectura.
2. Evita espaciado extremo: Un letter-spacing demasiado amplio o demasiado estrecho puede dificultar la lectura para personas con discapacidades visuales o cognitivas.
3. Alineación: Para bloques de texto largos, la alineación a la izquierda (o a la derecha para idiomas RTL) es generalmente más accesible que el texto justificado o centrado.

Conclusión

El control preciso del espaciado entre líneas, entre letras y la alineación del texto es fundamental para crear diseños web legibles, accesibles y estéticamente agradables. Estas propiedades, cuando se utilizan correctamente, pueden mejorar significativamente la experiencia del usuario y reforzar la jerarquía visual y la identidad de marca.

Recuerda que el objetivo principal de la tipografía web es la comunicación efectiva. Las decisiones de diseño deben priorizar la legibilidad y la accesibilidad, utilizando estas propiedades para mejorar, no obstaculizar, la comprensión del contenido por parte del usuario.