Espaciado vertical entre bloques de texto

Prueba esto en cualquier artículo: dale a cada encabezado el mismo margen arriba y abajo —24px por lado— y luego desplázate por la página y pregúntate, ante cada encabezado, ¿a qué sección pertenece? Los márgenes simétricos vuelven la respuesta genuinamente ambigua: cada encabezado flota justo a medio camino entre el texto que cierra y el texto que abre. Ahora dale a esos mismos encabezados 32px arriba y 16px abajo. Nada más cambia y, sin embargo, cada encabezado se adhiere visiblemente al contenido que le sigue, y la página se lee como secciones en lugar de como una pila uniforme de bloques.

El espaciado vertical del texto se reduce a cuatro reglas: separaciones entre párrafos de dos a tres unidades de línea base, márgenes de encabezado asimétricos —claramente más espacio arriba que abajo—, elementos de lista más apretados que los párrafos, y cada una de esas distancias tomada de la escala de espaciado en lugar de elegida por elemento.

Este artículo recorre cada regla, la razón perceptual por la que funciona la asimetría y una pila completa trabajada —encabezado, párrafos, subencabezado, lista— con valores reales. Aplica el pensamiento de escala del hub más amplio de espaciado al problema específico del texto.

¿Cuánto espaciado va entre párrafos?

Mídelo en unidades de línea base en lugar de píxeles improvisados. La unidad de línea base suele ser la mitad del tamaño del texto de cuerpo —un cuerpo de 16px da una unidad de 8px— y separaciones entre párrafos de dos a tres unidades (16–24px) cubren la mayoría de las composiciones de texto.

Los límites importan por ambos lados. Una separación entre párrafos tiene un solo trabajo: ser visiblemente mayor que la separación entre líneas dentro de un párrafo, sin crecer tanto que párrafos consecutivos dejen de leerse como un mismo texto. Con texto de cuerpo de 16px y un interlineado de 1,5, el espacio en blanco visible entre líneas es de unos 8px; una separación entre párrafos de 16px es el doble de eso —claramente un límite, claramente no un corte de sección—. Una separación de 24px se acerca a una línea en blanco completa y encaja con composiciones más sueltas, editoriales. Por debajo de dos unidades de línea base, los párrafos empiezan a difuminarse unos con otros; bastante por encima de tres, el texto empieza a desmoronarse en fragmentos.

¿Por qué los encabezados deben tener más espacio arriba que abajo?

Porque un encabezado es una etiqueta de la sección que tiene debajo, no un divisor entre dos secciones —y el espacio es como lo expresas—. La separación grande de arriba anuncia que la sección anterior ha terminado; la separación pequeña de abajo une el encabezado con su propio primer párrafo.

La base perceptual es el principio de proximidad de la investigación Gestalt sobre el agrupamiento: los elementos que están cerca unos de otros se perciben como pertenecientes al mismo grupo, antes de que ocurra cualquier lectura. Un lector que pasa la vista por un encabezado simétrico tiene que leerlo para saber a qué sección etiqueta; uno asimétrico se agrupa correctamente de un vistazo. Una proporción que funciona en muchas composiciones de texto es de aproximadamente 2:1 arriba respecto a abajo —32px arriba y 16px abajo para un encabezado principal.

¿Qué tan apretados deben estar los elementos de lista?

Más apretados que los párrafos. Los elementos de una lista son partes paralelas de una misma idea, y su espaciado debería reflejarlo: una unidad de línea base (8px) entre elementos, frente a la separación de 16px entre párrafos, mantiene la lista leyéndose como una sola unidad. Si los elementos suelen ocupar varias líneas cada uno, empiezan a comportarse como pequeños párrafos y merecen un paso más —11px o 16px—. El bloque de lista en conjunto se separa de los párrafos que lo rodean con la separación normal entre párrafos, de modo que la lista queda dentro del texto en lugar de flotar entre textos.

¿Cómo se ve en números una pila completa de artículo?

Cada valor de abajo es un paso de una misma escala de espaciado —base 16, ratio 2, dos notas por duplicación, lo que genera 8, 11, 16, 23, 32— y la unidad de línea base es la base a la mitad, 8px:

Ambos niveles de encabezado mantienen aproximadamente la asimetría 2:1 (32/16 y 23/11), y el h3 baja una posición de escala respecto al h2 por ambos lados, de modo que la jerarquía se mantiene proporcional. El emparejamiento no es una coincidencia que tengas que mantener a mano: con dos notas por duplicación, cualquier paso es exactamente el doble del paso dos posiciones por debajo —la asimetría 2:1 de los encabezados surge de la propia aritmética de la escala.

Abre en Scale Composer la escala que hay detrás de esta pila — los cinco valores de la tabla son pasos consecutivos de una misma escala generada, y la unidad de línea base de 8px es la base de 16px a la mitad.

Una nota de implementación: la prosa es el lugar donde los márgenes de los elementos —en lugar del gap de un contenedor padre— siguen siendo la herramienta natural, porque la distancia correcta depende del par (de encabezado a párrafo difiere de párrafo a párrafo) y un gap uniforme no puede variar por par. El colapso de márgenes, tan a menudo un error en el maquetado de aplicaciones, trabaja a tu favor aquí: el margen inferior de 16px del párrafo se encuentra con el margen superior de 32px del h2 y colapsa a 32px —exactamente el valor que querías, sin ningún caso especial.

¿De dónde salen los valores de espaciado?

De la misma escala que espacia todo lo demás. La fórmula size = base × ratio^(i/notes) convierte tres números en el menú completo, y el espaciado del texto simplemente usa su mitad inferior: 8 para los elementos de lista, 11 y 16 para las separaciones a nivel de párrafo, 23 y 32 para las aproximaciones a los encabezados. Eso significa que el espaciado del texto no es un segundo sistema que mantener —la pila del artículo, el relleno de los componentes y los medianiles de la página se resuelven todos en pasos de una misma escala, que es lo que hace que una página de contenido y una pantalla de producto del mismo equipo se vean emparentadas.

Mira la asimetría en acción

La forma más rápida de interiorizar la regla de los encabezados es cambiar la aritmética que hay debajo y ver cómo se mueven los pares. Con dos notas por duplicación, el par arriba/abajo separado por dos pasos es exactamente 2:1; regenera la misma escala con tres notas por duplicación y ese par se afloja hasta cerca de 1,6:1 —una asimetría más suave que encaja con la documentación densa, a costa de parte de la contundencia—. Juzga la diferencia por ti mismo: abre el estado de margen de encabezado y cambia las notas.