Canaletas - Relleno y margen para columnas con fondo o borde

¿Cuáles son las pautas de diseño recomendadas para las canaletas cuando una columna (o cuadro, o cualquier módulo de diseño) tiene su forma claramente visible porque tiene su propio fondo o borde?

Por lo general, uno colocaría algo de espacio entre el borde del cuadro y su texto. ¿Pero de dónde evocar este espacio? ¿ Expandiendo el cuadro o reduciendo el texto ?

Para ilustrar, aquí hay algunas (pero no todas) opciones ...

(Además, podría haber usado cualquier cuadrícula con cualquier número de columnas y cualquier ancho, esto solo sirve como ejemplo, la pregunta real podría formularse cada vez que un diseño se extiende a horcajadas en las canaletas).

He leído un montón de escritos en diseños basados ​​en cuadrículas, pero hasta ahora solo he visto uno que aborda el asunto: Empuja tus elementos por Khoi Vinh.

¿Qué me estoy perdiendo? ¿O simplemente no hay una directriz clara?

Dado que una de las motivaciones para los diseños basados ​​en la cuadrícula es aumentar el sentido de alineación global, supongo que uno podría argumentar que la decisión depende de lo que exige más alineación; la caja o su contenido?

A menos que esté leyendo mal, Khoi Vinh argumenta a favor de la opción 3 en su artículo.

Me encuentro yendo y viniendo entre la opción 3 y la opción 6. Con la opción 3, el cuadro está alineado, pero su texto se siente apretado. Pero usando la opción 6, uno termina sin cuadro ni texto alineado (aunque uno podría decir que el medio implícito entre el borde del texto y el borde del cuadro es la 'cosa' que ahora está alineada).

Yendo más allá de la web, ninguna de mis lecturas sobre el diseño de libros y los cánones de la construcción de páginas habla sobre este tema tampoco. Puedo ver cómo funcionan los cánones para la gran mayoría de la impresión de libros de 'letras negras sobre fondo claro', pero en el momento en que uno agrega color a un diseño de página (o invierte un esquema en blanco y negro), la pregunta del canal regresa.

Mmm, supongo que la pregunta es; ¿Existen pautas para elegir entre las opciones que ilustré, o me he aventurado más allá de la ley del diseñador y se trata solo de 'lo que se ve y se siente bien' ?

Cada vez que use una cuadrícula, debe usarla de manera consistente, excepto cuando tenga un elemento (generalmente no más de uno en una página determinada) que lo viole por una buena razón: para que se destaque o cambie el estado de ánimo de la página . El contraste debe ser audaz y claramente deliberado para que esto funcione. (Por "trabajo" quiero decir que no parece un error).

Una cuadrícula, estrictamente seguida, está en paz. Hay poca o ninguna tensión; las cosas aparecen donde el ojo espera que estén, y el lector nunca se asusta ni se siente incómodo.

En este caso, si su fondo viola la cuadrícula un poco, como en el n. ° 4, parece un error. Es incómodo. La completa falta de canaletas aprieta la caja contra las otras columnas. Contra la apertura abierta del texto, que establece una expectativa de apertura, esto es claramente incorrecto.

0 no proporciona contraste, de modo que la segunda columna no se diferencia del resto. En algunas circunstancias eso es lo que quieres.

Los ejemplos de "medio canalón" en # 5 y # 6 redefinen el canal, haciéndolo más estrecho. Realmente redefinen toda la cuadrícula horizontal y verticalmente, porque en este caso la canaleta termina siendo exactamente igual al espacio entre líneas. Eso es malo para el texto en sí mismo, pero puede funcionar con el cuadro. Sin embargo, en el n. ° 6, tiene un espacio en blanco desproporcionado a cada lado del texto en comparación con la parte superior e inferior. Eso es incómodo e incómodo porque no tiene sentido. # 5 sería preferible, porque el espacio en blanco se distribuye de manera más uniforme. Por la misma razón, el # 3 es preferible al # 2.

En general, estaría de acuerdo con Lauren y recomendaría # 3 como su mejor oportunidad. También es el mejor caso general, independientemente del número de columnas.

Hay reglas. Ciertamente pueden romperse si tiene una buena razón, pero cada vez que lo haga debe ser decidida, audaz y claramente "según lo diseñado". Helvetica Black emparejado con Georgia funciona porque son diferentes; Trebuchet emparejado con rejas Verdana en los nervios porque no son lo suficientemente diferentes. Una caja grande, cuadrada y roja que abarca una columna y media podría funcionar; un gris ligeramente apagado no lo hará.

Voto por la Opción 3. Los bordes del cuadro gris son los que definen la columna verticalmente, por lo que esas líneas no se pueden violar (sin una razón). Los canales deben ser los mismos para las tres columnas, así que inserte el texto dentro del cuadro gris. El recuadro de la opción 2 es demasiado profundo.

Eso es lo que estoy acostumbrado a hacer en forma impresa, por lo que también se ve "bien" en la web.

Si esto es para diseño web, recomendaría no usar ningún relleno en la dirección horizontal si le preocupa la coherencia entre navegadores. Los diferentes navegadores tratan los divs y el relleno de forma lo suficientemente diferente como para que la presentación pueda romperse.

Sea cual sea su camino, use el margen horizontalmente. Requiere agregar una clase o dos para obtener el diseño exacto que desea (por ejemplo, un conjunto de márgenes para el div y otro para el párrafo), pero a la larga, es más confiable. Sin embargo, el relleno vertical generalmente no es un problema.