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.
Scopri tutti i segreti sulla tipografia
Un mini corso, diviso in 7 moduli, che ti porterà a scoprire tutti i segreti da Ninja nell’uso dei caratteri tipografici all’interno di un progetto di design.
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
Non ho mai commentato ma ho trovato questo articolo veramente bello e completo. Non conoscevo tante di questi aspetti che hai menzionato, grazie e buon lavoro!
Grazie Maurizio!
Sono davvero contento di essere riuscito ad aiutarti! :)
Un abbraccio
Gran articolo! Sarebbe utile saperne ancora di più sulle correzioni ottiche e la tipografia!
Comunque chi si è messo a rifare il logo di Google nuiovo in modo più geometrico secondo me ha qualche problemuccio, eh!
Ciao Paolo!
Riguardo alla tipografia in futuro arriveranno un sacco di novità!
Per chi ha rifatto il logo Google senza le correzioni ottiche: ho pensato la stessa cosa eheh :)
L.
Mi hai aperto un mondo! Ho scoperto dell’esistenza delle correzioni ottiche proprio leggendo le varie discussioni tra sostenitori e non del nuovo logo di Google, perciò sapere esattamente i principi in base ai quali funziona è stato utilissimo! Grazie!
Ciao Giulia! In effetti ho colto la palla al balzo da quelle discussioni :) Ho cercato di chiarire tutti i dubbi che possono sorgere a riguardo e sono contento di averti aiutata! :)
GRANDE! Bell’articolo!!! Per me è sempre stata una domanda in sospeso…
bellissimo articolo,
complimenti.
mi chiedevo però se esistono “regole” per l’allineamento delle lettere delle parole di un testo/titolo in verticale o se è soltanto il gusto del grafico a determinare il risultato.
Non si tratta né di regole né di gusto personale. Ci sono cose che funzionano e cose che non funzionano, solitamente gli allineamenti a bandiera o centrati possono andare bene!
Quelli centrati però, in alcuni font, richiedono (guarda un po’) delle correzioni ottiche! :)
Ciao Lorenzo! Ormai ti seguo da parecchio ed è inutile dire che hai fatto davvero un bel lavoro con questo nuovo articolo. Ho una domanda che mi sono posto vedendo la gif animata che fa vedere le correzioni ottiche da apportare al cerchio e al quadrato. Quali sono le dimensioni degli spazi di queste correzioni? Per intenderci, qual’è la giusta distanza tra la linea del quadrato e la punta del triangolo? Forse mi è sfuggito qualcosa… Grazie :)
Ciao Alessio!
No, non ti è sfuggito nulla! :) Il punto è che non ci sono regole ben precise da seguire.
Io in questo caso ho abbassato l’altezza del triangolo fino all’altezza del cerchio con la stessa area del quadrato :)
Poi ho ristretto l’altezza del cerchio da entrambi i lati della metà della distanza tra la punta del cerchio e il lato del quadrato.
Spero di esser stato chiaro! :)
L.
Ottimo articolo Lorenzo. Comunque sul libro di Michele Spera “Abecedario del grafico” ci sono dei calcoli matematici per ottenere l’area negativa di una crenatura perfetta. Per quanto riguarda il logo del Blog, poteresti spiegare meglio le correzioni ottiche adottate?
Si è vero hai ragione ma a mio avviso si dimentica di considerare le innumerevoli variabili che ci sono in ogni font e in ogni periodo storico :) (gusti, abitudini, tendenze, rapporti armonici, ecc)
La correzione ottica nel logo sono due (molto piccole ma a mio avviso importanti): la curva interna della G che, in alto, non segue più la curva perfetta del cerchio ma tende ad assottigliarsi e i punti di ancoraggio tra la G e la “freccia” che, in realtà, non sono perfettamente allineati :)
Ma la correzione ottica tiene conto di qualche unità di misura?
Dipende molto da progetto a progetto :) Generalmente ci si basa sui rapporti quadrato, cerchio, triangolo che ho spiegato nell’articolo (quindi le punte fuoriescono di più, poi le curve poi le linee piatte).
Però essendo proprio correzioni ottiche… si va spesso a occhio! :)
Complimenti per l’articolo, scritto e illustrato molto bene. Finalmente ho capito meglio un concetto che avevo in testa ma che non sempre sono riuscito ad applicare :)
Ciao! Grazie davvero! Sono contento di averti aiutato! :)
Compilmenti, bell’articolo! :)
Volevo farti solo una domanda, con quale programma “costruisci” le linee guida per il logo? Come nell’ultima immagine per intenderci.
Bellissimo post, grazie. Traspare tutta la passione per questo mestiere e la voglia di migliorarsi. Grazie! E complimenti per le chicche g+ e tweet inseriti nel testo :) Vi ho scoperti da poco ma vi seguirò con interesse, continuate così :)
Ciao Davide!
Grazie a te! Ma dietro Grafigata ci sono solo io! Eheh :)
Complimenti, veramente un bell’articolo! Finamento ho dato un’ordine a ciò che avevo solo ipotizzato ma mai completamente compreso. Grazie
Grazie mille, ti seguo da poco e mi sembri fantastico, argomenti interessantissimi e consigli molto utili.
Grazie davvero, io sto finendo la triennale di disegno industriale e ho fatto un paio di esami di grafica ma non ci spiega niente nessuno, quindi leggere e seguire i tuoi articoli sono molto utili.
Ciao Daniela!
Scusami se ti rispondo solo ma comunque grazie mille davvero per questo commento! :)
Pure io ho fatto disegno industriale, non sembra ma se fatto bene ti da un sacco di basi utili!
Un abbraccio,
L.
CHE ARTICOLONE!! Davvero. Un mondo sempre più affascinante
Non sono un grafico, ma solo un curioso. Ho trovato questo articolo davvero ben fatto ed esaustivo. Complimenti!
Grazie mille Renato! :)
non scrivo quasi mai, adoro tutti gli articoli, ma stavolta temo proprio di non aver capito niente :’) non perchè tu l’abbia scritto male sia chiaro, ma non mi entra in testa. Cioè ho capito in cosa consiste, ma non credo di aver capito cosa si deve fare per metterlo in pratica :/ sarà che sono agli inizi quindi non ho un occhio così allenato, ma la differenza ad esempio dei loghi google io non la vedo! come posso provare ad allenare la vista??
Ciao Elena,
prova a riprodurre entrambi i loghi (quelli con correzione e quelli no) in Illustrator. Il modo migliore per capire questi concetti è metterli in pratica in modo concreto e giocarci, sperimentare, provare :)
Personalmente, il concetto stesso di “overshoot” mi mette a disagio. Ho dedicato l’ultimo anno e mezzo a scrivere di filosofia della matematica, la cosa più astratta alla quale uno possa pensare, e forse questo mi porta a fidarmi più del mio pensiero che dei miei occhi, dal mio sapere “com’è una cosa” più di “come appare”.
E allora ho pensato “no, nooo, questa è la via di Satana”. E questo mi ha ricordato una cosa divertente. Ti ricorderai che la Divina Commedia è asimmetrica: i canti sono 34-33-33. Accidenti, non poteva fare 33-34-33? Ecco, c’è un motivo per il quale non l’ha fatto, ed è lo stesso motivo per il quale le chiese (di norma) hanno solo un campanile spostato di lato, e non un campanile al centro né uno per lato. Cioè: volere la perfezione matematica assoluta sarebbe un mancare di rispetto alla perfezione di Dio, quindi si rompe la simmetria.
Lo stesso concetto, ma estremizzato, vi è nell’estetica giapponese (esempio estremo: https://images.app.goo.gl/mWNQvbwy8vysrH239 )