Correzioni ottiche nel graphic design

Hai mai notato come spesso nel graphic design, magari in alcuni font o in alcuni progetti di logo design, ci siano degli elementi che non sono allineati perfettamente in modo geometrico?

Elementi che dovrebbero avere la stessa altezza, che sembrano avere la stessa altezza, come queste lettere nel Futura:

Ma che, se osservati meglio, magari con l’aiuto delle griglie, non hanno per niente la stessa altezza. O dimensione, spessore, larghezza, peso, eccetera.

Magari non te ne sei mai accorto o magari invece ci hai già riflettuto sopra più di una volta. In ogni caso tutto ciò è dovuto alle cosiddette correzioni ottiche.

Ma cosa sono le correzioni ottiche? Perché sono così importanti nel graphic design, nella tipografia o nella progettazione di loghi? E perché, per chi ha l’occhio ben allenato, sono elementi che garantiscono una buona o una cattiva qualità progettuale nel design?

Questo articolo vuole essere una guida unica e senza alcun paragone con niente che tu possa trovare cercando su Google (anche in inglese), sulle correzioni ottiche nel graphic design. Perché si usano, come si usano, insomma, cercherò di rispondere con questo articolo a tutte le domande che ci si può fare a riguardo.

Io stesso, nelle settimane che ho impiegato a scrivere questo articolo, mi sono posto molte di queste domande e ho cercato di fare ricerche in lungo e in largo per darmi delle risposte soddisfacenti. Come sempre, tutto quello che ho imparato, lo riverso qui per condividerlo con te! :)

Quindi, prima di tutto, cerchiamo di capire che cosa cavolo sono ste correzioni ottiche. Pronto?

Partiamo!

Che cosa sono le correzioni ottiche

Per correzioni ottiche si intende tutti quegli accorgimenti, quelle modifiche che vengono fatte ad alcuni elementi grafici per garantire una maggior armonia, un allineamento più preciso o un effetto ottico più piacevole alla vista.

In inglese gli accorgimenti nella tipografia (da dove nascono la maggior parte delle correzioni ottiche) prendono il nome di Overshooting. 

Se cerchi Overshoot su Google o Bing, però, troverai una serie di articoli e definizioni di un qualche procedimento in ambito economico che poco c’entra con il significato del termine in ambito grafico.

Ma anche cercando cose come “overshooting typography” troverai davvero pochissimo e questo perché tutti gli argomenti di cui ti sto parlando in questo articolo sono rarissimi da trovare e sono convinto che i tre quarti dei designer di tutto il mondo ne sanno poco o niente a riguardo.

Molti designer tendono infatti a dare le correzioni ottiche come un qualcosa di assodato o, addirittura, a lavorare senza farci caso, mentre coloro che, invece, conoscono a fondo la materia, si tengono ben strette le loro conoscenze; quasi come se si trattasse di un segreto di Stato o di un qualche trucco di prestigio.

Io, ovviamente, non sono così. Amo condividere! :)

L’overshoot

Ritornando all’argomento, una definizione abbastanza precisa che ho trovato su About.com di Overshooting in ambito tipografico è questa che ti scrivo ora (ovviamente tradotta):

La maggior parte delle lettere è solitamente compresa tra la linea di base e la linea di altezza dell’occhio (la x-height) o del corpo (l’altezza delle lettere maiuscole).

L’overshoot è dove le parti curve delle lettere (quali ad esempio la O o la n) vanno leggermente oltre o al di sotto di quelle linee.

Questo piccolo overshoot (letteralmente “oltrepassare, quindi si può definire come “passaggio oltre”) crea un’illusione ottica tale che le lettere con parti curve e quelle con sommità piatte appaiono della stessa altezza.

Questa definizione, però, si dimentica di dire che non sono solo le parti curve delle lettere ad avere un overshoot ma anche le punte delle lettere, come nella A o nella v, come si vede da questa immagine:

In Italiano non so bene come si definisca questa cosa quindi continuerò a chiamarla con il nome inglese di overshoot d’ora in poi.

Comunque sia, le correzioni ottiche del graphic design nascono quasi tutte dalle necessità di armonia visiva della tipografia. Ma perché si usano le correzioni ottiche? Perché c’è bisogno di questi espedienti? C’entra il fatto che, in realtà, noi non vediamo veramente con gli occhi.

Perché le correzioni ottiche sono fondamentali

Sostanzialmente, gli esseri umani, non vedono veramente quello che c’è. O perlomeno non proprio l’esatta copia della realtà. Questo perché, quello che vediamo attraverso i nostri occhi viene mediato dai recettori del nostro cervello e dal cervello stesso che ce ne dà una rappresentazione in base alle nostre conoscenze ed esperienze.

Non voglio fare un trattato scientifico né una pappardella psicologica o filosofica, quello che importa è che spesso il nostro cervello viene ingannato da quello che vede.

Le illusioni ottiche ne sono un esempio chiaro e lampante e la stessa Teoria della Gestalt (di cui ho parlato in questo articolo e che è fondamentale nel design) è basata sulla consapevolezza che il nostro cervello rielabora e ricostruisce quello che riceve dagli occhi.

Proprio per questo le correzioni ottiche sono fondamentali.

Avendo la consapevolezza di come il nostro cervello reagisce alle forme e ai rapporti tra le forme, noi designer possiamo sfruttare questa conoscenza per creare font, loghi o elementi grafici che abbiano, grazie alle correzioni ottiche, la giusta armonia.

Ed è proprio l’armonia, il far sembrare qualcosa come giusto, come preciso, anche se poi, in realtà, se si guarda bene non lo è, che fa si che le correzioni ottiche siano essenziali.

Infatti, l’armonia non è una sequenza matematica di forme e misure, ma è un effetto di insieme che può essere raggiunto anche attraverso vie differenti non sempre in linea con i dettami della perfezione geometrica.

Perché progettare seguendo la geometria non basta?

Utilizzare la geometria quando si progetta, ad esempio costruendo delle griglie (qui una guida a riguardo), è di assoluta importanza per un designer ma, spesso, non basta a garantire una progettazione di alta qualità.

Perché? Già, sono di nuovo ste caspita di correzioni ottiche!

Non ci credi? Allora ti faccio un indovinello, che ne dici?

Sapresti dirmi in quale di queste tre opzioni il quadrato, il cerchio e il triangolo ti sembrano uguali tra loro? Non stare a pensarci troppo e non metterti a fare misure o confronti. Rispondi di getto!

Credo di sapere la tua risposta: la 2, vero?

In realtà è l’unica opzione in cui gli elementi non hanno niente di uguale. Nell’opzione 2, infatti, tutti gli elementi hanno una diversa altezza e una diversa area.

Nella prima opzione, invece, gli elementi hanno tutti la stessa altezza, nella terza opzione di uguale hanno l’area. Quindi, geometricamente parlando, l’opzione numero 2 è l’unica in cui gli elementi non sono uguali tra loro!

Eppure il nostro cervello ci suggerisce che, non è vero! Che è nell’opzione 2 che ci sono quelli davvero uguali tra loro! Tutto merito delle correzioni ottiche. Vediamo nel dettaglio perché.

Come fa un designer a “prendere per il c**o” un cervello

Che detta così sembra una cosa brutta e invece non lo è. Però è sostanzialmente la verità: con le correzioni ottiche un designer “frega” il cervello dell’osservatore.

Ed è una cosa bella perché sennò vedremmo libri impaginati con font che ci sembrerebbero tutti storti e loghi assolutamente non accettabili a livello visivo.

Ma, tornando agli elementi di prima, il quadrato, il cerchio e il triangolo, partiamo prima dall’analizzare la situazione dell’opzione 1, ovvero quando i tre elementi hanno realmente la stessa altezza:

Il cerchio e il triangolo sembrano avere dimensioni diverse rispetto al quadrato e in questo caso si nota ancora di più:

Ho messo due quadrati per lato perché i quadrati non hanno bisogno di avere correzioni ottiche non avendo parti curve o punte.

Riprendendo il confronto quadrato-cerchio-triangolo, potremmo pensare che il problema sia che questi tre elementi non hanno la stessa area e così si arriverebbe all’opzione 3, questa qui:

Osservando questo confronto, la prima cosa che ci infastidisce è la base del triangolo: è enorme! Va rimpicciolita! E lo si fa allineando la base con quella del quadrato (ricordi? le parti “piatte” non hanno bisogno di correzioni ottiche!), così:

Una volta rimpicciolita la base del triangolo ci sono ancora alcune cose che infastidiscono: la punta del triangolo che fuoriesce e l’altezza del cerchio che, pur non dovendo essere la stessa del quadrato, così com’è ora è troppo alta. Correggiamo tutto!

Ho inserito l’intero procedimento di correzione ottica all’interno di questa gif:

Ecco. adesso si che ci siamo!

Questo è l’allineamento standard tra forme geometriche semplici. Questi allineamenti, con i rispettivi overshoot, sono alla base dello studio della tipografia.

Proporzioni di questo tipo si riscontrano infatti anche in lettere come ad esempio la I, la O e la A, come viene mostrato in questa animazione presa dal sito della Frere-Jones Type:

La correzioni ottiche, però, specialmente nella tipografia, non sempre vengono fatte solo con le altezze ma anche con gli spazi bianchi tra gli elementi grafici.

Gli spazi bianchi tra gli elementi grafici, il kerning

La gestione degli spazi in orizzontale tra gli elementi grafici è di fondamentale importanza nella tipografia e prende il nome di kerning.

Il kerning (in italiano crenatura), viene utilizzato, nella creazione di un font, per rendere più armoniosa la composizione e più facile la lettura, alcune lettere, come la A e la V o la A e la T, possono essere avvicinate tra di loro maggiormente rispetto alle altre lettere senza sovrapporsi.

Questo fa si che si venga a creare una più fluida composizione.

Per capire come funziona, possiamo tornare alle forme base e vedere come rendere più visivamente coerenti queste due composizioni. Poiché il cerchio e il triangolo non sono quadrati (ma và!) creano moltissimo spazio bianco attorno a loro e quindi ai nostri occhi creano un “errore” nella crenatura tra questi elementi, laddove invece tra i quadrati non c’è nessun errore visivo.

Una possibile soluzione è quella di ridurre il kerning attorno alle due forme di tanto quanto è l’overshoot in verticale, in questo modo:

Voglio però sottolineare che non ci sono formule matematiche o regole che determinano quanto debba essere di volta in volta la crenatura giusta o l’overshoot giusto in un font così come per qualsiasi elemento grafico.

Se così fosse non ci sarebbe bisogno degli occhi e dell’esperienza di un graphic designer o di un type designer!

Basterebbe schiacciare un pulsante di un computer e si farebbe tutto in automatico!

E invece no! E per me è proprio questo il bello del design: il fatto che siano le “imperfezioni” a rendere perfetto un progetto!

Prima di concludere questo articolo voglio fare due piccoli approfondimenti riguardanti le correzioni ottiche nel logo design e nella tipografia.

Le correzioni ottiche nella tipografia

Le correzioni ottiche con le sistemazioni dell’overshoot e del kerning sono degli elementi di fondamentale importanza nella progettazione di un carattere.

Un buon utilizzo delle correzioni ottiche è spesso quello che contraddistingue un font di qualità da un font scarso (leggasi font gratuiti).

Le correzioni vengono applicate in molti modi:

• Con l’overshooting verticale (quello che abbiamo visto prima)
• Con la sistemazione della crenatura o kerning
• Con la correzione degli spessori delle aste
• Con la differenziazione di spessori, overshoot e kerning al cambiare del peso del carattere (dal Bold al Thin tutte le lettere hanno differenti dimensioni, raccordi e struttura ma con l’obbiettivo di apparire uguali)
• Con la correzione di cravatte e colli (gli agganci tra gli elementi di una singola lettera, come tra la parte curva della d e la sua asta verticale)
• Con il bilanciamento delle dimensioni (ad esempio, lo sai che per fare un 8 fatto bene la parte curva inferiore solitamente è leggermente più grande? Questa cosa si nota ancora di più nel 5: la parte inferiore, essendo un cerchio, occupa meno spazio di un quadrato e quindi va fatta più grande per non creare un 5 disarmonico)

Insomma, come puoi ben vedere non è per niente facile far si che un font sia armonico, facilmente leggibile e bello da vedere. E questo è uno dei motivi per cui i font di qualità si pagano.

Non posso approfondire ognuno di questi argomenti in questo articolo perché risulterei più prolisso di quanto io non sia già di mio eheh!

Sicuramente tornerò su questi temi altre volte (ad esempio qui trovi un articolo tutto dedicato al kerning e a come utilizzarlo al meglio) ma per ora ti voglio semplicemente mostrare, come esempio di quel che ho detto, quanto sia importante un buon utilizzo delle correzioni ottiche nella tipografia.

Esempio pratico: il geometricissimo Futura

Parliamo del Futura. Il Futura, creato nel 1928 da Paul Renner, oltre ad essere uno dei font preferiti dai designer e uno di quelli storicamente più importanti, è stato il primo font basato sulle regole geometriche al 100 %.

O almeno, così era come voleva procedere Paul Renner. Pochi sanno che la prima versione creata del Futura, basata al cento per cento sulle forme geometriche, faceva schifo. Era troppo geometrica!

Renner si accorse presto che per creare un font di qualità avrebbe dovuto fare delle correzioni ottiche.

Ti ho fatto questo esempio per farti capire come, persino il font geometrico per eccellenza, cioè il Futura, è in realtà il prodotto di importantissime correzioni ottiche e di un sapiente utilizzo dell’overshoot.

Se osservi l’immagine qui sotto, ho evidenziato come la struttura geometrica, apparentemente perfetta, del Futura non sia altro che un inganno della mente, generato a partire da una radicale differenziazione di spessore, kerning e overshoot al cambiare del peso.

Le correzioni ottiche nel logo design

Le correzioni ottiche sono solitamente applicate alla tipografia, come visto, ma, ovviamente, gran parte dei loghi partono proprio da lì: dalle lettere. Ed è proprio in questi casi in cui si possono trovare le correzioni ottiche più esplicative.

Il caso più importante tra quelli recenti è sicuramente quello del nuovo logo di Google (di cui avevo parlato qui).

Il nuovo logo di Google è un logo composto da una scritta, una scritta fatta con un font geometrico, creato appositamente per il nuovo brand di Google.

È quindi l’esempio migliore che si possa utilizzare. Anzi, è proprio grazie a questo nuovo logo e ad alcune discussioni che sono scaturite in giro per il web che ho deciso di scrivere questo articolo sulle correzioni ottiche.

Come puoi ben vedere, il logo di Google è costruito a partire dalle forme geometriche e dalla purezza matematica ma con l’aggiunta delle correzioni ottiche per migliorare la leggibilità, come dicono loro stessi:

Se il logo di Google fosse stato progettato per essere geometricamente “perfetto”, avrebbe fatto schifo. E questa è la dimostrazione, che ho trovato qui:

Nota in particolare la forma per nulla soddisfacente della G e soprattutto della e! Decisamente meglio con le dovute correzioni ottiche, non credi?

Io stesso ho applicato correzioni ottiche ben studiate in alcuni miei progetti. In particolare nel logo stesso di Grafigata, come puoi vedere qui:

Conclusioni

Le correzioni ottiche, insomma, sono qualcosa che in segreto i designer professionisti inseriscono ovunque, contribuendo a rendere armonico e visivamente piacevole tutto quello che vediamo attorno a noi.

Per poter maneggiare questa tecnica, occorre ovviamente molta pratica e molta pazienza, perché non basta sfasare qualche elemento geometrico a caso per dar vita ad un logo davvero di impatto.

In caso l’argomento ti abbia appassionato, ti consiglio dunque di fare pratica con l’elemento tipografico, grazie al mio corso sulla tipografia Font-Ninja.

Se invece sei più interessato al Logo Design, allora sicuramente ti consiglio di dare un’occhiata al corso avanzato che abbiamo creato su come progettare loghi efficaci e professionali: Logo-Hero.

Spero che questo articolo ti sia servito a capire tutto quello che c’è da sapere su correzioni ottiche e overshoot. Io personalmente ho trovato questo argomento interessantissimo e in sicuro continuerò ad indagare alla ricerca di proprietà e caratteristiche delle correzioni ottiche.

Per il resto, se qualcosa non dovesse essere chiaro o se vuoi semplicemente darmi la tua opinione, scrivimi pure qui sotto tramite il box dei commenti!

Alla prossima,

Lorenzo.

Fonti utilizzate:

• Grid Systems in Graphic Design/Raster Systeme Fur Die Visuele Gestaltung – Josef Muller-Brockmann
• The art of eyeballing – Scannerlicker.net
• Overshoot glossary About.com
• Overshoot (typography) – Wikipedia inglese
• Making geometric type work – Typographica.org
• Why all typefaces are optical illusions – Fastcodesign
• Typeface mechanics 001 – FrereJones.com
• More about new google logo – Thelogofactory.com