Dai Ritmo verticale al tuo testo con SASS e COMPASS

ritmo-verticale-compass
Tempo stimato di lettura: 2 minuti, 5 secondi
Pubblicato il 4 luglio 2014

Il titolo potrebbe far pensare ad una lezione di musica. In realtà il ritmo non si trova solo in musica, ma in ogni cosa che si muove. Come ad esempio i nostri occhi che riga dopo riga scorrono le pagine di un libro, il testo di un blog o una pagina web. Eh sì, anche l’occhio segue un ritmo che è scandito dal modo in cui le varie righe di un testo sono in armonia tra loro.

La volta scorsa abbiamo visto come questo è possibile definendo grandezze proporzionali grazie alla scala modulare, che ci permette di avere paragrafi, titoli e sottotitoli perfettamente rapportati in grandezza tra loro.

Oggi vediamo come è possibile, sempre tramite le librerie Compass a supporto di Sass, definire un rapporto di proporzione nell’interlinea verticale, tra una riga e l’altra, definendo margini e distanze che caratterizzeranno una lettura più scorrevole e piacevole del nostro sito web o testo stampato.

Importiamo dunque nel nostro foglio di stile le librerie Compass:

e utilizziamo la funzione messa a disposizione chiamata Vertical Rhythm. L’utilizzo è molto semplice, dovremmo definire tre parametri. Il primo e il secondo sono variabili che determinano il punto di partenza per far si che Compass elabori tutti i dati e si prenda carico dei calcoli matematici per noi per definire automaticamente spaziature e margini. Definiamo le due variabili che servono a porre le basi per i nostri calcoli:

ora aggiungiamo il mixin responsabile di tutta la magia che verrà dopo:

Vi ricordo che queste variabili ed il mixin vanno richiamati a monte del nostro foglio di stile.

Ora abbiamo tutti gli elementi per definire le spaziature tra i vari tag. Usiamo per l’esempio i tag H1 e H2. Ponendo il fatto che usiamo H1 per il titolo principale e H2 per il sottotitolo, vogliamo che il primo abbia un margine inferiore, mentre per il secondo tag un margine superiore ed inferiore. Il codice sarà:

lascio a voi il piacere di osservarne il risultato.

E se volessimo unire la scala modulare con il ritmo verticale? E’ possibile? Ci sono pareri controversi in merito. Io penso che possano essere unite senza problemi, anche perché l’una è per la grandezza dei font e l’altra per la loro spaziatura verticale. Quindi unirle insieme non fa altro che potenziare ulteriormente la bellezza della nostra tipografia. Un esempio di come è possibile unire le due tecniche è scaricabile da questo link.

E voi che metodi usate per migliorare la vostra tipografia?

Shares