Espaço e densidade
Uma régua de sete passos para todo espaço. Ligado ao requinte (poucos valores, sempre os mesmos) e ao "nunca convoluto" (ar para cada coisa ser vista sozinha).
Nesta página
A régua
Todo espaço sai de uma régua só, de sete passos. Ninguém escolhe "uns 20 pixels": escolhe um passo.
- space-1
- 4px
- space-2
- 8px
- space-3
- 16px
- space-4
- 24px
- space-5
- 40px
- space-6
- 64px
- space-7
- 96px
Quanto mais perto, mais junto
O que pertence junto fica próximo (ícone e palavra: space-1); partes diferentes ficam longe (entre seções: space-7). O espaço é que diz o que é grupo, não as linhas e caixas.
Faça assim
LembreteTerça, 9hBackupToda madrugada
Título e detalhe juntos; um item longe do outro.
Não faça
LembreteTerça, 9hBackupToda madrugada
Tudo com o mesmo espaço: não dá para saber qual detalhe é de qual título.
Nenhum espaço fora da régua
Se nenhum passo serve, a composição está errada, não a régua.
Densidade depende da tela
Páginas de leitura respiram. Telas de trabalho, com tabelas e formulários para olhar rápido e agir em lote, são compactas: data-density="compact" na área de trabalho aperta células e controles e deixa o texto em paz. Trocar a densidade anima: as linhas encolhem, não pulam.
| Agendamento | Quando |
|---|---|
| Backup semanal | Domingo, 3h |
| Regar as plantas | Terça, 9h |
| Relatório do mês | Dia 1, 8h |
Largura e grid
Uma coluna de leitura tem medida
Nunca passa da largura confortável (measure-reading, cerca de 70 caracteres por linha).
Um grid nunca cresce além da tela
Uma coluna de grid, por padrão, não encolhe abaixo do conteúdo: uma tabela larga estica a coluna e a página inteira passa a rolar para o lado. Use minmax(0, 1fr) nas colunas, e deixe o conteúdo largo rolar dentro da própria caixa.
Faça assim
Uma coluna de leitura confortável deixa o olho voltar ao começo da próxima linha sem se perder. Quando a linha estica de ponta a ponta numa tela larga, cada volta vira uma busca, e a leitura cansa antes do fim do parágrafo.
A coluna para numa medida confortável, mesmo com espaço sobrando.
Não faça
Uma coluna de leitura confortável deixa o olho voltar ao começo da próxima linha sem se perder. Quando a linha estica de ponta a ponta numa tela larga, cada volta vira uma busca, e a leitura cansa antes do fim do parágrafo.
A linha estica até onde a caixa deixa: numa tela larga, o olho se perde na volta.
.colunas {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}Faça assim
Agendamento · Quando · Situação · Disparos · Responsável · Última vez
Outra coluna
Com minmax(0, 1fr), a coluna respeita a caixa e o conteúdo largo rola dentro dela.
Não faça
Agendamento · Quando · Situação · Disparos · Responsável · Última vez
Outra coluna
Com 1fr, a coluna cresce com o conteúdo e passa da borda tracejada: no mobile, a página inteira rola para o lado.
Esta regra veio de um erro de verdade: a primeira vitrine do Feitio rolava 34px para o lado no mobile por causa de uma tabela.