¡Practica con line-height

La propiedad CSS line-height controla el espacio entre las líneas de un texto. A menudo se fija en un valor sin unidades (por ejemplo, line-height: 1.4;) paa que sea proporcional al tamaño de letra. Es una propiedad muy importante para llevar un control tipográfico de texto. Si se opta por un valor demasiado bajo las líneas quedarán unas encima de otras; y si por el contrario se establece un valor demasiado alto el resultado será el de unas líneas de texto absurdamente separadas. Ambas opciones dificultan la legibilidad.

En este artículo vamos a centrarnos en algunos trucos basados en esta propiedad. Si eres capaz de establecer el valor exacto de line-height, ¡podrás conseguir resultados sorprendentes!

Dar a cada línea de texto un estilo de color diferente

Por desgracia no hay ::nth-line() que podamos utilizar. Tampoco nos podemos fiar de utilizar <span> s, ya que hay muchos elementos diferentes que pueden ocasionar un corte del texto en diferentes puntos.

Hay una manera, aunque no estándar, de utilizar el fondo de un elemento como el fondo del texto.

..text {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

También hay otro truco en el que se puede utilizar la propiedad linear-gradient() al fin del color de tal manera que el color no se desvanece en otro, sólo termina de repente y empieza otro. Digamos que sabemos que el line-height es 22px, podemos hacer los saltos de gradiente correctos sabiéndolo.

.text {
  background-image: linear-gradient(
    to bottom,
    #9588DD,
    #9588DD 22px,
    #DD88C8 22px,
    #DD88C8 44px,
    #D3DD88 44px,
    #D3DD88 66px,
    #88B0DD 66px,
    #88B0DD);
}

Combinando estos dos trucos:

En un navegador que no admita el fondo del texto de recorte, como Firefox, lo que se obtiene son las líneas de color detrás del texto. Quizás eso te guste, o no. En el caso de que no, puedes utilizar @supports para aplicar esta propiedad sólo en el caso de que el navegador la soporte.

También, puesto que estás utilizando el valor del line-height varias veces, sería bueno establecerla como variable.  Aquí usaremos SCSS.

$lh: 1.4em;
body {
  font-size: 1em;
  line-height: $lh;
}
 
@supports (-webkit-background-clip: text) {
  p {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(
      to bottom,
      #9588DD,
      #9588DD $lh,
      #DD88C8 $lh,
      #DD88C8 $lh*2,
      #D3DD88 $lh*2,
      #D3DD88 $lh*3,
      #88B0DD $lh*3,
      #88B0DD);
  }
}

El uso de este comportamiento en la parte superior del elemento es más sencillo. He aquí un ejemplo en el que las primeras líneas se alteran para darles énfasis.

.text {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    to bottom,
    rgba(white, 0.8),
    rgba(white, 0.8) $lh,
    rgba(white, 0.6) $lh,
    rgba(white, 0.6) $lh*2,
    rgba(white, 0.4) $lh*2,
    rgba(white, 0.4) $lh*3,
    rgba(white, 0.2) $lh*3,
    rgba(white, 0.2));
} 

Se vuelve más difícil si tratamos de modificar las últimas líneas de un texto con un número de líneas arbitrario. Afortunadamente podemos hacer esto con calc().

.text {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    to bottom,
    rgba(white, 0.8),
 
    rgba(white, 0.8) calc(100% - 66px),
    rgba(white, 0.6) calc(100% - 66px),
    rgba(white, 0.6) calc(100% - 44px),
    rgba(white, 0.4) calc(100% - 44px),
    rgba(white, 0.4) calc(100% - 22px),
    rgba(white, 0.2) calc(100% - 22px),
    rgba(white, 0.2));
  background-position: bottom center;
}

Hay otras maneras de hacer este tipo de formatos, como por ejemplo utilizando pointer-events: none;, así que no es difícil.

Líneas entre el texto

Utilizando una técnica similar a la utilizada en el ejemplo anterior, podemos crear una línea con gradiente de 1px que se repita exactamente como con  line-height. La forma más sencilla es utilizar repeating-linear-gradient(), así como asegurarse de que todos los demás elementos combinan bien (como el padding que también se basa en el line-height).

.parent {
  padding: $lh*2;
  background: #082838;
  background-image: repeating-linear-gradient(
    to bottom,
 
    rgba(white, 0)   0,
    rgba(white, 0)   $lh/1em*16px-1,
    rgba(white, 0.1) $lh/1em*16px-1,
    rgba(white, 0.1) $lh/1em*16px
  );
}

Colocar imágenes una por cada línea

Otra cosa que puedes hacer si sabes exactamente el line-height es hacer que el background-size coincida con él, por lo menos en el eje vertical. Entonces puedes hacer que se repita verticalmente y se alineará un fondo por cada línea.

.text
  background-image: url(image.svg);
  background-size: $lh $lh;
  background-repeat: repeat-y;
  padding-left: $lh*2;
}