Medir el espaciado en vez de opinarlo

La conversación más cara del diseño web es esta:

—Le falta aire. —Yo lo veo bien.

No hay forma de ganarla, porque nadie está midiendo nada. Los dos están recordando la página, no viéndola. Y un recuerdo de una página no tiene números.

El problema real

Al construir esta página apareció el síntoma clásico: en el monitor grande todo respiraba, y en el teléfono algunas secciones parecían desconectadas entre sí. No "apretadas" — al revés: tan separadas que el ojo perdía la relación entre un titular y su párrafo.

Ese es el matiz que casi siempre se pierde. Generosidad no es lo mismo que vacío. Un hueco tan grande que rompe la jerarquía de proximidad no se lee como lujo, se lee como un error de maquetación.

La escala primero

Antes de medir hay que tener contra qué medir. Todo el espaciado del sitio sale de una escala fluida, y vive en un solo archivo:

--space-2xs: clamp(0.5rem, 0.45rem + 0.2vw, 0.65rem);
--space-xs:  clamp(0.75rem, 0.65rem + 0.4vw, 1rem);
--space-s:   clamp(1.15rem, 1rem + 0.6vw, 1.6rem);
--space-m:   clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
--space-l:   clamp(2.75rem, 2.1rem + 2.6vw, 4.5rem);
--space-xl:  clamp(4rem, 2.9rem + 4.4vw, 7rem);
--space-2xl: clamp(5rem, 3.4rem + 5.6vw, 8rem);

La regla que hace que esto funcione no es técnica, es social: si un valor no está en la escala, es un valor puesto a ojo y hay que justificarlo en un comentario. Sin esa regla, la escala se convierte en decoración y a la tercera semana el CSS vuelve a tener margin-top: 37px.

Encima de la escala hay dos roles con nombre, para no elegir un escalón cada vez:

--section-space: var(--space-2xl);   /* entre secciones */
--copy-space:    var(--space-l);     /* dentro de un bloque de texto */

Y luego el metro

Con la escala puesta, la pregunta deja de ser "¿se ve bien?" y pasa a ser "¿qué hueco hay realmente entre estos dos elementos, en este ancho?". Eso sí se puede responder con un script.

const gaps = await page.evaluate(() => {
  const out = []
  for (const section of document.querySelectorAll('section')) {
    const kids = [...section.children].filter((el) => el.offsetHeight > 0)
    for (let i = 1; i < kids.length; i++) {
      const prev = kids[i - 1].getBoundingClientRect()
      const curr = kids[i].getBoundingClientRect()
      out.push({
        section: section.className.split(' ')[0],
        between: `${kids[i - 1].tagName} → ${kids[i].tagName}`,
        gap: Math.round(curr.top - prev.bottom),
      })
    }
  }
  return out
})

Se corre contra el build servido —no contra el HTML crudo— en dos anchos, y escupe una tabla. Ahí es donde aparecen las sorpresas: huecos de 140 px que en el CSS parecían de 60, porque un margin colapsado y un padding de sección se estaban sumando sin que nadie lo hubiera pedido.

Lo que cambió de verdad

El script no toma decisiones de diseño. Lo único que hace es quitar la opinión de la parte que no era opinable. Después de correrlo:

• Tres secciones tenían el doble de separación de la que decía su CSS.
• El par 02 / La intención estaba a --space-m de su propio titular, cuando es una sola unidad y pedía --space-2xs.
• El teléfono no necesitaba "más aire", necesitaba menos, en los sitios exactos donde la proximidad tenía que hacer su trabajo.

Ninguno de esos tres se veía a ojo. Los tres eran evidentes en la tabla.

Lo que me llevo

Medir no sustituye al criterio: sustituye a la discusión sobre los hechos, para que el criterio se pueda gastar en lo que sí importa. Cuando los dos lados de la conversación ven el mismo número, la pregunta vuelve a ser la buena —¿este hueco ayuda a leer?— en vez de la inútil, que es ¿quién tiene razón?