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:
@import ‘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:
$base-font-size: 16px; $base-line-height: 24px;
ora aggiungiamo il mixin responsabile di tutta la magia che verrà dopo:
@include establish-baseline;
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à:
h1 {
@include adjust-font-size-to(36px);
margin: 0 0 rhythm(1, 36px) 0 0; //una riga sotto
}
h2 {
@include adjust-font-size-to(30px);
margin: rhythm(2, 30px) 0 rhythm(1, 30px) 0; //due righe sopra e una sotto
}
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?
