Espacio en blanco (whitespace): qué es, tipos y cómo usarlo en webs y emails
El espacio vacío que hace que tu diseño se lea mejor
El espacio en blanco (en inglés, whitespace o white space) es la zona vacía que hay entre los elementos de un diseño: alrededor de textos, imágenes, botones y márgenes. No tiene por qué ser blanco. Es cualquier espacio sin contenido, del color que sea el fondo.
Lejos de ser espacio desperdiciado, es lo que permite que un diseño se lea con facilidad. Separa unos elementos de otros, marca qué es lo importante y hace que la vista descanse.
¿Para qué sirve el espacio en blanco?
Mejora la lectura. Los márgenes y el interlineado hacen que el texto no se vea apelotonado. Un párrafo con aire se lee antes que un bloque compacto.
Ordena la información. El espacio agrupa lo que va junto y separa lo que es distinto. El lector entiende la estructura sin necesidad de líneas ni recuadros.
Dirige la atención. Un botón o un titular rodeado de espacio destaca más que uno metido entre otros elementos. Es una forma de decir «mira aquí».
Transmite calidad. Un diseño despejado parece más cuidado y más fácil de usar. Por eso las marcas de gama alta suelen dejar mucho espacio vacío.
Diseña emails que respiran
Crea tu cuenta gratis en Mailrelay: ajusta márgenes, separadores y rellenos en el editor de arrastrar y soltar, sin tocar código.
Tipos de espacio en blanco
| Tipo | Qué es | Ejemplo |
|---|---|---|
| Micro | El espacio pequeño entre letras, líneas y párrafos | El interlineado de un texto |
| Macro | El espacio grande entre bloques y alrededor del diseño | El margen alrededor de un titular o de una imagen |
| Activo | El que se deja a propósito para destacar o separar algo | El espacio que rodea un botón de compra |
| Pasivo | El que aparece de forma natural al maquetar | El hueco al final de un párrafo corto |
Los cuatro trabajan juntos. El micro espacio hace que el texto se lea bien. El macro espacio ordena la página. El activo es el que usas para guiar al lector.
Espacio en blanco en una web
En una web, el espacio en blanco ayuda a que el visitante encuentre en segundos lo que busca. Un buen ejemplo es la portada de un buscador: casi todo es espacio vacío, y la caja de búsqueda queda en el centro.
En una landing page, dejar espacio alrededor del formulario y del call to action evita distracciones. En el móvil es todavía más importante: con poca pantalla, los elementos amontonados se tocan sin querer. Más en responsive design.
Espacio en blanco en el email
En un email el espacio es más limitado, y cada gestor de correo muestra el diseño a su manera. Estas son las claves:
- Una idea por bloque. Separa cada sección (noticia, producto, oferta) con un espacio claro.
- Márgenes generosos alrededor del botón. El botón principal debe verse a la primera, sin nada pegado.
- Párrafos cortos con interlineado. De dos a cuatro líneas y con espacio entre ellos.
- Menos elementos. Si todo compite por la atención, nada destaca. Quita lo que no ayude al objetivo del email.
- Prueba en el móvil. Lo que en el ordenador parece espacio de sobra puede quedar justo en el teléfono.
Un diseño por bloques, como el del diseño de email modular, facilita mantener el mismo espacio en todos tus envíos.
Espacios en blanco en HTML y CSS
Si buscas el término técnico: en HTML, el navegador junta varios espacios seguidos en uno solo. Para forzar un espacio que no se junte ni se corte de línea se usa la entidad . En CSS, el espacio entre elementos se controla con margin (fuera del elemento) y padding (dentro), y la propiedad white-space decide cómo se tratan los espacios y los saltos de línea del texto.
En el diseño de webs y emails, conviene crear el espacio con márgenes y rellenos, no con líneas vacías o muchos seguidos: el resultado es más limpio y se adapta mejor a cada pantalla.
Errores habituales
Llenar cada hueco. Pensar que el espacio vacío es espacio perdido lleva a diseños saturados.
Espacio sin criterio. Si los márgenes cambian de un bloque a otro, el diseño parece descuidado. Usa siempre las mismas medidas.
Dejar demasiado espacio. Si el lector tiene que desplazarse mucho para encontrar el contenido, el espacio deja de ayudar.
Olvidar el móvil. Un diseño que respira en el ordenador puede verse apretado en una pantalla pequeña.
Cómo te ayuda Mailrelay
En el editor de newsletters de Mailrelay controlas el espacio sin tocar código:
- El bloque Separador añade espacio entre bloques y te deja elegir la altura en píxeles.
- El Divisor dibuja una línea para separar secciones.
- En los textos y los botones ajustas el relleno (opción Dimensión) y la altura de línea (opción Tipografía).
También puedes partir de una plantilla de email ya maquetada y enviarte una prueba para ver cómo queda en el móvil. Todo esto está incluido en la cuenta gratuita, con la que puedes enviar hasta 80.000 emails al mes.
Empieza gratis con Mailrelay
Hasta 80.000 emails al mes, editor de arrastrar y soltar y soporte en español.
Preguntas frecuentes
¿Qué es el espacio en blanco en diseño?
Es la zona vacía entre los elementos de un diseño (textos, imágenes, botones y márgenes). Sirve para que el contenido se lea mejor y para destacar lo importante.
¿Qué significa whitespace?
Es el término en inglés para el espacio en blanco. También se escribe white space y en español se le llama, a veces, espacio negativo.
¿El espacio en blanco tiene que ser blanco?
No. Es cualquier zona sin contenido, del color que tenga el fondo: puede ser gris, negro o de un color de marca.
¿Cuál es la diferencia entre micro y macro espacio en blanco?
El micro espacio es el pequeño, entre letras, líneas y párrafos. El macro es el grande, entre bloques y alrededor del diseño.
¿Cómo se añade un espacio en blanco en HTML?
Con la entidad para un espacio fijo, y con margin y padding en CSS para separar elementos.