Ritmo verticale / griglia di base nel Web Design

Di recente ho letto alcuni articoli sull'importanza di un buon ritmo verticale / utilizzando una griglia di base per una buona tipografia nel web design. Ho deciso di provare a utilizzare una griglia di base, come la griglia 960 nella foto sotto, come immagine di sfondo per un tema di web design / WordPress su cui sto attualmente lavorando.

Sto trovando molto difficile allineare tutto correttamente nella griglia. Sono riuscito a ottenere tutto all'interno della griglia verticale alla dimensione del testo predefinita (16px), ma quando inizio a fare confusione con la dimensione delle intestazioni, aggiungendo immagini, ecc., Gli elementi non rimangono sempre allineati correttamente sulla griglia.

Vorrei sapere come migliorare la mia tipografia usando il ritmo verticale. Qualcuno ha qualche consiglio o tecnica che dovrei usare?

La griglia di base nel web design è un enigma accademico necessario ma per lo più poco pratico dal punto di vista matematico. Poiché i CSS non hanno un concetto di base per il tipo, è tecnicamente impossibile ottenere una linea di base corrispondente.

Puoi avvicinarti alla spaziatura delle cose, ma alla fine finisci con qualcosa che può avere senso quando si osservano i numeri, ma probabilmente è visivamente spento e finisci per allontanarti dalla formula per assicurarti che le cose appaiano giuste.

Quindi, in sintesi, un ritmo visivo è importante, ma crealo dal tuo intestino, non alcune equazioni che ti faranno impazzire implementando correttamente sul web.

Per inciso, nota che il concetto di una griglia di base viene dal mondo del design di stampa ... in particolare layout multi-colonna come in un giornale in cui desideri che il tipo si allinei da una colonna all'altra come preferenza. Per semplificare la composizione di quel tipo di pubblicazione, una griglia di base ha senso ed è relativamente facile da implementare nel mondo delle applicazioni DTP.

Il ritmo verticale non è difficile da implementare, soprattutto se si inizia con un ripristino CSS . Mi sono imbattuto in questo link http://24ways.org/2006/compose-to-a-vertical- arhythm qualche tempo fa, e da allora ho usato la tecnica in tutti i miei progetti.

Quello che ho scoperto è che dopo aver lavorato con un set "fisso" di dichiarazioni di tipo nel mio file CSS (h1 - h6, p, ecc. - In particolare, dimensioni, altezza della linea, margini inferiori) è molto facile da distribuire.

Ecco un'immagine di sfondo che mi ha aiutato a vedere le cose in modo un po 'più chiaro ... specialmente quando stavo usando il ritmo vert.

Può essere difficile da vedere, ma quando viene ripetuto come immagine di sfondo: vedrai una griglia 20x20.

HTH

Nota: mi piace la tipografia nei siti che hanno usato questa tecnica meglio di quelli che non lo hanno fatto. In entrambi i casi, tuttavia, sembra esserci sempre un elemento o due che devono "imbrogliare il sistema" per apparire "giusti". Ho anche scoperto che prestare attenzione all'altezza della linea complessiva (diciamo 18px per una base di caratteri 12px) rende l'impostazione dei margini e il riempimento intorno a immagini, intestazioni grafiche e simili piuttosto semplici (18px). Inoltre ... l'impulso di calcolare tutto scompare ... inizierai a notare un "ritmo verticale" sul layout e sarai in grado di estrarre il giusto riempimento / margine / altezza della linea da un elenco molto breve di valori nella tua testa.

Questo bellissimo articolo su Smashing Magazine sulla linea di base e sul ritmo verticale ti dà un'idea sia dell'importanza delle linee di base nel web design sia di come implementarle nel tuo CSS. Utilizza la dimensione del carattere, l'altezza della linea, il riempimento e il margine sugli elementi html predefiniti per allineare tutto alla griglia della linea di base.

Per aiutare ad abbinare tutto alla griglia, un'immagine di sfondo è molto utile, come suggerisce Dawson.

Ho seguito questa tecnica per i miei ultimi disegni e penso che ripaghi davvero.