CSS  »  Articoli  »  CSS fonts stampa e tipografia 

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!

Altri articoli

Altre guide

Altre newsletter