Rejilla de 4pt vs 8pt: cuándo usar cada una
Las rejillas de 4pt y 8pt son capas de un mismo método de espaciado, no sistemas rivales: los múltiplos de 8 gestionan el espaciado a nivel de layout — los huecos entre componentes y secciones — mientras que los múltiplos de 4 gestionan el espaciado interior fino, como el relleno de iconos y el hueco entre etiqueta e input, además de la tipografía. La pregunta práctica no es qué rejilla adoptar sino a qué capa pertenece cada distancia.
Este artículo cubre qué separa a las dos rejillas, qué empuja a un producto hacia la capa de 4pt, por qué las distancias pequeñas necesitan pasos más finos en primer lugar, y el hábito de documentación que evita que las dos capas colapsen en un único menú ruidoso. Parte de los fundamentos cubiertos en el hub del sistema de espaciado.
¿Cuál es la diferencia entre una rejilla de 4pt y una de 8pt?
Solo el tamaño del paso. Una rejilla de 8pt permite 8, 16, 24, 32, 40…; una rejilla de 4pt permite 4, 8, 12, 16, 20, 24… — el doble de valores por debajo de cualquier techo. Todo valor que permite una rejilla de 8pt lo permite también una de 4pt, y por eso el par se describe mejor como una sola rejilla con un medio paso que como dos sistemas.
El compromiso es directo. Un menú más corto significa menos decisiones y más consistencia entre pantallas diseñadas por personas distintas; un menú más fino significa más rango expresivo en tamaños pequeños, y más margen para acabar divergiendo. Ninguno gana del todo, así que los sistemas maduros tienden a usar ambos a la vez, cada uno acotado a su propia capa:
- Múltiplos de 8 para el layout: espacio entre componentes, espacio entre secciones, relleno de contenedores, alturas fijas de componentes.
- Múltiplos de 4 dentro de los componentes: huecos entre icono y etiqueta, relleno en chips y badges, la distancia de una etiqueta a su input — y la tipografía, donde los tamaños y los interlineados suelen caer en múltiplos de 4.
Las convenciones de plataforma operan también a este nivel; las Human Interface Guidelines de Apple sobre layout son un ejemplo de la orientación sobre márgenes y espaciado con la que una rejilla tiene que coexistir en una plataforma real.
¿Cuándo necesita un producto la capa de 4pt?
Tres presiones empujan a un producto más allá de los múltiplos de 8 puros:
- Densidad de datos. Tablas, dashboards, paneles de administración: en una fila de 32px de alto, 8px de relleno de celda ya es un cuarto de la altura. Los productos densos necesitan 4 y 12 — valores que el menú de 8pt no tiene.
- Componentes compactos. Chips, badges, botones de barra de herramientas, elementos de lista de la barra lateral: dentro de un elemento de 24px de alto, el salto de 8 a 16 se salta el valor que encaja.
- Tipografía pequeña. Las etiquetas y los pies de texto a 12–14px se sitúan más cerca de sus vecinos que el texto de cuerpo. El hueco entre una etiqueta de 12px y su input se lee bien a 4px; a 8px ya parece desconectado.
Las páginas con mucho contenido, en cambio, viven cómodamente en múltiplos de 8 — texto largo, secciones generosas, pocos controles compactos. Si un producto es sobre todo lectura, puede que la capa de 4pt nunca se gane su sitio.
¿Por qué las distancias pequeñas necesitan pasos más finos?
Porque el ojo juzga un hueco en relación con los elementos que separa, no en píxeles absolutos. Añade 4px dentro de un chip de 24px de alto y el componente cambia de forma visible — el hueco creció en una proporción que cualquiera puede ver. Añade esos mismos 4px a un hueco de sección de 64px y poca gente notará nada. La resolución que necesitas es proporcional a la distancia que estás fijando: pasos finos de cerca, pasos gruesos de lejos.
Esa es la intuición detrás de la estratificación en capas. El espaciado pequeño no es más importante que el grande — es el rango donde una diferencia de 4px sigue siendo una decisión visible, así que el menú tiene que ofrecerla ahí.
¿Cómo se ve la separación en la práctica?
Aquí tienes un formulario denso medido distancia por distancia:
| Distancia | Valor | Capa |
|---|---|---|
| Etiqueta a su input | 4px | 4pt — interior |
| Input a su texto de ayuda | 4px | 4pt — interior |
| Icono a texto dentro del campo | 8px | compartida (8 también es múltiplo de 4) |
| Campo al siguiente campo | 16px | 8pt — layout |
| Grupo de campos al siguiente grupo | 32px | 8pt — layout |
| Formulario a la sección que lo rodea | 64px | 8pt — layout |
Lee hacia abajo la columna de valores: las distinciones finas se agrupan en el extremo pequeño, y toda distancia a nivel de layout es un múltiplo de 8. Esa distribución — densa abajo, dispersa arriba — es lo que una escala de espaciado no lineal produce a partir de una fórmula en lugar de decisiones caso por caso.
Ve el extremo denso en vivo: abre esta escala compatible con 4pt en Scale Composer — la base se mantiene igual, pero cada intervalo de la escala se subdivide en más notas, así que el extremo pequeño gana los pasos intermedios que una UI densa necesita mientras que la parte superior conserva sus grandes saltos de layout.
¿No echa por tierra el propósito permitir múltiplos de 4 en todas partes?
Sí — esta es la trampa. El valor de una rejilla es el menú corto: un puñado de valores de los que todos eligen, para que las pantallas construidas de forma independiente sigan saliendo relacionadas. Permite múltiplos de 4 en todas partes y el menú por debajo de 64px crece de 8 opciones a 15; las pantallas contiguas empiezan a discrepar de nuevo sobre los huecos de sección — 20 aquí, 24 allá — y la consistencia que la rejilla existía para comprar se erosiona en silencio.
La solución cuesta una frase en tu documentación de espaciado: el espaciado interior y la tipografía pueden usar múltiplos de 4; el espaciado entre componentes y secciones usa múltiplos de 8. Con el límite escrito, un hueco de sección de 12px se convierte en una infracción revisable en lugar de una cuestión de gusto, y la capa de 4pt añade precisión sin reabrir cada decisión que la rejilla de 8pt ya había cerrado.
Prueba la capa de layout contra columnas reales
La otra mitad de la respuesta es ver lo poco que importan los pasos finos a escala de layout. Abre la vista de rejilla con una escala de layout de 8pt cargada y recorre los medianiles y los márgenes a lo largo de la escala — 4 columnas en móvil, 8 en tablet, 12 en escritorio. Mover un medianil un paso es claramente visible; los refinamientos de 4px que se ganaron su lugar dentro de un chip serían invisibles aquí fuera. Ese contraste es todo el argumento a favor de estratificar las dos rejillas en capas en lugar de elegir entre ellas.