Le abilità tipografiche di un designer — oggi che tutti si svendono come tali facendo siti web per €5 — sono fra le più sottovalutate, nonostante il web sia al 95% tipografia.

Al momento stai leggendo e quello che leggi, per risultarti piacevole, oltre che essere scritto bene (e quindi piacerti intellettualmente parlando) deve affascinare il tuo occhio, il quale senza che tu te ne accorga è alla ricerca di proporzionalità, di canoni di bellezza umani. Questa è tipografia.

Sembrerebbe esagerata come introduzione, parliamo addirittura di “canoni di bellezza”, ma continuate la lettura per scendere maggiormente nel dettaglio e stupirvi ancora di più.

Falsi miti

Molti pensano che tipografia significhi semplicemente scegliere un font e dargli una dimensione. Dopo aver letto questo articolo ne uscirete con una visione abbastanza diversa.

Per quello che ho imparato io finora, e ho ancora molto da imparare, la tipografia è ben altro. Può essere considerata un’arte.

Rispettare le Proporzioni

Alla base dell’arte classica, quella che più di ogni altra ha definito i canoni di bellezza, c’erano le proporzioni. Proporzionale è bello, proporzionale è piacevole per l’occhio umano. Il nostro occhio, anche se non ce ne accorgiamo, è alla ricerca di proporzioni e quando le trova questo risulta piacevole.

Tutto questo si applica benissimo anche all’arte dei caratteri! L’occhio di chi legge è alla ricerca di proporzionalità, continuamente.

Passiamo ai fatti.

Fondamentalmente sono 3 i passi per ottenere consistenza e proporzionalità:

• Scegliere un numero, una sorta di costante, che potremmo chiamare il nostro coefficiente di proporzionalità
• Creare una scala di proporzionalità
• Rispettarla!

Scegliamo il nostro coefficiente di proporzionalità

Non è un compito difficile. Io di solito uso 1.5, che è il numero più facile da ricordare e che più si avvicina al 1.6180 che è la perfezione (vedi Sezione Aurea su wikipedia per approfondire, fondamentalmente è “il numero segreto della bellezza classica”).

Creare una scala di proporzionalità

Abbiamo il nostro numero (1.5), adesso dobbiamo fare in modo da avere tanti altri numeri (font-size) proporzionali ad esso.

Proviamo a creare velocemente una scala. La font-size basilare dalla quale partiamo sono i 16px che è la grandezza del testo di default su tutti i maggiori browser.

Ecco la scala:

• 16px
• 16px * 1.5 = 24px
• 24px * 1.5 = 36px
• 36px * 1.5 = 54px

Applicarla

L’abbiamo creata, adesso usiamola. Semplicemente utilizziamo queste precise misure per i font a seconda dell’importanza degli elementi. Per esempio agli <h1> assegneremo font-size 54px.

Regolare la line-height

La line-height è un valore tanto sottovalutato quanto importante. È la distanza che separa le righe di un testo.

Un buon valore da assegnarle è il 150% rispetto la misura del font (per trovare il valore moltiplicare la misura del font per 1.5).

Vi mostro un esempio.

Destra o sinistra?

Abbinare correttamente i font

I font sono molto simili ai colori. Molti colori sono belli e affascinanti di per se, ma perdono se accoppiati con altri non seguendo un criterio stilistico.

Lo stesso vale per i font. Possiamo avere due font, bellissimi separatamente, ma che abbinati non rendono giustizia.

In questo settore non esistono delle vere e proprie “regole” ma ci si affida molto al gusto personale.

Tuttavia ci sono delle soluzioni, già ampiamente testate e “garantite”. Insomma, definiamoli pure dei “classici”, degli abbinamenti che, pur non essendo molto creativi, non falliscono mai.

Se vi volete rifare ad abbinamenti del genere vi consiglio di affidarvi a risorse come questo PDF.

Altrimenti, se volete sperimentare, vi consiglio questa utility.