Ok, abbiamo capito come dobbiamo trattare la nostra palette colore all'interno di un prodotto digitale.

Adesso però dobbiamo affrontare un'altra parte importante, cioè quella di capire come declinare la tipografia all'interno del nostro prodotto.

Ci sono tante cose di cui di cui tener conto e iniziamo a vederle un po' per volta per capire come gestire appunto questo aspetto molto molto importante.

Intanto dobbiamo ricordarci sempre che la tipografia non è importante, è fondamentale.

Abbiamo detto prima mi sono mi sono sbagliato, ha detto il novanta per cento no.

Il novantacinque percento del web è quasi tutto fatto di tipografia e questo vuol dire che questa deve essere un'attenzione per noi maniacale.

Ma capiamo quali sono, come dire le problematiche, ma anche le opportunità di utilizzare delle buone fonti all'interno di un prodotto digitale.

Intanto, dove prendiamo queste fonti? Chiaramente bisogna sempre fare attenzione, vero? Magari abbiamo un brand da cui partire.

Questo brand ha una sua tipografia di base.

Questa tipografia di base non sempre può essere utilizzata per vari motivi a perché quella tipografia Quelle fonti non sono state pensate espressamente per il digitale.

B potrebbe essere anche un pensiero economico, perché i costi delle di alcune font sono diversi se vengono utilizzati per la stampa e altri per il digitale no per esempio un costo che spesso molti designer ignorano è che la tipografia nel digitale a volte anche spesse volte quando è a pagamento non è una one-shot io non pago quella fonte punto ma pago per tutte le volte che viene visualizzata che io pago per mille wu pago per duecento wu pago per milione di piu'.

Immaginate che se siete un sito che iniziate a fatturare a fare grandi numeri, utilizzare una fonte a pagamento può essere molto dispendioso perché ogni volta che un vostro utente utenti che continuano a tornare tanti nuovi sul sito stanno facendo aumentare il costo della vostra licenza.

Quindi questo è un discorso importante da valutare a me purtroppo è successo una volta che un cliente veramente molto pianto perché non avevo pensato a questa a questa discriminante e non avevamo neanche pensato di sfondare, di fare grandi numeri.

A un certo punto non mi ricordo bene perché sulla nostra piattaforma sono andati tantissimi utenti in contemporanea.

Abbiamo dovuto pagare veramente mi sembra qualche migliaio di euro per le licenze che stavano crescendo delle fonti.

Da quel momento la mia attenzione ai costi, diciamo degli elementi tipografici è, diciamo cresciuta notevolmente, quindi spero di è diciamo che questo mio errore possa aiutarvi a non commetterlo.

E quindi come si procede? Intanto abbiamo tante alternative Fry e questo è la base, cioè il grandissimo database di Google font che ci mette a disposizione una grande quantità di fonte.

Vi invito anche a esplorarla, non utilizzare sempre le solite, se cercate da qualche parte c' è anche proprio le fonti più utilizzate su Google.

Voi andate, guardate le prime dieci, le scartate così almeno siete sicuri di non diciamo di fare qualcosa di più originale.

Per esempio, molti usano sempre le stesse fonti, hanno cioè il lato l'opel open sans roboto.

Sono fronte ormai veramente molto, molto sfruttate.

Ma siccome il database di Google veramente molto ampio, io vi invito a fare una ricerca più approfondita.

La cosa bella di Google è che voi non solo cercate per stile, no? Quindi se siete dei disah, ma sapete che possiamo cercare per serie chancery, quindi con le grazie, senza grazie, scritti a mano sono spaziati fonte più adatti per i titoli che si chiamano display.

Ma dovete iniziare anche a cercare dentro Google qualcosa che ci sia veramente utile nel nostro nel nostro prodotto é una cosa che, per esempio è molto importante, che pochi tengono in considerazione sono il numero degli stili, il numero degli stili.

Una dice perché mi interessa il numero degli stili.

Sì, perché se una fonte a quattro stili vuol dire che non riesco a creare una grande gerarchia, immaginate con regular medium, semi bold bold quattro stili sono veramente molto pochi per una fonte.

Se voglio creare una bella gerarchia all'interno della mia pagina, avere sette, otto dieci stili diventa veramente incisivo e decisivo.

Quindi questa è una cosa che dovete iniziare a cercare.

Vedete che qui sulla Sai bar di Google ha scritto il numero è proprio un elemento con cui ricercare.

Voglio una fonte che abbia piu' stile qui in questa schermata non si vede, ma c' è anche all'interno di Google la possibilità di cercare per glifi estesi che cosa vuol dire? Vuol dire che se per esempio, immaginiamo che il mio prodotto é un prodotto multilingui, dice no.

Quindi con più lingue.

Io devo essere sicura che questa fonte abbia all'interno quelli che in gergo vengono chiamati i glifi, le singole lettere con tutte le variazioni che ci sono nelle lingue che voglio considerare.

Per esempio, spesso mi è mi è capitato che sceglie una fonte e poi non aveva magari alcuni glifi della lingua spagnola o può capitare ancora più frequentemente non abbia glifi della lingua russa.

Se stiamo facendo appunto un sito che prevede anche queste lingue, dobbiamo essere in grado di scegliere una fonte che abbia queste caratteristiche.

Quindi questo è già un primo quadro seconda.

Diciamo una seconda scelta che potete utilizzare per avere font semi free.

Diciamo così sono gli addobbi Fonte.

Se avete una creative cloud, un pacchetto a Dobby attivo che state pagando le font sono comprese le fonti Claudia di addobbi sono comprese nel vostro pacchetto e potete utilizzarle per vari scopi.

E poi ci sono ovviamente tutti i siti che vendono le fonti a pagamento da vari found da varie agenzie che creano font.

Uno di questi, il più conosciuto, è mai phones.

Qui potete andare, cercate veramente tantissime font quello che volete ricordatevi che qui poi, quando andrete a vedere la fase finale del prezzo, guardate bene le licenze perché ce ne sono proprio specifiche.

A volte cambiano addirittura tra backstop e applicazioni.

Per esempio, se fate un usate una fonte per un'app quasi sempre pagato un prezzo diverso ma pagate one time.

Se invece, come dicevo prima, comprate una fonte per backstop, voi pagherete per web.

Scusatemi, voi pagherete spesso a wu, quindi slot di più, quindi centomila, più mille milioni di più eccetera eccetera.

Ovviamente non dobbiamo solo sapere queste cose.

Tecniche della tipografia è la parte più bella è scegliere belle fonte.

Chiaramente no, non solo belle, ma anche eleggibili diventa una parte fondamentale.

Quindi da dove prendiamo ispirazione? Ci sono tantissimi siti.

Io vi consiglio quelli che attualmente sono i miei preferiti è chiaramente.

Ovviamente ce ne sono molti di più, ma questi sono secondo me quelli migliori.

Al momento abbiamo tipo aspiration punto com come potete vedere da questa slide la cosa interessante di questi siti e che spesso quando mettono una fonte ne suggeriscono un'altra a d'accompagnamento perché la tipografia è tutta fatta di diciamo questi due contrappesi la parte display, cioè i titoli, la parte body, la parte di di testo, paragrafo di narrazione non sempre si utilizza la stessa fonte, perché magari per i titoli vogliamo qualcosa di piu' boldi più urlato con un tono, diciamo con carattere maggiore.

Invece per la parte dei testi dove arriviamo raccontiamo il prodotto.

Insomma abbiamo bisogno magari una fonte più leggibile che non più espressiva.

E spesso questi siti come tip inspiration consegnano sia una fonte per i titoli sia la parte per il display, perché anche abbinare le fonti è diciamo, un lavoro duro da fare.

Un altro sito che vi consiglio è types cash punto com slash font news Questo è interessante, in realtà non è digitale, ma prende spunti da vari prodotti che vengono trovati in rete di portfolio possa essere un poster, una brochure e un biglietto da visita, una rivista.

Ed è, diciamo, come dire, foraggiato dalla community.

Le persone tirano su le foto e tra di loro si chiedono se conoscono questa fonte che è stata utilizzata piuttosto che no, è spesso, appunto la community si dà da fare e si riesce a trovare il match tra le fonti che vengono chieste di analizzare la la risposta reale.

Questa secondo me è molto bella, una un'istituzione nel mondo di chi fa digitale e chiama la tipografia è tipo wolf punto com.

Anche qui ci sono siti quasi tutti basati su stili tipografici super forti.

La cosa bella di questo è che ci fa vedere ovviamente i riferimenti del sito internet con sotto ovviamente le proprio già linkate, le font da andare a vedere, visualizzare.

Altra cosa importante chiaramente oltre a questi siti di riferimento è quello di curiosare in giro.

Questa è la parte, è più importante per cominciare pero' adesso, adesso che abbiamo capito dove cercare le fonti abbiamo capito dove o come diciamo è possiamo ampliare la nostra ricerca e iniziamo a capire come utilizzare la parte di body text, cioè la parte appunto del testo scritto.

Intanto vi consiglio questo.

Questa è un consiglio fondamentale per chi fa non in generale per chi fa grafica, ma questo è proprio specifico per il digitale.

Bisogna scegliere una font, si consiglia di scegliere una fonte che ha quello che in gergo viene chiamato unix-like alto.

Se non conoscete l'anatomia di un font tipografico, vi basti sapere che le fonti sono fatte con questi tre livelli l'ascendente che immaginate che è la parte alta.

No? Immaginate una f appunto minuscola.

Il cappello della f l'ascendente, poi c' è il discendente che la parte bassa.

Immaginate una g appunto, la sua parte piu' bassa e poi c'è.

Quello che viene detto l'occhio della nostra l'lte zza media della fonte di tutte quelle che non hanno né ascendenti e discendenti naturalmente è la x o la o è per questo che si chiama x hit.

La distanza tra questo occhiello e l'ascendente è quella che crea appunto la la x hit all'altezza dell'occhio.

Perché tutta questa diciamo disamina su questo elemento tipografico? Perché sembra banalissimo ma piu' questo occhio è alto, quindi meno distanza cetra, l'ascendente e l'occhio più la tipografia è facilmente leggibile per i nostri utenti.

Quindi siccome se immaginiamo che facciamo un sito dove c'è tanto tanto testo, dobbiamo scegliere una font che abbia questa facile leggibilità.

Quindi questo è il primo punto ovviamente l'altra, cosa che dobbiamo ipotizzare è quello che ci sia un buon contrasto visivo.

Per contrasto intendiamo che ci sia una buona differenziazione tra, come dire i pieni vuoti delle lettere che come vedete i primi due esempi che vi mostro qui hanno buonissimo contrasto questa fonte a destra il big saloon, per esempio, a quelli che vengono chiamati dei tre molto rastremata, che sono tipici per esempio dell'era rinascimentale? No, era proprio della tipografia più più espressive di quegli anni.

Quelli non vanno bene per il digitale, perché quando diventano piccole, cioè il contrasto che è così diciamo piccolo di alcuni di alcuni tratti diventa totalmente, come dire, mangiato agli occhi dell'utente.

Quindi non utilizziamo fonte di quel tipo.

Come abbiamo già detto prima, la cosa importantissima è avere tanti stili e pesi.

Quindi quando parliamo di pesi parliamo di proprio bold, lo spessore di una fonte no e quindi quello abbiamo visto che sia sui lobi, fonte su Google, fonte a cui segnaliamo come vedere se ce ne sono abbastanza.

Quindi più stile abbiamo, meglio è.

E poi dobbiamo invece capire, una volta fatto questo, come abbinare le fonti.

Questo appunto è un lavoro molto difficile.

Ci sono diciamo diverse regole auree che possiamo seguire, tanto sta al buon gusto, ma se proprio vogliamo avere qualche linea guida, quindi abbiamo qualcuna di seguito, un buon modo per creare un abbinamento tipografico.

Ovviamente quando parliamo di abbinamento parliamo sempre di il titolo é body, quindi la parte di testo che racconta un diciamo un abbinamento che funziona sempre quando c' è un forte contrasto tra le due fonti, come vediamo qua, per esempio il futuro che è super bold super anche contrastato a livello proprio di stile uno è bastoni e l'altro è un graziato è come vedete, questi funzionano molto bene perché riesco leggere molto bene la gerarchia r due.

Al contrario potrei utilizzare per esempio un font con le grazie come titolo molto bold é un fonte più lineare come parte di body, ma molto più leggero.

Questo contrasto è un abbinamento che puo' funzionare ok è come vedete che qui vi faccio un altro esempio una fonte sempre bastoni come titoli una fonte grazie creata per i buoni non è una regola generale, ma finché voi riuscite a leggere questo contrasto, questo abbinamento sta funzionando.

Altra cosa che funziona molto bene.

Tornando sempre diciamo in quel mondo tecnico del dell'ict dell'altezza dell'occhio di un font è la parte di abbinare per somiglianza armonia, anche se sono total consigli diversi.

Per esempio in questo caso vediamo due fonti a sinistra il proxy, ma il flat tax pro sono due font, una bastoni, quindi senza grazie una con le grazie.

Ma perché le possiamo abbinare? Perché hanno l'lte zza dell'occhio molto simile e questo fa sì che per l'utente ci sia una continuità e una facilità armonica di lettura.

Idem per la parte a destra oppure questa è una grande tecnica? Diciamo che i designer più scaltri sono sempre è quella di abbinare font dello stesso designer della stessa foundry.

Vuol dire che chi ha progettato fonti diverse comunque avuto un'attenzione molto simile ad alcuni elementi della progettazione, magari come sono stati progettati, gli ascendenti e discendenti si trovano delle è come dire delle somiglianze all'interno della stessa mano e della stessa foundry e quindi quella può essere una scelta molto, molto, diciamo facile da compiere.

Se non sapete da dove iniziare, potreste andare su mi font cercare una fonte sotto ci ha sempre scritto chi è la sound designer, cliccare su quel link e andare a vedere dove portano tutte le altre fonti, insomma, che sono state progettate dallo stesso progettista o dalla stessa foundry.