La chiamano la proporzione divina. Sapete cos’è? È la sezione aurea. Tranquilli, questo articolo non vuole essere una lezione di matematica. Per fortuna abbiamo dei tool che automaticamente fanno i calcoli per noi. È bene però dare qualche cenno su che cos’è la sezione aurea e perché è utile per migliorare la leggibilità dei nostri siti web o testi stampati.
La sezione aurea è una progressione numerica che stabilisce il rapporto tra due lunghezze diseguali. Questi numeri in successione, rapportati tra di loro, danno come risultato sempre lo stesso numero ovvero 1,618 (approssimato a tre cifre dopo la virgola).
Il fatto che il risultato sia sempre lo stesso determina che le due distanze sono in rapporto tra di loro in maniera armoniosa e naturale, poiché tale numero lo possiamo trovare in natura e possiamo tranquillamente affermare che è il numero che regola le proporzioni dell’intero universo.
Cosa c’entra la tipografia in tutto questo? Beh, prendiamo la grandezza in pixel di un tag p. Questo sarà più piccolo di un tag H2 che a sua volta è più piccolo di un tag H1. Ecco quindi che se riuscissimo a fare in modo che titolo, sottotitolo e paragrafo fossero proporzionati secondo questa formula divina, garantiremmo ai nostri occhi una piacevole grafica ed una lettura scorrevole.
C’è un però. La proporzione tra gli elementi cresce a dismisura. Questo perché la successione dei numeri che compongono questa formula è formata dalla somma del risultato con il numero precedente. Quindi partendo da 1 avremo:
1, 2, 3, 5, 8, 13, 21, 34, 55, 89 ecc…
Se dividiamo, da questa successione, due numeri vicini tra loro otterremo sempre 1,618. Possiamo affermare dunque che sono perfettamente equilibrati tra loro.
Tale sequenza incrementale non ci ricorda la grandezza in pixel che aumenta man mano da un tag H6 fino ad H1? Come possiamo calcolarne la perfetta proporzione?
Ci viene in aiuto la scala modulare. Tale formula (usata ancora molto da architetti e designer) ci permette, dato un numero di partenza in pixel, di calcolare la perfetta distanza tra i nostri tag. Come dicevamo prima però, se partissimo solamente da un elemento base di 16px, avremmo una sproporzionata crescita incrementale che ci porterebbe ad avere dei tag titolo più grandi del nostro stesso monitor o libro. Ecco quindi che la scala modulare permette di colmare gli spazi tra un numero e l’altro definendo un’altra scala che si interseca con la nostra. Questo calcolo viene fatto in automatico, noi dobbiamo solo stabilire un secondo numero (definito numero importante) che servirà alla scala modulare per determinare la sequenza che colmerà i nostri gap. Questo numero lo scegliamo noi sulla base delle nostre preferenze. Possiamo provarne un po’ fino a trovare la scala migliore; ma per non lasciare le cose al caso, potremmo stabilire che questo numero importante sia la larghezza in pixel del nostro layout, o la larghezza della singola colonna del nostro sistema a griglia.
La seguente immagine mostra proprio le due scale che si intersecano tra loro (quella rossa e quella blu) colmando i gap altrimenti troppo esponenziali. Tale immagine è chiamata il Modulor di Le Corbusier e dimostra che le proporzioni del nostro corpo seguono la sezione aurea:
Come potete vedere, se avessimo usato solo la scala rossa o la scala blu avremmo avuto dei numeri con una distanza tra loro troppo esponenziale. E’ bello invece come le due scale si compensino per formarne una unica e proporzionata.
Facciamolo anche noi nel nostro sito web! Armiamoci della libreria SASS per il calcolo della scala modulare scaricandola ed installandola seguendo le istruzioni di questo link.
Ora importiamola nel nostro progetto e usiamo i REM come unità di misura e la sezione aurea come proporzione preferita:
$ms-base: 1rem 1.25rem; // Numero di base e numero importante scelto dopo alcune prove di stile $ms-ratio: golden; // Il tipo di proporzione che in questo caso è la sezione aurea ma possiamo sceglierne altre
ecco fatto! Ora non ci resta che applicare ai nostri tag i numeri in sequenza presi dalla scala che deriva dai dati da noi inseriti:
body{ font-size: ms(0); } //ms sta per Modular Scale e il valore tra parentesi indica quale numero della scala vogliamo usare per quel tag
h5{ font-size: ms(1); }
h4{ font-size: ms(2); }
h3{ font-size: ms(3); }
h2{ font-size: ms(4); }
h1{ font-size: ms(5); }
Come sempre è più il dire che il fare. Dovevo motivarvi in qualche modo, no?
Ecco altre risorse utili:
Ora che avete in mano questa proporzione, potete creare stili tipografici…divini!
