Crimini tipografici e come evitarli
Design \ \

Crimini tipografici e come evitarli

Ci vuole poco per uccidere la bellezza e la correttezza compositiva di un testo in un progetto di comunicazione visiva. È un reato che nessun bravo designer dovrebbe mai compiere.

Un crimine tipografico è una grave violazione delle regole di progettazione del carattere, del corretto utilizzo di un font o delle buone norme di formattazione del testo. È quel genere di errore (sarebbe meglio dire orrore) che un professionista della grafica o del web design non può concedersi.

In questo articolo discuto dei crimini tipografici più diffusi, suggerendo soluzioni e alternative per ottenere risultati migliori.

Falso corsivo

Si tratta di un corsivo simulato ottenuto inclinando le lettere anziché utilizzare la versione corsiva (italic) prevista nella stessa famiglia di caratteri. Vediamo un esempio (notare la differenza nella lettera “a”):

falso-corsivo-codencode

Come si può osservare, nel falso corsivo le forme ampie e sgraziate delle lettere inclinate hanno un aspetto forzato e innaturale. Il corsivo autentico, invece, è un carattere disegnato appositamente con un angolo di inclinazione compreso tra 7 e 20 gradi.

Questo errore viene commesso solitamente quando si è “costretti” a inclinare il testo perché non esiste lo stile corsivo del font che si vuole utilizzare. In questi casi è meglio scegliere un’altra famiglia di caratteri o rinunciare all’uso del corsivo.

Altre volte può verificarsi anche se esiste la versione corsiva del font. Per esempio, utilizzando un programma di composizione grafica, si clicca sul pulsante corsivo/italic nell’editor di testo ma il programma non seleziona automaticamente la versione corsiva del carattere, bensì applica un’inclinazione automatica; è bene sempre controllare che ciò non avvenga, assicurandosi che sia stato applicato lo stile corsivo autentico. Oppure, nell’ambito del web design, si applica la regola CSS font-style:italic alla versione normale del font ottenendo un falso corsivo; per evitarlo, associare sempre in maniera esplicita all’elemento il font corsivo previsto per la famiglia di caratteri.

Falso nero

Consiste nell’ispessire i bordi delle lettere per simulare il grassetto anziché utilizzare le versioni nero e neretto (bold e semibold) previste nella stessa famiglia di caratteri. Vediamo un esempio (notare la differenza nelle grazie delle lettere):

falso-nero-codencode

Osservando il falso nero, le lettere presentano un aspetto debole e ottuso, perdono l’incisività e l’eleganza del grassetto autentico progettato espressamente a questo scopo.

Come per il falso corsivo, il falso nero viene utilizzato di solito per sopperire alla mancanza della versione nero/neretto per un dato font; e come nel caso precedente, è meglio scegliere un’altra famiglia di caratteri o rinunciare all’uso del grassetto. Se proprio non è possibile, un consiglio è quello di usare un colore un po’ più chiaro per il testo normale e un colore più scuro per il testo che deve essere in nero/neretto.

Valgono le stesse considerazioni anche circa l’utilizzo di programmi di grafica e l’applicazione di regole CSS per il Web: nel primo caso accertarsi sempre che, cliccando sul pulsante grassetto/bold, non venga applicato un bordo alle lettere, ma venga selezionato lo stile nero/neretto corretto; nel secondo caso, associare all’elemento la versione bold del carattere invece di applicare la regola font-weight:bold al font normale.

Falso maiuscoletto

Il maiuscoletto (small caps) è stato disegnato per integrarsi con la riga di testo dove, a dimensione piena, le maiuscole spiccherebbero eccessivamente. Le lettere maiuscolette sono leggermente più alte dell’occhio medio delle minuscole.

Il falso maiuscoletto si ottiene riducendo il corpo della versione maiuscola del font normale, causando in tal modo la riduzione dello spessore delle aste del carattere che invece, nel vero maiuscoletto, hanno lo stesso spessore del font normale. Vediamo un esempio:

falso-maiuscoletto-codencode

Come si nota, nel falso maiuscoletto le versioni ridotte delle lettere maiuscole a corpo pieno sono troppo magre rispetto alle normali lettere del testo.

È un errore da evitare sia nella stampa cartacea sia nella formattazione di pagine web perché provoca un evidente disagio visivo dovuto alla differenza di peso che si crea all’interno della frase.

Ridimensionamento orizzontale e verticale

Nella tipografia elettronica la larghezza dei caratteri può essere modificata variando la dimensione orizzontale rispetto a quella verticale, allo scopo di ottenere lettere più larghe o più strette. Questa azione, però, distorce la proporzione delle forme: gli elementi spessi diventano sottili e quelli sottili spessi, come nell’esempio:

distorsione-codencode

È sempre preferibile non ricorrere alla distorsione digitale dei caratteri scegliendo invece una famiglia di caratteri con le proporzioni adatte in cui siano presenti gli stili condensato, compresso o espanso.

Spaziatura dei caratteri

Quando si disegnano da zero le lettere, o quando si utilizzano font meno noti presi dal Web, bisogna prestare molta attenzione alla corretta spaziatura dei caratteri, soprattutto quando si lavora con corpi molto grandi o con le maiuscole. È necessario predisporre un codice di spaziatura differenziata che permetta di ottenere accostamenti armonici tra le lettere in modo che la composizione del testo risulti il più equilibrata possibile.

Un errore tipico che si commette è spaziare uniformemente tutte le lettere, lasciando la stessa distanza dai bordi esterni dei caratteri; in questa maniera, infatti, si generano spazi vuoti irregolari soprattutto tra lettere con forme angolate verso l’esterno (come la A e la V). Vediamo un esempio:

spaziatura-codencode

Il criterio giusto da adottare consiste nel fare in modo che tra tutti i caratteri di una stringa ci sia lo stesso spazio, non la stessa distanza.

Correzioni ottiche

Gli apici e le curve delle lettere sporgono in alto e in basso rispetto all’altezza delle forme squadrate per compensare le distorsioni ottiche – causate dalla percezione visiva – che alterano le dimensioni dei caratteri, facendoli apparire leggermente più grandi o più piccoli rispetto a quelli adiacenti. Per esempio, se osserviamo attentamente le lettere A, O e U nell’immagine che segue notiamo come risultino più alte delle altre, anche se di molto poco:

correzioni-ottiche-codencode

Questo aggiustamento è reso necessario per farle apparire al nostro occhio di dimensioni uguali agli altri caratteri che hanno forme squadrate; senza correzione ottica, infatti, sembrerebbero leggermente più piccole.

In genere, nelle famiglie di caratteri già pronte le lettere sono progettate con le opportune correzioni ottiche che, nel comporre i testi, non vanno eliminate! Quando invece si progettano ex novo i caratteri è fondamentale provvedere agli opportuni aggiustamenti per evitare sgradevoli effetti visivi.

 

Esistono, poi, diverse situazioni in cui, pur senza commettere dei veri e propri crimini tipografici, è facile produrre effetti negativi sulla composizione dei testi, dal punto di vista della leggibilità e della gradevolezza. Di seguito riporto alcuni esempi.

Tutte le considerazioni espresse valgono sia per la stampa sia per il web design; riguardo a quest’ultimo, però, va precisato che bisogna fare molta più attenzione in quanto la formattazione del testo risente della diversa larghezza dei dispositivi in cui le pagine web vengono visualizzate e della possibilità di poter ingrandire o ridurre a piacimento il corpo del font (problemi chiaramente assenti sulla carta stampata).

Testi a bandiera

La bandiera si ottiene allineando il testo a sinistra o a destra. Quando si utilizza questo tipo di composizione è importante evitare che il blocco di testo assuma la forma di un cuneo, nel qual caso si parla di cattiva bandiera:

testo-bandiera-codencode

Una bandiera errata produce un effetto piuttosto fastidioso. Si può risolvere il problema variando la giustezza delle righe di testo, modificando il contenuto o giocando con il kerning/tracking fino a ottenere una profilo gradevole.

Allineamento a epigrafe

Il testo a epigrafe (o lapidario) si ha quando si usa l’allineamento centrale. Anche in questo caso si possono verificare difetti di natura estetica dovuti alla formazioni di cunei:

allineamento-epigrafe-codencode

Un’epigrafe corretta prevede un’alternanza riga corta, riga lunga, riga corta… oppure riga lunga, riga corta, riga lunga…, ottenibile, come per la bandiera, variando la giustezza delle righe di testo, modificando il contenuto o giocando con il kerning/tracking:

Testo giustificato

Il testo giustificato (o a pacchetto) può provocare diversi problemi, soprattutto quando la giustezza si riduce, a causa dei “buchi” che si creano fra le parole:

testo-giustificato-codencode

È particolarmente sconsigliato nella composizione dei testi per il Web poiché, dovendo adattarsi anche a dispositivi di dimensioni ridotte, è praticamente impossibile gestire la giustezza in modo adeguato.

Quando non si possono risolvere i difetti agendo sulla larghezza del blocco di testo, la cosa migliore da fare è ricorrere alla sillabazione.

Vedove e orfani

La linea isolata creata da un paragrafo che inizia sull’ultima riga della pagina precedente (o di una colonna) è detta riga vedova. Quando un paragrafo termina sulla prima riga di una nuova pagina (o di una colonna) si ha invece una riga orfana. In entrambi i casi le righe di testo sono isolate e il lettore si trova a dover “inseguire” il testo nella pagina successiva.

riga-vedova-riga-orfana-codencode

Una situazione da evitare e correggere è anche quella in cui l’ultima riga di un blocco di testo non supera il 30% circa della giustezza:

riga-orfana-codencode

Come in precedenza, si può risolvere variando la giustezza delle righe di testo, modificando il contenuto o giocando con il kerning/tracking.

Punti di vista

E tu cosa ne pensi?