Grondaie - Imbottitura e margine per colonne con sfondo o bordo

Quali sono le linee guida di progettazione consigliate per le grondaie quando una colonna (o una scatola o qualsiasi modulo di layout) ha la sua forma chiaramente visibile perché ha il suo sfondo o bordo?

In genere si inserisce un po 'di spazio tra il bordo della scatola e il suo testo. Ma da dove evocare questo spazio? Con l'espansione della scatola, o riducendo il testo ?

Per illustrare, ecco alcune (ma non tutte) opzioni ...

(Inoltre, avrei potuto usare qualsiasi griglia con un numero qualsiasi di colonne e qualsiasi larghezza - questo serve solo come esempio - la vera domanda potrebbe essere posta ogni volta che un layout si trova a cavallo delle grondaie.)

Ho esaminato un mucchio di scritti su layout a griglia, ma finora ne ho visto solo uno che affronta la questione: Nudge Your Elements di Khoi Vinh.

Cosa mi sto perdendo? O semplicemente non esiste una linea guida chiara?

Dal momento che una delle motivazioni per i layout basati su griglia è quella di aumentare il senso di allineamento globale, suppongo che si possa sostenere che la decisione dipende da ciò che richiede un maggiore allineamento; la scatola o il suo contenuto?

A meno che non stia leggendo male, Khoi Vinh sostiene l'opzione 3 nel suo articolo.

Mi trovo ad andare avanti e indietro tra l'opzione 3 e l'opzione 6. Con l'opzione 3 la casella è allineata, ma il suo testo sembra angusto. Ma usando l'opzione 6, si finisce con né la casella né il testo allineati (anche se si potrebbe dire che il mezzo implicito tra il bordo del testo e il bordo della casella è la "cosa" che è ora allineata).

Oltrepassando il web, nessuna delle mie letture sulla progettazione di libri e i canoni della costruzione di pagine parla di questo problema. Vedo come funzionano i canoni per la stragrande maggioranza della stampa di libri con "lettere nere su sfondo chiaro", ma nel momento in cui si aggiunge colore a un layout di pagina (o si inverte uno schema in bianco e nero), la domanda di grondaia ritorna.

Mmm, immagino che la domanda sia; ci sono delle linee guida per scegliere tra le opzioni che ho illustrato - o mi sono avventurato al di là del diritto dei progettisti ed è solo questione di "ciò che appare e si sente bene" ?

Ogni volta che usi una griglia, devi usarla in modo coerente, tranne quando hai un elemento (di solito non più di uno in una determinata pagina) che la viola per una buona ragione - per farla risaltare o cambiare l'umore della pagina . Il contrasto deve essere audace e chiaramente intenzionale per far funzionare questo. (Per "lavoro" intendo che non sembra un errore.)

Una griglia, seguita rigorosamente, è in pace. C'è poca o nessuna tensione; le cose si presentano dove l'occhio si aspetta che si trovino e il lettore non è mai sorpreso o messo a disagio.

In questo caso, se il tuo sfondo viola un po 'la griglia, come in # 4, sembra un errore. È imbarazzante. La completa mancanza di grondaie affolla la scatola contro le altre colonne. Contro il principio aperto del testo, che stabilisce un'aspettativa di apertura, questo è chiaramente solo sbagliato.

0 non fornisce alcun contrasto, in modo che la seconda colonna sia indifferenziata dal resto. In alcune circostanze è quello che vuoi.

Gli esempi di "mezzaluna" in # 5 e # 6 ridefiniscono la grondaia, rendendola più stretta. In realtà ridefiniscono l'intera griglia in senso orizzontale e verticale, perché in questo caso la grondaia finisce per essere esattamente uguale alla spaziatura della linea. È un male per il testo da solo, ma può funzionare con la casella. In # 6, tuttavia, hai uno spazio bianco sproporzionato su entrambi i lati del testo rispetto alla parte superiore e inferiore. È imbarazzante e scomodo perché non ha senso. # 5 sarebbe preferibile, perché lo spazio bianco è distribuito in modo più uniforme. Per lo stesso motivo, # 3 è preferibile a # 2.

Nel complesso, quindi, sarei d'accordo con Lauren e consiglierei # 3 come miglior scatto. È anche il miglior caso generale, indipendentemente dal numero di colonne.

Ci sono delle regole Possono certamente essere spezzati se hai una buona ragione, ma ogni volta che lo fai devi essere propositivo, audace e chiaramente "come progettato". Helvetica Black in coppia con la Georgia funziona perché sono diverse; Il trabucco si accoppiava con le griglie di Verdana sui nervi perché non erano abbastanza diverse. Una grande scatola quadrata rossa che si estende su una colonna e mezza potrebbe funzionare; uno grigio leggermente sfocato no.

Io voto per l'opzione 3. I bordi della casella grigia sono ciò che definisce la colonna verticalmente, quindi quelle linee non possono essere violate (senza un motivo). Le grondaie dovrebbero essere le stesse per tutte e tre le colonne, quindi inserisci il testo all'interno della casella grigia. L'inserimento dell'opzione 2 è un po 'troppo profondo.

Questo è quello che sono abituato a fare nella stampa, quindi sembra "giusto" anche sul web.

Se questo è per il web design, consiglio vivamente di non utilizzare alcuna imbottitura in direzione orizzontale se si è interessati alla coerenza tra browser. Browser diversi trattano div e padding in modo abbastanza diverso da interrompere la presentazione.

Qualunque sia la tua strada, usa il margine solo in orizzontale. Richiede l'aggiunta di una o due classi per ottenere il layout esatto desiderato (ad esempio un insieme di margini per il div e un altro per il paragrafo), ma a lungo termine è più affidabile. L'imbottitura verticale non è generalmente un problema, tuttavia.