Una guida per combinare i caratteri

La combinazione di caratteri è una delle parti più difficili della tipografia. Ecco una guida, combinata con un esempio per aiutarti a ottenere le combinazioni di caratteri giuste.

Questa guida si basa sul capitolo 5 del libro Better Web Typography for a Better Web di Matej Latin. Il libro è composto da 13 capitoli attraverso i quali il lettore progetta e costruisce un sito Web di esempio.

Questa guida è disponibile anche in cinese tradizionale.

Hai davvero bisogno di più di un carattere?

La cattiva tipografia sul web nei primi anni di Internet era spesso attribuita alla scarsa gamma di caratteri disponibili. Ma abbiamo già imparato che la tipografia non riguarda semplicemente la scelta dei caratteri. Uno dei suoi obiettivi (probabilmente il principale) è presentare le informazioni in modo che siano leggibili e facili da consumare. Prima di iniziare a cercare un carattere da aggiungere al nostro design e combinarlo con il carattere del nostro corpo del testo, dobbiamo chiederci: abbiamo davvero bisogno di più di un carattere? Non aggiungerne solo uno per il gusto di farlo. Non esiste una regola nella tipografia che dice che più caratteri vengono usati meglio (il contrario è probabilmente più vero). Non vi è alcuna garanzia che l'aggiunta di un altro carattere al tuo sito Web migliorerà la sua tipografia. Mi piace mantenere la mia tipografia semplice e solida. Come una macchina: meno parti mobili sono, meno è probabile che si rompano.

La cattiva tipografia sul web nei primi anni di Internet era spesso attribuita alla scarsa gamma di caratteri disponibili. Ma abbiamo già imparato che la tipografia non riguarda semplicemente la scelta dei caratteri. Uno dei suoi obiettivi (probabilmente il principale) è presentare le informazioni in modo che siano leggibili e facili da consumare. Prima di iniziare a cercare un carattere da aggiungere al nostro design e combinarlo con il carattere del nostro corpo del testo, dobbiamo chiederci: abbiamo davvero bisogno di più di un carattere? Non aggiungerne solo uno per il gusto di farlo. Non esiste una regola nella tipografia che dice che più caratteri vengono utilizzati meglio è (il contrario è probabilmente più vero). Non vi è alcuna garanzia che l'aggiunta di un altro carattere al tuo sito Web migliorerà la sua tipografia. Mi piace mantenere la mia tipografia semplice e solida. Come una macchina: meno parti mobili sono, meno è probabile che si rompano.

Opera tipografica del 18 ° secolo in un unico carattere - Baskerville - dello stesso John Baskerville.
È una regola sicura non mescolare stili diversi di lettere nella stessa pagina o facce di tipo diverse nello stesso libro.
- Eric Gill

Eric Gill, un uomo piuttosto controverso ma un grande tipografo (tra le altre cose che fece), aveva un'opinione simile. Non c'è molto che puoi fare meglio con più caratteri di quanti tu ne possa fare con uno solo. Prova a sfidare te stesso e crea un sito Web utilizzando un solo carattere. Se solo per esperimento e divertimento, penso che tutti dovrebbero provarlo perché c'è molto da imparare da esso.

Matejlatin.co.uk recentemente riprogettato. Incentrato sulla tipografia ma utilizzando un solo carattere.

Di recente ho riprogettato il mio sito web personale. Una delle cose che volevo distinguere era il minimalismo che è una parte così grande della mia vita. Per farlo, ho deciso di utilizzare un singolo carattere. Volevo anche che il sito Web fosse incentrato sulla tipografia (letteralmente il 95% di esso è tipografia) oltre a ciò, il che ha reso la sfida ancora più difficile. Stavo cercando un carattere sans-serif pulito, nitido e semplice che lo enfatizzasse ancora di più. Alla fine ho scelto Gibson di Canada Type. Ha un aspetto moderno, ma leggermente amichevole. E funziona benissimo se impostato su dimensioni enormi. È stato un po 'una sfida ottenere la tipografia giusta per quel sito Web, ma sono riuscito a farlo solo usando dimensioni, pesi e solo due colori diversi: scuro e grigio medio.

Ho incluso questo esempio nel libro, perché è ottimo nel mostrare quanto si può fare con un singolo carattere. Non solo da maestri della tipografia come John Baskerville, ma anche da designer autodidatti come me. Pensi di aver ancora bisogno di un altro carattere per il tuo progetto? Nessun problema, continua a leggere.

Un processo in quattro passaggi per la combinazione di caratteri

Se ritieni ancora di aver bisogno di più di un carattere per il tuo sito Web, avrai bisogno di un processo sistematico per guidarti. Quella che descrivo qui è una versione adattata di quella descritta nel libro Combinare caratteri tipografici di Tim Brown. Ecco i quattro passaggi:

  1. Trova un carattere di ancoraggio per il testo del corpo principale
  2. Trova alcuni caratteri secondari per le possibili combinazioni
  3. Valuta la combinazione
  4. Elimina / scegli la combinazione di caratteri.
Il processo sopra presuppone che tu stia iniziando con il carattere per il corpo del testo già selezionato. Il processo può essere facilmente invertito se si desidera iniziare prima con un carattere del titolo.

Esistono due approcci per combinare i caratteri e cinque linee guida che possono aiutarti con il passaggio 3 della tabella sopra. Diamo un'occhiata.

Due approcci alla valutazione delle combinazioni di caratteri

Contrasto e armonia sono i due principi basilari quando si tratta di design, architettura e arte. Entrambi sono cruciali anche per quanto riguarda la tipografia. Alcune valutazioni descritte in questo processo funzioneranno solo come una combinazione contrastante, alcune solo come armoniche e altre come entrambe. Diamo un'occhiata a un esempio di vita reale.

Combinazioni contrastanti

Dai un'occhiata alla foto dell'ufficio sopra. Come lo descriveresti? Sembra moderno, giusto? Ma c'è qualcos'altro. Fa anche caldo. Insolito per uffici con mobili moderni, quasi futuristici. Eppure, questo lo fa. Il muro di mattoni porta questa sensazione di calore e intimità in una stanza che apparirebbe fredda senza di essa. Lo stesso può essere applicato alla combinazione di caratteri.

Come possiamo applicare questo alla tipografia? Prendiamo il carattere Baskerville per il testo del nostro corpo principale. Baskerville è stato progettato da John Baskerville nel 1754. All'epoca era un carattere moderno in quanto spingeva i confini di ciò che era possibile nella tipografia. Al giorno d'oggi è percepito come un classico. Evoca sentimenti di fiducia e calore. Basato su un esperimento, condotto da Errol Morris, è il carattere più affidabile in circolazione. Ora completiamolo con un Futura solo maiuscolo per le intestazioni. Futura è stata progettata da Paul Renner nel 1927. È un font sans-serif geometrico. Era un font sans-serif geometrico moderno quando è stato progettato per la prima volta e sembra ancora moderno fino ai nostri giorni.

Il nostro design sembra ricco. Lussuoso. Ha una storia da raccontare. Ma soprattutto - funziona. Utilizza due classici di font di diversi periodi. Ciascuno proviene dall'opposto della scala tra moderno / freddo e classico / caldo. Insieme, sono come fuoco e ghiaccio che si trasformano in acqua che scorre.

Combinazioni armoniche

L'armonia è esattamente l'opposto del contrasto. Quindi, se guardi la foto dell'ufficio sopra, noterai quanto è moderna. Spazio minimalista senza decorazioni, combinato con mobili dall'aspetto moderno. Come potremmo replicare qualcosa del genere in tipografia?

Abbiamo usato Din Alternate per il titolo e Helvetica per il carattere del corpo nella combinazione sopra. Entrambi hanno una leggera sensazione industriale e moderna. Esistono molte funzioni che rendono simili i due caratteri, ma sono abbastanza diversi da funzionare bene come combinazione.

Cinque linee guida per la combinazione di caratteri

Combinazione di caratteri con altezza x simile

Ricordi quando ti ho detto di ricordare l'altezza x nel capitolo sull'anatomia dei caratteri tipografici? Questo è dove è utile. Un altro modo per valutare una combinazione di caratteri è quello di dare un'occhiata da vicino alle loro altezze x, per vedere se corrispondono. Dovrebbero essere molto vicini nel peggiore dei casi. I caratteri con altezza x simile funzionano meglio insieme in quanto hanno un peso visivo simile. Soprattutto quando si tratta di ritmo verticale (qualcosa che tratteremo nel prossimo capitolo).

Sopra: Futura e Baskerville hanno un'altezza x simile che li rafforza come una buona combinazione di caratteri.

Questa combinazione funziona con contrasto o armonia. Scegli i caratteri con altezza x corrispondente o caratteri con altezza x molto diversi. Non andare con qualcosa in mezzo.

Combinazione di caratteri della stessa fonderia

Ho notato qualcosa durante tutto il lavoro di tipografia che ho svolto finora. Scegliendo i caratteri, tendo a tornare ad alcuni tipi di fonderie che li hanno prodotti. FontFont, con sede in Germania, è uno di questi: sono un fan del lavoro di Erik Spiekermann. Dalton Maag, con sede a Londra, è un altro. Ci sono state occasioni in cui mi sono preso il tempo di esplorare semplicemente tutti i caratteri provenienti da queste due fonderie e quasi non ce n'era nessuna che non mi piacesse. Sembra che i loro stili corrispondano a ciò che cerco più comunemente. E questa non è una coincidenza.

Vedete, quando un designer di tipi inizia a lavorare su un nuovo carattere, raramente iniziano da zero. È più comune che inizino a progettare un nuovo carattere sopra a uno esistente. Usano la stessa struttura ma escono comunque con un design originale. Ma a causa di quella struttura sottostante condivisa, i caratteri di solito possono funzionare bene insieme. La combinazione di caratteri provenienti dalla stessa fonderia è quindi una buona scommessa.

Combinazione di caratteri dello stesso autore

Simile alla combinazione di caratteri basati sulla fonderia che li ha progettati è combinarli in base al loro autore. Come accennato, le fonderie di tipi usano comunemente una struttura sottostante di base per produrre caratteri diversi. Probabilmente è ancora più comune per gli autori dei font farlo. La combinazione, ad esempio, dei caratteri disegnati da Adrian Frutiger è quasi una scommessa sicura.

Sopra: universo sullo sfondo e Apollo delineato in primo piano (entrambi disegnati da Adrian Frutiger). Notate quanto sono diversi nello stile, ma molti punti chiave si intersecano quasi perfettamente.

Consiglio ancora di mettere i due caratteri uno accanto all'altro e di confrontarli, proprio come abbiamo fatto con Apollo e Univers sopra. Prova a stabilire se una combinazione funziona o meno, in modo simile a come abbiamo confrontato i caratteri in base all'altezza x, ma concentrati maggiormente sulle proporzioni generali. A questo punto, è necessario studiare davvero i due caratteri. Ti ho detto che ci vuole tempo, ricordi? Questa combinazione dovrebbe essere usata come armonica, non contrastante.

Combinazione di caratteri basati sull'era storica

La valutazione dei caratteri in base al periodo di tempo funziona bene con il contrasto o l'armonia. Puoi scegliere due caratteri molto distanti o dello stesso periodo di tempo. Entrambi dovrebbero funzionare.

Ci sono quasi 200 anni che separano la creazione di Baskerville e Futura.

Trovo che questo approccio funzioni meglio con i caratteri che sono stati progettati prima della rivoluzione digitale. Al momento sono stati progettati troppi caratteri. Associarli esclusivamente al fatto che appartengono allo stesso periodo di tempo potrebbe non essere sufficiente.

Utilizzo di caratteri tipografici super

Esistono i cosiddetti super caratteri tipografici. Caratteri tipografici disponibili in entrambi gli stili sans-serif e serif. Merriweather e Merriweather Sans sono ottimi esempi. Così sono Roboto e Roboto Slab. Semplicemente non puoi sbagliare usando gli stili di una super famiglia. Questo può essere un ottimo modo per iniziare a sviluppare le tue abilità di combinazione dei caratteri.

Alcuni caratteri tipografici sono disponibili in serif e sans serif (o anche più stili). Non puoi sbagliare se li combini.

Un esempio di combinazione di caratteri

Questa guida è un adattamento del capitolo 5 tratto dal libro Better Web Typography for a Better Web, quindi in questa fase i lettori sono in 4 capitoli e hanno già seguito il processo di scelta del carattere principale (ancora).

Carattere di ancoraggio

OK, abbiamo imparato molto nell'ultimo capitolo. Mettiamo da usare quelle nuove conoscenze acquisite. Seguendo il processo sopra descritto, dobbiamo iniziare con il carattere di ancoraggio. Abbiamo questo, poiché abbiamo già deciso cosa volevamo usare nel capitolo 3 quando abbiamo scelto FF Meta. Andiamo direttamente al passaggio 2.

L'esempio di contenuto per il sito Web impostato in FF Meta - il carattere che abbiamo scelto prima nel libro.

Trovare candidati per possibili combinazioni

Stiamo cercando un carattere che possiamo usare per le intestazioni. Rivediamo i punti chiave che abbiamo scritto dal brief quando stavamo cercando il carattere del corpo del testo:

  • il sito Web deve essere moderno e aggiornato; il suo contenuto deve essere facile da leggere per soddisfare gli entusiasti ma curiosi appassionati di tecnologia
  • il sito web deve essere focalizzato sui contenuti, con pochissimi ma annunci di alta qualità e ben mirati
  • come qualsiasi sito Web con quel tipo di traffico e pubblico, deve funzionare su diversi dispositivi.

Scriviamo alcuni punti chiave che ci aiuteranno a trovare il carattere dell'intestazione, proprio come abbiamo fatto per il testo del corpo:

  • sicuramente sans-serif (abbiamo bisogno di qualcosa che sia ad alto contrasto rispetto al nostro carattere del corpo del testo)
  • ha bisogno di sentirsi moderno che si traduce in una maggiore altezza x
  • deve funzionare bene con caratteri di dimensioni maggiori
  • più pesi e stili, meglio è
  • Funzionalità OpenType non richieste (oltre alle legature, utilizzo raramente altre funzionalità OpenType con titoli)
  • necessita solo del sottoinsieme inglese di caratteri
  • ha bisogno di renderizzare bene sugli schermi comuni (sia mobili che desktop).

Con questo scritto, siamo pronti per iniziare la ricerca. Accendiamo TypeKit e troviamo alcuni candidati. Impostiamo i filtri in modo che possiamo vedere solo sans-serif, consigliato per intestazioni, peso elevato e grande altezza x. La grande altezza x corrisponderà a ciò che stiamo cercando, ma anche l'altezza x di FF Meta che abbiamo scelto per il testo del corpo.

Ho esaminato i 40 risultati ottenuti e ho selezionato i seguenti: Korolev, FF Enzo, Quatro, Camingodos e JAF Facit. Solo cinque; Immagino di avere una buona idea di ciò che sto cercando.

Valutazione delle combinazioni di caratteri

Perché ce ne sono solo cinque, possiamo immergerci direttamente e iniziare a sperimentare con loro. Aggiungiamoli al nostro progetto in TypeKit e caricali nel nostro sito Web di esempio. Quindi copiamo alcuni titoli dal nostro articolo di contenuto di esempio e li aggiungiamo.

L'esempio di codice di questo capitolo può essere visualizzato su CodePen.

Inizialmente, valutiamo i candidati in base alle dimensioni e al colore predefiniti. Forse possiamo eliminarne alcuni senza scavare troppo in profondità. In effetti, c'è qualcosa che non sembra giusto in JAF Facit, quindi possiamo eliminarlo. Alcuni personaggi, come "w" e "y", in Quatro sono progettati in modo univoco e si distinguono. In un brutto modo. Attraversiamo la lista. A volte è davvero così semplice. Osservando da vicino FF Enzo rivela che è chiaramente uno stile umanista (notevole contrasto e leggermente inclinato) che non è qualcosa che stiamo cercando. Questo è il terzo dalla nostra lista.

Eliminare le combinazioni di caratteri

Siamo stati in grado di eliminare tre combinazioni nella fase di valutazione, in modo da lasciarci due possibili candidati: Korolev e Camingodos. Diamo un'occhiata più da vicino a questi due e sperimentiamo ulteriormente.

Anche Camingodos ha una leggera sensazione umanistica, ma non è così chiaro come con FF Enzo. I caratteri sono leggermente più stretti e l'altezza x è grande. C'è una certa atmosfera quadrata di cui non sono sicuro. Sembra che stia cercando di essere tecnico ma non andare fino in fondo (a causa di quel lato umanista). Diamo un'occhiata più da vicino a Korolev.

Korolev si sente unico. Caratteri molto stretti, grande altezza x e sembra che sia leggermente condensato. Ha anche un aspetto quadrato ma non così ovvio come Camingodos. Proviamo i due con il colore che molto probabilmente saranno usati: il rosso.

Proviamo anche un peso leggermente più leggero - medio anziché audace.

Ora è interessante. Korolev prende vita quando è leggermente più leggero. Ora è in completo contrasto con il carattere del corpo del testo. Camingodos, d'altra parte, sembra strano. Manca di identità e con ciò non regge bene contro il carattere del corpo del testo. Il problema principale è che si trova sul recinto: è troppo simile al carattere del corpo del testo per essere davvero contrastante e tuttavia contrastante in una certa misura. La cosa con contrasto nella tipografia è che deve essere chiaro o inesistente. Questo rende Korolev un chiaro vincitore. Il nostro risultato finale è simile al seguente:

Guarda l'esempio dal vivo su betterwebtype.com/book/c5.

Maggiori informazioni su una migliore tipografia web nel libro

Da qui in poi, il libro esplora il ritmo nella tipografia web, le scale modulari e cosa significa "tipografia significativa", componendo pagine, tipografia web reattiva e si tuffa anche in 4 capitoli aggiuntivi sulla micro tipografia. Questo è il sito web di esempio dal vivo che viene creato man mano che avanzi nei capitoli.

Combinazione di cheat sheet dei caratteri

Ho creato un cheat sheet stampabile a 2 facciate sulla combinazione di font basato su questa guida. Scaricalo, stampalo e inizia a creare fantastiche combinazioni di caratteri.

Ottieni il tuo cheat sheet per combinare i caratteri →

Altre cose interessanti da Better Web Type

Ci sono altre cose interessanti sul sito web Better Web Type: un corso di tipografia web gratuito, un gioco di memoria di caratteri, un gioco di apprendimento per la creazione di paragrafi perfetti, un quiz ecc.

Visita betterwebtype.com →