CSS  »  Articoli  »  CSS fonts stampa e tipografia 

Il concetto di ritmo verticale è relativamente nuovo nella tipografia per il web: inizialmente presentato in Compose to a vertical rythm a Dicembre del 2006 su 24Ways, è stato poi presentato in Setting type on the web to a baseline grid su A List Apart nell'Aprile del 2007.

L'argomento è tornato fortemente alla ribalta quest'estate grazie ad alcuni framework e librerie CSS, ovvero Blueprint e Tripoli di cui abbiamo parlato sul blog: entrambi infatti implementano il concetto di griglia verticale come fondamento per la tipografia.

Attribuire un ritmo verticale con i CSS non è un'operazione difficile e si tratta di un piccolo accorgimento che non può far altro che rendere le nostre pagine più armoniose e gradevoli alla consultazione. In questo breve appuntamento vedremo come sia possibile. Cominciamo subito.

Le basi per il ritmo verticale

Per creare un ritmo verticale la cosa principale è determinare una sorta di unità su cui basare il line-height e i margini di tutti gli elementi block-level di pagina, di modo che testo e spaziature rientrino perfettamente in una griglia verticale fittizia. Siamo pronti a presentare il primo esempio e un suo screenshot:

Figura 1 - Screenshot dell'esempio

La costruzione potrà essere agevolata da un'immagine di sfondo che aiuti visivamente a verificare il ritmo, come nel caso dell'esempio. Si tratta di una piccola PNG alta 18px, che riporta una linea azzurra spessa 1px. Proprio 18px è l'unità del ritmo verticale dell'esempio, pari a 1.5 volte il font-size di base che è di 12px.

Per la realizzazione del CSS dell'esempio, ho preso come punto di partenza l'HTML e il foglio di stile risultante dell'articolo Creare un CSS di base. In aggiunta, si sono sistemati margini e line-height di modo che questi siano multipli di 18px. Ecco il CSS dell'esempio per intero:

Altri articoli

Altre guide

Altre newsletter