Espacio y densidad
Una escala de siete pasos para cada espacio. Vinculada al refinamiento (pocos valores, siempre los mismos) y a lo "nunca complicado" (espacio para que cada cosa se vea por sí misma).
En esta página
La escala
Cada espacio proviene de una sola escala de siete pasos. Nadie elige "unos 20 píxeles": tú eliges un paso.
- space-1
- 4px
- space-2
- 8px
- space-3
- 16px
- space-4
- 24px
- space-5
- 40px
- space-6
- 64px
- space-7
- 96px
Cuanto más cerca, más juntos
Lo que pertenece junto permanece cercano (icon y palabra: space-1); partes distintas permanecen separadas (entre secciones: space-7). El espacio indica qué es un grupo, no las líneas ni los cuadros.
Do
RecordatorioMartes, 9 amRespaldoCada noche
Título y detalle juntos; un elemento lejos del siguiente.
Don’t
RecordatorioMartes, 9 amRespaldoCada noche
Todo con el mismo espacio: no puedes decir qué detalle pertenece a qué título.
Sin espacios fuera de escala
Si ningún paso encaja, la composición es incorrecta, no la escala.
La densidad depende de la pantalla
Leer páginas respira. Las pantallas de trabajo, con tablas y formularios para escanear y actuar a gran escala, son compactas: data-density="compact" en el área de trabajo aprieta celdas y controles y deja el texto solo. Cambiar la densidad anima: las filas se encogen, no saltan.
| Cronograma | Cuando |
|---|---|
| Respaldo semanal | Domingo, 3 am |
| Regar las plantas | Martes, 9 am |
| Informe mensual | El 1º, 8 am |
Ancho y cuadrícula
Una columna de lectura tiene una medida
Nunca supera el ancho cómodo (measure-reading, aproximadamente 70 caracteres por línea).
Una cuadrícula nunca crece más allá de la pantalla
Una columna de cuadrícula, por defecto, no se encoge por debajo de su contenido: una tabla ancha estira la columna y toda la página comienza a desplazarse lateralmente. Use minmax(0, 1fr) para las columnas y deje que el contenido ancho se desplace dentro de su propia caja.
Do
Una columna de lectura cómoda permite que el ojo regrese al inicio de la siguiente línea sin perderse. Cuando la línea se estira de extremo a extremo en una pantalla ancha, cada retorno se convierte en una búsqueda, y la lectura cansa antes de terminar el párrafo.
La columna se detiene en una medida cómoda, incluso con espacio sobrante.
Don’t
Una columna de lectura cómoda permite que el ojo regrese al inicio de la siguiente línea sin perderse. Cuando la línea se estira de extremo a extremo en una pantalla ancha, cada retorno se convierte en una búsqueda, y la lectura cansa antes de terminar el párrafo.
La línea se estira tan lejos como lo permite la caja: en una pantalla ancha, el ojo se pierde en el camino de regreso.
.colunas {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}Do
Cronograma · Cuándo · Estado · Ejecuciones · Propietario · Última ejecución
Otra columna
Con minmax(0, 1fr), la columna respeta el contenedor y el contenido ancho se desliza dentro de él.
Don’t
Cronograma · Cuándo · Estado · Ejecuciones · Propietario · Última ejecución
Otra columna
Con 1fr, la columna crece con su contenido y pasa por el borde punteado: en móvil, toda la página se desliza lateralmente.
Esta regla proviene de un error real: el primer showcase de Feitio se desplazaba 34px lateralmente en móvil debido a una tabla.