Ok.

Come abbiamo detto, quello che vale per i colori vale anche per la tipografia.

Qual è il primo imbarazzo del designer di fronte a La pagina web da progettare è quella di iniziare a mettere le appunto la parte tipografica.

All'interno, come abbiamo detto, è il novantacinque percento di quello che compone un sito ed è importante azzeccare le dimensioni e le proporzioni.

Anche qui una una grande esperienza vi fa diciamo partire in maniera molto autonoma.

Vi fa capire bene quali sono gli spazi, i ritmi, le grandezze utilizzare.

Ma se volete come dire dei riferimenti solidi per iniziare a progettare quello che vi direi è di aiutarvi con le scale tipografiche.

In generale le scale armoniche ci sono da sempre, ci sono in musica, in architettura, basti pensare all'uomo delle cornamuse no, su cui si basa tutto il ritmo, la modularità della sua architettura.

Le scale esistono anche in tipografia e sono studiate proprio per rendere armonico lo stacco tra una dimensione e l'altra.

Ovviamente ci sono scale diverse, tutte armoniche, ma dipende da quello che ci serve come contesto.

Se per esempio stiamo facendo un sito di marketing dove la comunicazione deve essere super strong, allora vi direi di utilizzare una scala con una ratio molto ampia.

Che cosa vuol dire ratio? Molto ampi? Andiamo a vederlo perché così è un pochino più chiaro.

Io utilizzo questo sito, ma potete trovarne, diciamo diversi.

Si chiama time trattino skye.

Il punto ma che cosa fa venuta a creare una serie di dimensioni assalti della vostra tipografia, ma non in maniera rendo mica, ma appunto come ci sia un'armonia dietro.

E questa armonia è proprio questa qui questa scala che viene definita è diciamo che superato l'uno punto due uno punto due e cinquanta di ratio, noi stiamo andando su una scatto molto ampio.

Immaginate mettete che io metto una scala di uno punto quattro quattordici guardate quant'è grande lo stacco tra una dimensione e l'altra.

Questo si usa quando abbiamo appunto siti di halford dal forte impatto di comunicazione.

Immaginiamo invece che stiamo gestendo una dashboard oppure qualcosa tipo ad ashford di finanza che abbiamo visto prima, oppure idro box, dove gli elementi sono veramente piccoli e tanti allora la scala che conviene utilizzare molto bassa questa minore secondo, dove lo scatto tra una e l'altra è veramente molto piccolo e ovviamente prima di ripartire bisogna scegliere la misura base di partenza.

Normalmente sul web si consiglia di partire dai sedici pixel che la misura standard che poi si rapporta a quella misura relativa Hakeem, vale a dire che se poi noi cambiamo quella misura, di conseguenza cambia in maniera modulare tutto il resto della tipografia.

Quindi vi consiglio di partire sempre da sedici, a meno che non ci sono dei casi eccezionali e di muovervi su una di queste scale.

Normalmente per si' ti diciamo standard.

Muovendosi sull'uno punto due uno punto due cinquanta si ottiene una scala con un bel con un bel ritmo.

Ovviamente potete anche fare in modo di non prendere questi valori in maniera così diciamo pedissequa.

Quindi se volete arrotondare magari trentuno punti, venticinque diventa trentadue, trentanove punto zero sei diventa quaranta.

Chiaramente però possono essere dei buoni punti di partenza per dire io parto da questi.

Questi sono tutti gli stili che ho e cercherò di utilizzo questa in pagina, senza creare ulteriori discrepanze e diciamo poca em sinergia e armonia all'interno della pagina.

Posso farlo sia manualmente, quindi vedo questa scala e capisco che devo creare una fonte di sedici, una da venti, una da venticinque, quindi mi metto a crearle manualmente così, okay? Oppure posso farlo attraverso anche qui un plugin di Fig.

Ma io in questo caso uso types.

Sai che mi piace molto che foss Kyle ce ne sono diversi.

E vediamo, per esempio, come per riprodurre questo tipo di scala potrei lavorare.

Potrei mettere, per esempio, che si parte da una dimensione sedici.

Quindi l'importante è selezionare è una una fonte di base.

Ok.

E poi dirgli quanti stili livelli vogliamo accrescere sia in alto verso il basso rispetto a questo numero e selezionare ovviamente la scala.

Diciamo che di arrotondare.

Ed ecco qui che è stata creata la mia scala di riferimento.

Una volta che ho queste, io prendo e le standardizzato Che cosa vuol dire che questa roba qua la faccio diventare uno stile riutilizzabile.

Vedete, qui ho creato sono uno, due, tre.

Mi sembra circa nove stili che sono abbastanza.

Per esempio, se dovessi creare un layout di questo tipo Ok, perché parto da questo? Dice Sì, ma ancora non so che cosa disegnerò.

Sì, ma stai sicuro che nove stili e di solito ti bastano.

E per questo io già gli standard.

E poi, se mi serve, vado un po' a cambiarli, ma almeno inizio a lavorare con l'idea di dire la scelta è limitata a nove, non posso andare oltre, vedete che creerà grande coerenza all'interno del vostro yacht come vado a creare uno stile molto semplice come ho fatto prima.

Lo faccio anche per il test l'importante è andare nella palette delle proprietà, cliccare sui quattro puntini e andare sul più a dargli un nome.

Anche qui potremmo creare una serie di cartelle con delle sotto nomenclature.

Nel caso della tipografia una casistica che si usa quella di utilizzare diverse nomenclature per backstop per mobile, quindi si potrebbe scrivere dex top slash titolo mobile slash titolo oppure un'altra eh convenzione che si usa ovviamente non si può utilizzare sempre per esempio per le api non si usa quella di associare subito al titolo o alla voce il suo rapporto semantico.

Per esempio se il titolo piu' grande di solito si mette h uno poi a scendere accadute che poi questi titoli ovviamente vengono mutuati anche dallo sviluppo ed ottimizzati per la fase per la fase seo, però potremmo anche chiamare chiamarli tranquillamente solo una titolo due titolo tre.

Ovviamente a crescere questo è sicuramente più identificativo di titolo grande titolo piccolo perché altrimenti non abbiamo anche qui la scala che ci aiuta a rapportarci una volta fatto questo, quindi scriviamo.

In questo caso mettiamo che metto titolo una oppure anzi h uno, come abbiamo detto prima e vado a creare lo stile.

Lo faccio per tutti quelli che ho di seguito e quello che mi trovero' è quello che vedete qui a destra, quindi mi troverò già tutti gli stili definiti.

Quindi se adesso io volessi andare a prendere un testo metterlo all'interno del mio layout come in questo caso questo supponiamo che non ho ancora collegato nessun tipo di anzi mettiamolo facciamo così mettiamo come se fosse un we're from questo è il mio wilfried.

Sto lavorando su questo blocco di testo.

So già che è il titolo più grande della pagina.

Vado a prendere e gli dico già guarda, tu sei una h una ok.

Se invece dice magari nella parte piu' bassa e voglio enfatizzare dagli una gerarchia diversa ho già creato lo stile h due.

Eccolo qua e via a scendere sempre un po' più piccoli, ma sempre qualcosa che mi rimane armonico.

Vedete per esempio questo secondo è già nella mia paletta lacca quattro che avevo standardizzato quando ho fatto la scala e la cosa interessante è che potete vedere è che io posso mixare insieme sia lo stile del colore che lo stile della tipografia che non vanno mai insieme.

Quindi il colore è non è legato alla tipografia e viceversa.

La tipografia non ha uno stile di colore da portarsi dietro m'ha posto in ogni momento andare a sovrascrivere lo con un altro colore all'interno della mia paletto.

Anche qui ritorno sul fatto che questa modalità è molto coma che è molto comoda conviene definirla prima perché in qualsiasi momento io posso andare appunto a dire guarda questa per esempio non mi non mi convince la grandezza della h quattro io vado, vado qui sul setting guardate siccome che quattro ce ne sono diversi in pagina.

Se io vado ad aumentare la dimensione chiaramente la vado a diventare aumentare su tutti gli elementi in pagina che condividono quell'informazione.

Quindi immaginate quanto è forte e potente questa modalità è un modo già se qualcuno conosce un po', il fronte e il css è un modo già di fare quasi dei fogli di stile all'interno del mio degli ottimi consentono in qualsiasi momento di poter andare a meditare un'altra cosa che non ho detto, ma che è importante tenere in considerazione.

Adesso ve lo faccio vedere da qua è la parte dell'inter linea.

Come vedete ogni volta che io seleziono uno stile come in questo caso ci ha sempre scritto il numero, la grandezza della dimensione del fronte accanto auto questo auto è l'inter linea la distanza all'interno delle righe che compongono un paragrafo di un blocco di testo.

Qual è la giusta interlinea da dare? Ecco la cosa buona di feedback lavora per un valore assoluto io se a questo questa fronte è cinquantasei, io qui non li metto cinquantasei ma posso dirgli auto che in realtà prende il cento per cento e appunto posso dargli un valore relativo voglio dirti rispetto a questa dimensione qua tu vali il centoventi per cento ecco qua che ho fatto questa interlinea che non ha un valore fisso perché sto ponendo l'accento su questo? Perché se io domani questo lo faccio diventare settantadue la sua distanza la sua interlinea è costante in percentuale invece se avessi messo un numero fisso e adesso ve lo faccio vedere guardate invece di mettere centoventi per cento metto appunto sessantuno un valore numerico e vado ad aumentare invece solo il valore della dimensione del fronte.

Guardate che succede che l'inter linea ad un certo punto non va più bene perché non si sta non sta aumentando in maniera relativa e percentuale, ma è rimasta alla posizione fissa sessantuno.

Quindi quando vedete questo auto qua accanto sta in qualche modo già suggerendo che l'inter linea al cento percento.

Questo vale molto bene per i titoli.

Un pochino meglio, per un pochino meno per le parti, Brody, dove invece vi consiglio di utilizzare quel parametro che abbiamo visto prima nella parte tipografica di uno di centotrenta per cento.

Centocinquanta percento.

Perché vi faccio vedere adesso se noi prendiamo un pezzo di testo, prendiamo questo, me lo porto fuori.

Guardate, Se questo fosse per esempio, al, sarebbe decisamente molto, molto, molto stretto, perché è un testo piccolo, è un testo che mi deve aiutare la fruizione, mentre il cento percento va bene per i titoli.

Vi consiglio appunto quando lavorate su testi di lettura, appunto di appoggio all'interno dell'interfaccia di utilizzare centoquaranta centocinquanta percento.

Vedete come il layout più arioso e appunto, rimane costante.

Se voi domani andate a dire che questo è diciassette diciotto diciannove, venti quelli interni.

Rimane comunque armonica e quindi vi consente di gestire, di rendere scalabile il vostro layout.

Ripeto il fine di tutto questo e fare in modo che voi potete progettare sia in maniera scalabile sia in maniera responsible.

E non concentrarti troppo su queste piccole cose, perché una volta che l'avrete standardizzate dappertutto, poi per cambiarle ci mettete un click.

Veramente potete concentrarvi su altri aspetti del design all'interno della vostra progettazione.