Espaciado y alineación

Con las propiedades font-* ya controlás qué fuente usar y cómo se ve. Ahora el foco es cómo el texto ocupa el espacio: el espacio entre líneas, entre letras y dónde se alinea dentro del contenedor.

line-height — el interlineado

line-height controla el espacio entre líneas de texto.

p {
  font-size: 1rem;   /* 16px */
  line-height: 1.6;  /* SIN unidad — buena práctica */
}

Por qué SIN unidad — la herencia correcta:

/* ✓ Sin unidad — el factor se hereda, cada hijo lo aplica a su font-size */
.contenedor {
  font-size: 1rem;
  line-height: 1.5;
}
.contenedor h2 {
  font-size: 2rem;
  /* hereda 1.5 → 1.5 × 32px = 48px — proporcionado */
}

/* ✗ Con em — el px calculado se hereda, no el factor */
.contenedor {
  font-size: 1rem;
  line-height: 1.5em;  /* computa a 24px en el contenedor */
}
.contenedor h2 {
  font-size: 2rem;
  /* hereda 24px — demasiado chico para 32px de fuente */
}

El valor sin unidad es el que se hereda en cascada; cada descendiente lo multiplica por su propio font-size. Con em o px, se hereda el valor ya computado, sin adaptarse.

Valores recomendados para lectura: 1.4–1.6 para texto de cuerpo.

Nota sobre el motor: getComputedStyle retorna line-height en px, no el factor. line-height: 1.6 en un elemento con font-size: 16px → computed "25.6px". El validador compara ese valor en px, por eso el check dice "25.6px" y no "1.6".

letter-spacing y word-spacing

h1 { letter-spacing: 0.05em; }  /* espacio entre letras */
p  { word-spacing: 0.1em; }     /* espacio entre palabras */

letter-spacing: añade (o resta, si es negativo) espacio entre cada carácter. 0 = sin ajuste.
word-spacing: añade espacio extra entre palabras.

Cuándo usarlos:

letter-spacing positivo (suave): encabezados en mayúsculas, textos decorativos.
word-spacing: poco uso en diseño moderno; se prefiere Flexbox/Grid para separar elementos.

El computed value siempre es en px. letter-spacing: 3px → "3px".

text-align — alineación horizontal

text-align controla la alineación del texto dentro de su contenedor de bloque.

.titulo  { text-align: center;  }
.parrafo { text-align: justify; }
.nota    { text-align: right;   }

left — a la izquierda (por defecto en español)
right — a la derecha
center — centrado
justify — justificado (el espacio entre palabras se extiende para completar el ancho; la última línea no se justifica)

Solo aplica a elementos de bloque. En elementos inline, no tiene efecto.

Tu turno: en el sandbox, aplicá las propiedades al .subtitulo y al .cuerpo. Recordá usar 1.6 sin unidad para line-height.