Tipografia : Migliorare quella del nostro sito web in meno di 30 minuti

Condividi

La tipografia è uno di quegli elementi che ha un forte impatto sul marchio e sull’esperienza, il che lo rende uno degli elementi più importanti di un sito web fondamentale tanto quanto complesso, visto che il cambio in toto dell’intera tipografia – cambio del carattere e misura dello stesso, aumento dell’interlinea, eccetera – è un percorso dispendioso, in termini di tempo, e ad ostacoli.

Comunque, vi sono delle semplici modifiche che possiamo apportare alla tipografia e che ci faranno perdere meno di trenta minuti; andiamo a vedere quali sono:

Migliorare la tipografia del tuo sito web in pochi minuti

Aumento contrasto del colore

Il designer vedrà un testo come un blocco dentro un progetto visivo; mentre l’utente lo legge riga per riga, il professionista lo posiziona come una forma e di conseguenza si tende a sottovalutare la quantità di contrasto che il testo richiede.

tipografia - utilizzare giusti contrasti

Il grigio chiaro, ad esempio, può risultare gradevole alla vista ma risulta funzionalmente inutile. Dobbiamo pensare all’utilità, al fine del testo; esso è pensato per essere letto e deve rispettare certi determinati standard (WCAG AA e WCAG AAA, rispettivamente per desktop e mobile); più grande sarà il testo più margine di manovra avremo.

Il testo deve passare attraverso un test di contrasto e, come punto su cui basarci per iniziare, un testo di 18 px su sfondo bianco non dovrebbe essere più chiaro di #595959.


Stringere spaziatura nei titoli

I titoli, contrariamente al testo in esecuzione, tendono più al breve e sono circondati da spazi bianchi, specie sotto e sopra. Gli spazi bianchi extra, oltre a separare le lettere, riempiono lo spazio negativo nelle forme delle parole. Al fine di compensare, restringiamo la spaziatura delle lettere e quella delle parole delle intestazioni dell’1-5%.

tipografia - restringere spaziatura nei titoli

Utilizzare il letter spacing (nel modo giusto)

Il letter-spacing è molto importante quando parliamo di alcuni elementi legati alla tipografia. Il nostro cervello, durante la lettura, non elabora le parole lettera per lettera, riconosce le forme delle parole e dei gruppi di parole.

La maggior parte della micro tipografia è atta a non interrompere quelle forme di parole; vi sono momenti, tuttavia, in cui vogliamo interrompere questo flusso e consentire i singoli caratteri: allentiamo la spaziatura tra le lettere su tutto il testo destinato ad essere letto come una serie di caratteri, come dati tabulari, codici di monitoraggio e numeri di serie.

letter spacing - spaziare le lettere nel modo corretto
Allentiamo la spaziatura tra le lettere su qualsiasi testo destinato alla lettura come una serie di caratteri

Utilizziamo caratteri di sistema per gli input

Quello della privacy è un fattore molto sentito dall’utenza; qualunque passo fatto dai professionisti al fine di rassicurare l’utenza sulla sicurezza dei loro dati aumenterà in positivo l’UX del nostro sito.

Definiamo lo stile degli input HTML utilizzando i caratteri di sistema: i caratteri predefiniti, impostati dall’OS, con cui l’utenza accede al sito. Questo delinea i dati del marchio nei caratteri del marchio e i dati dell’utenza nei caratteri dell’utenza.

Utilizzare i caratteri di sistema in questo modo rassicura l’utenza sui propri dati, incoraggia l’utente a sentirsi proprietario dei propri dati. Quindi, va a creare un rapporto di fiducia e aumenta le conversioni.

tipografia - caratteri standard per gli input
Rassicuriamo l’utenza con caratteri standard per i campi di input

Usiamo stili puliti e corretti

E’ comune che i siti simulino stili alternativi utilizzando CSS; i motivi sono tanti e vanno dalla disponibilità di caratteri all’ottimizzazione aggressiva. Il corsivo può essere simulato come obliquo con un’inclinazione, il bold utilizzando le impostazioni predefinite del browser, mentre il maiuscolo impostando il testo in maiuscolo e riducendo la dimensione del carattere.

Questi trucchetti sono controproducenti, creano forme di parole distorte che vanno ad interrompere il flusso naturale del testo.

Se non possiamo piazzare il corsivo, il grassetto o il MAIUSCOLO autentico cerchiamo di non fingere, utilizziamo modi alternativi per creare enfasi come il cambio di colori.

tipografia - caratteri puliti

Utilizziamo le giuste virgolette

Le virgolette, singole o doppie, come gli apostrofi, sono caratteri specifici; la maggior parte dei caratteri fornisce un glifo distinto dal tasto rapido, con virgolette singole o doppie sulla tastiera.

tipografia smart quotes

Queste vengono chiamate “virgolette intelligenti” (smart quotes), perché le app di elaborazione dati hanno la possibilità di essere intelligenti sui glifi che utilizzano. Se si vuol offrire un testo raffinato, l’utilizzo delle virgolette corrette è uno dei modi più semplici per riuscirci.

Buona fortuna!

Informazioni Autore

Maniscalco Filippo

Blogger, copywriter, project manager. Propositivo e dedito al lavoro, gestisce ogni progetto con passione e dedizione. Appassionato di lettura, scrittura e musica. contatti
DESIGNTEGRATOR.COM | © 2020 | Cookie e Privacy | Agenzia Grafica - Sede di Palermo