Ritmo verticale nella 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:

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:

Gli effetti del ritmo verticale, oltre che sul primo esempio, sono verificabili
anche nel secondo esempio in cui il CSS usato è lo stesso,
ma la presenza di due colonne illustra bene la perfetta sintonia verticale.

Un primo approccio da migliorare

Nel primo e nel secondo esempio
abbiamo visto come sia possibile attribuire facilmente un ritmo verticale, partendo da un CSS
di base molto semplice. Nel farlo, però, abbiamo introdotto un limite non indifferente:
l'uso dei pixel per il dimensionamento di font-size e line-height.

In diversi articoli qui nella sezione CSS e sul blog ho adottato e consigliato il
dimensionamento relativo dei font per un semplice motivo: si tratta
di una scelta molto più attenta all'utente, anche se talvolta sacrifica il design.

Trasformare una pagina in cui font, line-height e margini sono dimensionati in pixel
in una in cui si usa un dimensionamento relativo (ovvero percentuali ed em) non è poi così
difficile: si tratta solo di munirsi di pazienza e magari... di calcolatrice.

Ecco quindi il terzo esempio, in cui font e spaziature
sono ridimensionabili. È ridimensionabile anche la griglia, realizzata con
un'immagine e non come sfondo, così da accompagnare il ritmo verticale: l'effetto
l'ho trovato ben illustrato nel tutorial CSS resizable underlines.

Veniamo quindi al CSS dell'esempio, che riporto di seguito per intero:

Per prima cosa, c'è da evidenziare che il font-size del body è impostato su 100.01%, che sarà grande 16 pixel
con dimensionamento medio impostato nel browser.
Il motivo di questo valore è illustrato nell'articolo creare un CSS di base.
Le varie misure per i titoli, come d'abitudine, sono impostate in em; per la tipografia, un
em corrisponde alla dimensione del font di base: il valore numerico è quindi da intendersi come
fattore moltiplicativo. Specificare un titolo h1 di 2.4em significa quindi avere titoli h1
grandi 2.4 volte la dimensione del font del body.

Per quanto riguarda il line-height, questo viene specificato senza unità di misura per evitare
propagazione e moltiplicazioni indesiderate: un approfondimento in merito si può trovare nell'articolo
Capire e usare il line-height.
I margini infine vengono specificati in em, così da accordarsi
con l'unità di misura del font e consentire una scalibilità al variare della dimensione del carattere impostato nel
browser dell'utente.

Calcolatrice alla mano, iniziamo a vedere come si sono ricavati i valori per line-height e margini,
partendo dal titolo h1. Basta considerare che 1em è la dimensione del font size del body, e 1.5em è la misura
del ritmo verticale a cui margini e line-height dovranno accordarsi. Avendo impostato un font-size di 2.4em,
quello che vorremo ottenere è un line-height che sia multiplo di 1.5: in questo caso che sia pari a 3 volte
la dimensione del font del body e il doppio del ritmo verticale. Otterremo quindi il line-height dell'h1
dividendo 3 per il suo font-size, quindi 3 : 2.4 = 1.25, è questo il valore
del line-height che ci serve.

Per ottenere i margini invece si procederà a dividere il valore 1.5 (ritmo verticale riferito al font-size
del body) per il font-size, quindi 1.5 : 2.4 = 0.625em.

Analogamente si procederà per gli altri titoli: per l'h3 ad esempio, valori di margini e line-height
si ottengono entrambi dividendo 1.5 per 1.35, ovvero ritmo verticale diviso font-size.

Questo il procedimento con cui si sono calcolati altezze di linea e margini dell'esempio,
in cui si può notare che il testo segue il ritmo verticale ridimensionando il font. Ora è tempo
di conclusioni.

Approfondimenti e conclusioni

Il ritmo verticale è un piccolo accorgimento tipografico che non può far altro che aggiungere
armonia e gradevolezza di lettura alle nostre pagine. In questo articolo abbiamo portato ulteriormente
avanti il discorso cominciato con gli articoli Armonizzare lo spazio bianco e Creare un CSS di base.
Per quanto riguarda il ritmo verticale, ecco alcuni approfondimenti:

• Compose a vertical rythm su 24Ways
• Setting type on the web to a baseline grid su A List Apart
• Incremental leading di Mark Boulton
• CSS resizable underlines per costruire griglie verticali ridimensionabili
• Baseline rythm calculator genera un CSS essenziale per il ritmo verticale
• Syncotype your baselines, una pratica bookmarklet per anteporre
  una griglia a qualsiasi pagina

Si tratta di risorse che meritano una lettura attenta o una prova sul campo, da usare magari come complemento a quest'articolo.
Esempi e CSS qui visti sono disponibili per il download. Alla prossima!