Cómo controlar la altura de la línea en CSS

En CSS, line-heightes probablemente uno de los atributos más incomprendidos pero más utilizados. Como diseñadores y desarrolladores, cuando pensamos en line-height, podríamos pensar en el concepto de liderazgo desde el diseño de impresión, un término, curiosamente, que proviene literalmente de colocar trozos de plomo entre líneas de tipografía.

Los principales y line-height, por muy similares que sean, tienen algunas diferencias importantes. Para comprender esas diferencias, primero debemos comprender un poco más sobre la tipografía.

Una descripción general de los términos tipográficos.

En el diseño tipográfico occidental tradicional, una línea de texto se compone de varias partes:

• Línea de base: esta es la línea imaginaria sobre la que se asienta el tipo. Cuando escribes en un cuaderno rayado, la línea de base es la línea sobre la que escribes.
• Descendente: esta línea se encuentra justo debajo de la línea de base. Es la línea que algunos caracteres, como minúsculas g, j, qy , pueden debajo de la línea de base y.p
• Altura X: Esta es (como era de esperar) la altura de una minúscula normal xen una línea de texto. Generalmente, esta es la altura de otras letras minúsculas, aunque algunas pueden tener partes de sus caracteres que excederán la altura de x. Para todos los efectos, sirve como la altura percibida de las letras minúsculas.
• Altura de la mayúscula: esta es la altura de la mayoría de las letras mayúsculas en una línea de texto determinada.
• Ascendente: una línea que a menudo aparece justo encima de la altura de la mayúscula donde a algunos caracteres les gusta estar en minúsculas ho bpueden exceder la altura de la mayúscula normal.

Cada una de las partes del texto descritas anteriormente es intrínseca a la misma fuente. Se diseña una fuente teniendo en cuenta cada una de estas partes; Sin embargo, hay algunas partes de la tipografía que se dejan en manos del creador de tipos (¡como tú y yo!) en lugar del diseñador. Uno de ellos es el líder.

El interlineado se define como la distancia entre dos líneas de base en un conjunto de tipos.

Un desarrollador de CSS podría pensar: “Está bien, el líder es el line-height, sigamos adelante”. Si bien los dos están relacionados, también son diferentes en algunos aspectos muy importantes.

Tomemos un documento en blanco y agregamos un “restablecimiento de CSS” clásico:

* {  margin: 0;  padding: 0;}

Esto elimina el margen y el relleno de cada elemento.

También usaremos Lato de Google Fonts como nuestro archivo font-family.

Necesitaremos algo de contenido, así que creamos una h1etiqueta con algo de texto y establecemos line-heightalgo desagradablemente grande, como 300 px. El resultado es una sola línea de texto con una sorprendente cantidad de espacio tanto encima como debajo de la única línea de texto.

Cuando un navegador encuentra la line-heightpropiedad, lo que realmente hace es tomar la línea de texto y colocarla en el medio de un “cuadro de línea” que tiene una altura que coincide con la altura de línea del elemento. En lugar de establecer el interlineado de una fuente, obtenemos algo parecido a rellenar uno a cada lado del cuadro de línea.

Como se ilustra arriba, el cuadro de línea se ajusta alrededor de una línea de texto donde el interlineado se crea utilizando el espacio debajo de una línea de texto y encima de la siguiente. Esto significa que para cada elemento de texto en una página habrá la mitad del interlineado encima de la primera línea de texto y después de la última línea de texto en un bloque de texto en particular.

Lo que podría ser más sorprendente es que se establezca explícitamente line-heighty font-sizeen un elemento con el mismo valor dejará espacio adicional encima y debajo del texto. Podemos ver esto agregando un color de fondo a nuestros elementos.

Esto se debe a que, aunque font-sizeesté establecido en 32 píxeles, el tamaño real del texto es algo menor que ese valor debido al espacio generado.

Conseguir que CSS trate la altura de la línea como si fuera un principio

Si queremos que CSS use un estilo de configuración de tipo más tradicional en lugar del cuadro de línea, queremos que una sola línea de texto no tenga espacio ni encima ni debajo, pero permita que los elementos de varias líneas mantengan su line-heightvalor completo.

Es posible enseñar CSS sobre liderazgo con un poco de esfuerzo. Michael Taranto lanzó una herramienta llamada Basekick que resuelve este mismo problema. Lo hace aplicando un margen superior negativo al ::beforepseudoelemento ya translateYal elemento mismo. El resultado final es una línea de texto sin espacios adicionales a su alrededor.

La versión más actualizada de la fórmula de Basekick se puede encontrar en el código fuente del Braid Design System de SEEK. En el siguiente ejemplo, estamos escribiendo un mixin Sass para hacer el trabajo pesado para nosotros, pero la misma fórmula se puede usar con mixins JavaScript, Less, PostCSS o cualquier otra cosa que proporcione este tipo de características matemáticas.

@function calculateTypeOffset($lh, $fontSize, $descenderHeightScale) {  $lineHeightScale: $lh / $fontSize;  @return ($lineHeightScale - 1) / 2 + $descenderHeightScale;}
@mixin basekick($typeSizeModifier, $baseFontSize, $descenderHeightScale, $typeRowSpan, $gridRowHeight, $capHeight) {  $fontSize: $typeSizeModifier * $baseFontSize;  $lineHeight: $typeRowSpan * $gridRowHeight;  $typeOffset: calculateTypeOffset($lineHeight, $fontSize, $descenderHeightScale);  $topSpace: $lineHeight - $capHeight * $fontSize;  $heightCorrection: 0;    @if $topSpace  $gridRowHeight {    $heightCorrection: $topSpace - ($topSpace % $gridRowHeight);  }    $preventCollapse: 1;    font-size: #{$fontSize}px;  line-height: #{$lineHeight}px;  transform: translateY(#{$typeOffset}em);  padding-top: $preventCollapse;
  ::before {    content: "";    margin-top: #{-($heightCorrection + $preventCollapse)}px;    display: block;    height: 0;  }}

A primera vista, este código definitivamente parece un montón de números mágicos improvisados. Pero se puede descomponer considerablemente si se piensa en él en el contexto de un sistema particular. Echemos un vistazo a lo que necesitamos saber:

• $baseFontSize:Esto es lo normal font-sizepara nuestro sistema en torno al cual se gestionará todo lo demás. Usaremos 16px como valor predeterminado.
• $typeSizeModifier: Este es un multiplicador que se usa junto con el tamaño de fuente base para determinar la font-sizeregla. Por ejemplo, un valor de 2 junto con nuestro tamaño de fuente base de 16px nos dará font-size: 32px.
• $descenderHeightScale: Esta es la altura del descendente de la fuente expresada como una proporción. Para Lato, esto parece rondar el 0,11.
• $capHeight: Esta es la altura de mayúscula específica de la fuente expresada como una proporción. Para Lato, esto es alrededor de 0,75.
• $gridRowHeight: Los diseños generalmente se basan en un ritmo vertical predeterminado para crear una experiencia de lectura agradable y con espacios consistentes. Por ejemplo, todos los elementos de una página pueden estar separados en múltiplos de cuatro o cinco píxeles. Usaremos 4 como valor porque se divide fácilmente en nuestro $baseFontSize de 16px.
• $typeRowSpan: Al igual que $typeSizeModifieresta variable sirve como multiplicador que se utilizará con la altura de la fila de la cuadrícula para determinar el line-heightvalor de la regla. Si nuestra altura de fila de cuadrícula predeterminada es 4 y nuestro tipo de intervalo de fila es 8, eso nos dejaría con altura de línea: 32px.

Ahora podemos introducir esos números en la fórmula Basekick anterior (con la ayuda de funciones SCSS y mixins) y eso nos dará el resultado a continuación.

Eso es justo lo que estamos buscando. Para cualquier conjunto de elementos de bloque de texto sin márgenes, los dos elementos deben chocar entre sí. De esta manera, cualquier margen establecido entre los dos elementos será perfecto en píxeles porque no luchará con el espaciado del cuadro de líneas.

Refinando nuestro código

En lugar de volcar todo nuestro código en un único mixin SCSS, organicémoslo un poco mejor. Si pensamos en términos de sistemas, notaremos que hay tres tipos de variables con las que estamos trabajando:

Pensar en estos términos nos ayudará a escalar nuestro sistema mucho más fácilmente. Tomemos cada grupo por turno.

En primer lugar, las variables a nivel del sistema se pueden configurar globalmente, ya que es poco probable que cambien durante el transcurso de nuestro proyecto. Eso reduce el número de variables en nuestro mixin principal a cuatro:

$baseFontSize: 16;$gridRowHeight: 4;@mixin basekick($typeSizeModifier, $typeRowSpan, $descenderHeightScale, $capHeight) {  /* Same as above */}

También sabemos que las variables de nivel de fuente son específicas de la familia de fuentes determinada. Eso significa que sería bastante fácil crear un mixin de orden superior que los establezca como constantes:

@mixin Lato($typeSizeModifier, $typeRowSpan) {  $latoDescenderHeightScale: 0.11;  $latoCapHeight: 0.75;    @include basekick($typeSizeModifier, $typeRowSpan, $latoDescenderHeightScale, $latoCapHeight);  font-family: Lato;}

Ahora, siguiendo una regla, podemos llamar al Latomixin sin problemas:

.heading--medium {  @include Lato(2, 10);}

Ese resultado nos da una regla que usa la fuente Lato con una font-sizede 32 px y una line-heightde 40 px con todas las traducciones y márgenes relevantes. Esto nos permite escribir reglas de estilo simples y utilizar la consistencia de la cuadrícula a la que los diseñadores están acostumbrados cuando usan herramientas como Sketch y Figma.

Como resultado, podemos crear fácilmente diseños con píxeles perfectos y sin complicaciones. Vea qué tan bien se alinea el ejemplo con nuestra cuadrícula base de 4px a continuación. (Es probable que tengas que acercarte para ver la cuadrícula).

Hacer esto nos brinda un superpoder único cuando se trata de crear diseños en nuestros sitios web: podemos, por primera vez en la historia, crear páginas con píxeles perfectos. Combine esta técnica con algunos componentes de diseño básicos y podremos comenzar a crear páginas de la misma manera que lo haríamos en una herramienta de diseño.

Avanzando hacia un estándar

Si bien enseñar CSS a comportarse más como nuestras herramientas de diseño requiere un poco de esfuerzo, hay potencialmente buenas noticias en el horizonte. Se ha propuesto una adición a la especificación CSS para alternar este comportamiento de forma nativa. La propuesta, tal como está ahora, agregaría una propiedad adicional a los elementos de texto similares a line-height-trimo leading-trim.

Una de las cosas sorprendentes de los lenguajes web es que todos tenemos la posibilidad de participar. Si esto le parece una característica que le gustaría ver como parte de CSS, tiene la posibilidad de ingresar y agregar un comentario a ese hilo para que se escuche su voz.