Calhas - preenchimento e margem para colunas com fundo ou borda

Quais são as diretrizes de design recomendadas para as sarjetas quando uma coluna (ou caixa ou qualquer módulo de layout) tem sua forma claramente visível porque tem seu próprio plano de fundo ou borda?

Normalmente, colocaríamos algum espaço entre a borda da caixa e seu texto. Mas de onde evocar esse espaço? Ao expandir a caixa, ou encolhendo o texto ?

Para ilustrar, aqui estão algumas (mas não todas) opções ...

(Além disso, eu poderia ter usado qualquer grade com qualquer número de colunas e qualquer largura - isso serve apenas como exemplo - a pergunta real poderia ser feita toda vez que um layout ultrapassasse as calhas).

Passei por uma pilha de textos em layouts baseados em grade, mas até agora vi apenas um que aborda o assunto: Nudge Your Elements, de Khoi Vinh.

o que estou perdendo? Ou simplesmente não há uma orientação clara?

Como uma das motivações para layouts baseados em grade é aumentar o senso de alinhamento global, suponho que alguém possa argumentar que a decisão depende do que exige mais alinhamento; a caixa ou seu conteúdo?

A menos que eu esteja interpretando mal, Khoi Vinh defende a opção 3 em seu artigo.

Eu me vejo alternando entre a opção 3 e a opção 6. Com a opção 3, a caixa está alinhada, mas seu texto parece apertado. Mas, usando a opção 6, a pessoa acaba sem caixa nem texto alinhados (embora se possa dizer que o meio implícito entre a borda do texto e a borda da caixa é a 'coisa' agora alinhada).

Indo além da web, nenhuma das minhas leituras sobre design de livros e os cânones da construção de páginas também falam sobre esse assunto. Posso ver como os cânones funcionam para a grande maioria da impressão de livros com 'carta preta sobre fundo claro', mas no minuto em que adiciona cor ao layout da página (ou inverte um esquema em preto e branco), a questão da sarjeta volta.

Mmm, acho que a pergunta é; existem diretrizes para escolher entre as opções que ilustrei - ou me arrisquei além da lei do designer e o problema é apenas sobre "o que parece e é bom" ?

Sempre que você usa uma grade, você deve usá-la de forma consistente, exceto quando um elemento (geralmente não mais do que um em uma determinada página) a viola por um bom motivo - para destacá-lo ou alterar o humor da página . O contraste deve ser ousado e claramente deliberado para que isso funcione. (Por "trabalho", quero dizer que não parece um erro.)

Uma grade, rigorosamente seguida, está em paz. Há pouca ou nenhuma tensão; as coisas aparecem onde os olhos esperam que elas estejam, e o leitor nunca se assusta ou se sente desconfortável.

Nesse caso, se o seu plano de fundo violar um pouco a grade, como no item 4, parece um erro. É estranho. A completa falta de sarjeta aglomera a caixa contra as outras colunas. Contra a liderança aberta do texto, que define uma expectativa de abertura, isso está claramente errado.

0 não fornece contraste, de modo que a segunda coluna é indiferenciada do restante. Em algumas circunstâncias, é isso que você deseja.

Os exemplos de "meia calha" nos números 5 e 6 redefinem a calha, tornando-a mais estreita. Na verdade, eles redefinem toda a grade horizontal e verticalmente, porque nesse caso a calha acaba sendo exatamente a mesma que o espaçamento entre linhas. Isso é ruim para o texto por si só, mas pode funcionar com a caixa. No 6, no entanto, você tem espaço em branco desproporcional em ambos os lados do texto em comparação com a parte superior e inferior. Isso é estranho e desconfortável, porque não faz sentido. # 5 seria preferível, porque o espaço em branco é distribuído de maneira mais uniforme. Pela mesma razão, o nº 3 é preferível ao nº 2.

No geral, eu concordo com Lauren e recomendo o # 3 como seu melhor tiro. Também é o melhor caso geral, independentemente do número de colunas.

Existem regras. Eles certamente podem ser quebrados se você tiver um bom motivo, mas a qualquer momento deve ser proposital, ousado e claramente "conforme planejado". Helvetica Black emparelhada com a Georgia funciona porque são diferentes; Trebuchet emparelhado com Verdana irrita os nervos, porque eles não são diferentes o suficiente. Uma grande caixa quadrada e vermelha com uma coluna e meia poderia funcionar; um cinza ligeiramente off não.

Eu voto na opção 3. As bordas da caixa cinza são as que definem a coluna verticalmente, para que essas linhas não possam ser violadas (sem uma razão). As calhas devem ser as mesmas para todas as três colunas; portanto, insira o texto dentro da caixa cinza. A inserção da opção 2 é um pouco profunda demais.

É o que estou acostumado a fazer impresso, para que pareça "certo" na Web também.

Se for para web design, eu recomendo não usar nenhum preenchimento na direção horizontal se você estiver preocupado com a consistência entre navegadores. Navegadores diferentes tratam divs e padding de maneira diferente o suficiente para que a apresentação possa quebrar.

Qualquer que seja o caminho, use apenas a margem horizontalmente. Isso exige a adição de uma classe ou duas para obter o layout exato desejado (por exemplo, um conjunto de margens para a div e outro para o parágrafo), mas a longo prazo, é mais confiável. O preenchimento vertical geralmente não é um problema.