El espacio en blanco en diseño web: por qué el aire también comunica

Hay una conversación que se repite en casi todos los proyectos web. Presentamos el diseño de una página, el cliente la mira con buena cara y, al cabo de un rato, señala una zona de la pantalla: «¿Y aquí no podríamos poner algo?». Ahí no hay nada, efectivamente. Y está así a propósito.

Es una reacción muy humana. Si estás pagando una web, un hueco puede parecer espacio desaprovechado, como un escaparate con media estantería vacía. Pero en diseño ese vacío trabaja, y mucho. Es lo que hace que lo demás se lea, se entienda y se vea bien. En esta guía explico por qué lo defendemos tanto y cómo se trabaja en la práctica.

01Qué es el espacio en blanco (y por qué no tiene que ser blanco)

El espacio en blanco es todo lo que hay entre los elementos de una página: los márgenes, la separación entre párrafos, el hueco alrededor de un botón, la distancia entre una sección y la siguiente. Se llama «en blanco» por herencia de la imprenta, cuando el papel era blanco, pero puede ser de cualquier color. Una web con fondo negro o arena tiene exactamente el mismo espacio en blanco que una con fondo blanco. Por eso también se habla de espacio negativo.

Conviene verlo como un material más, igual que la tipografía, el color o la fotografía. No es lo que sobra después de colocar las cosas; es parte de cómo se colocan.

02Lo que el aire hace por una web

Facilita la lectura

Un texto con un interlineado cómodo, párrafos separados y líneas de un largo razonable se lee sin esfuerzo. El mismo texto apretado, con líneas que cruzan toda la pantalla y párrafos pegados, se lee peor aunque las palabras sean las mismas. La gente no suele decir «le falta interlineado»; dice que la web «cansa» o que «no se entiende bien». Casi siempre detrás hay un problema de espacio.

Esto va muy de la mano de la tipografía. Una buena fuente mal espaciada pierde gran parte de su gracia, y una fuente correcta con buen espaciado gana mucho. Lo contaba en por qué la tipografía importa más de lo que parece.

Transmite calidad

Piensa en el escaparate de una joyería y en el de un bazar. En uno hay pocas piezas, bien separadas, con luz alrededor. En el otro, todo lo que cabe. Los dos funcionan para lo que quieren, pero cuentan cosas muy distintas sobre el precio y el cuidado. En una web pasa algo parecido: el espacio generoso se asocia a calma, seguridad y criterio. Da la sensación de que alguien ha decidido qué merecía estar ahí. Si te interesa esa parte de la percepción, en qué hace que una marca parezca seria hay más ejemplos.

Dirige la mirada

Un elemento rodeado de espacio destaca sin necesidad de hacerlo más grande ni de pintarlo de rojo. Es la forma más elegante de decir «mira esto». Un titular con aire alrededor se lee primero. Un botón que tiene su espacio se ve como lo que es, la acción principal, en lugar de competir con tres enlaces y una foto a su lado. Cuando todo está igual de apretado, todo pide atención a la vez y al final no destaca nada.

Agrupa y ordena

El espacio también explica qué va con qué. Si un título está más cerca de su párrafo que del bloque anterior, el ojo entiende sin pensarlo que van juntos. Si la separación es igual en todas partes, hay que leer para saber dónde empieza cada cosa. Gran parte del orden de una página bien diseñada se consigue así, sin líneas ni recuadros, solo con distancias bien elegidas.

Clave: el espacio en blanco no le quita sitio al contenido; le da contexto. Decide qué se ve primero, qué va junto y cuánto cuesta leerlo.

03Micro y macro espaciado

Cuando hablamos de espacio en el estudio solemos separarlo en dos escalas, porque se trabajan de forma diferente.

El micro espaciado es el de cerca: el interlineado, el espacio entre letras, la separación entre un título y su texto, el relleno interior de un botón o de un campo de formulario, el margen entre un icono y su etiqueta. Son distancias pequeñas, de unos pocos píxeles, pero se notan muchísimo en la sensación de acabado. Un botón con el texto pegado al borde parece hecho deprisa; con un poco más de relleno parece un botón de verdad.

El macro espaciado es el de lejos: los márgenes laterales, la distancia entre secciones, el aire alrededor de una imagen grande, el ancho máximo del texto. Es lo que define la estructura y la respiración general de la página. Cuando se ve una web «agobiada», normalmente el problema está aquí: secciones que empiezan antes de que la anterior haya terminado de asentarse.

Los dos niveles tienen que estar pensados juntos. De poco sirve un macro espaciado generoso si dentro de cada bloque todo está apretado, y al revés.

04Ritmo vertical: el espacio también se ordena

Una web se recorre de arriba abajo, y el espacio entre bloques marca el compás de ese recorrido. Si cada separación es distinta (aquí 37 píxeles, allí 52, más abajo 20), la página da una sensación difusa de desorden aunque nadie sepa explicar por qué.

Por eso trabajamos con una escala de espaciado: un puñado de medidas que se repiten en toda la web, normalmente múltiplos de una unidad base, de 4 u 8 píxeles por ejemplo. Los huecos pequeños para dentro de los componentes, los medianos entre elementos de un mismo bloque y los grandes entre secciones. Con esa regla, la página tiene un ritmo reconocible, como un texto bien puntuado, y además es mucho más fácil de mantener cuando se añaden páginas nuevas. Si quieres ver cómo encaja esto con el resto de reglas de una web, lo explico en la guía sobre qué es un sistema de diseño.

El ritmo no significa que todo tenga que estar a la misma distancia. Una sección especialmente importante puede llevar más aire antes y después, precisamente para marcar una pausa. Lo que importa es que las variaciones sean intencionadas.

05Cuando el cliente quiere «llenar»

Entiendo perfectamente las ganas de aprovechar cada centímetro. Hay mucho que contar, se ha invertido en el proyecto y da la impresión de que más contenido visible es más oportunidades. Lo que intento explicar en esas conversaciones es que la persona que llega a la web tiene poco tiempo, y que cuanto más fácil le ponemos ver lo importante, más probable es que se quede.

Hay tres argumentos que suelen ayudar. El primero, comparar con algo físico: el escaparate, una carta de restaurante con dos platos por línea frente a una con letra diminuta, una tienda donde puedes moverte frente a una donde vas esquivando cajas. El segundo, enseñar la misma página en las dos versiones, con aire y sin él, una al lado de la otra. Suele bastar con mirar diez segundos. El tercero, recordar que el contenido no desaparece: se ordena. Lo que no cabe en la portada puede tener su sitio en otra página, en un desplegable o en una sección más abajo.

Y luego hay un punto de equilibrio. Defender el espacio tampoco significa defender el vacío por estética. Una página también puede quedarse corta de contenido o tan espaciada que parezca sin terminar. El criterio es que cada hueco tenga una función: separar, agrupar, destacar o dar una pausa.

06El espacio en móvil

En el móvil el espacio es más escaso, y es justo donde más fácil resulta perderlo. La tentación es reducir todos los márgenes al mínimo para que quepa más, y el resultado es una pantalla donde los textos tocan los bordes y los botones se pegan entre sí.

Lo que funciona es adaptar la escala, no eliminarla. Los márgenes laterales bajan (en torno a 16 o 20 píxeles suele ir bien), la separación entre secciones se reduce en proporción, pero el interlineado del texto se mantiene cómodo y los elementos que se tocan con el dedo conservan su tamaño y su distancia, para que nadie pulse el enlace de al lado sin querer. A menudo además conviene simplificar: menos columnas, menos elementos por bloque, alguna imagen decorativa que en móvil se puede quitar. Todo esto encaja con la forma de trabajar que explico en mobile first: si diseñas primero para la pantalla pequeña, decidir qué merece espacio sale casi solo.

07Para terminar

El espacio en blanco es de las cosas que menos se ven cuando están bien hechas y más se notan cuando faltan. Una web con aire bien repartido se lee con calma, se percibe cuidada y deja claro qué es lo importante. Es una decisión de diseño tan seria como elegir una tipografía o un color, y merece el mismo mimo.

Si estás pensando en una web nueva o sientes que la tuya está demasiado apretada, en diseño web y experiencia digital tienes cómo lo trabajamos, y si prefieres contárnoslo directamente, escríbenos.