Che sia sui nostri telefoni, nei libri o sui siti web, stiamo costantemente digerendo le parole scritte. Dai libretti di istruzioni ai fronti del negozio, il tipo è tutto intorno a noi. Spesso riflettiamo sul potere della parola scritta, ma raramente consideriamo il ruolo del designer nell’emulare il tono della parola o della frase.
Dietro le quinte, un designer si è preso il tempo di considerare la relazione tra l’aspetto del testo e ciò che dice il testo. In realtà, diversi stati d’animo, atmosfere ed emozioni possono essere espressi semplicemente attraverso la scelta del tipo. Ma che cosa è in realtà la tipografia—e perché è così vitale?
In questo articolo, solleveremo il coperchio su tutto ciò che devi sapere sulla tipografia. Inizieremo con la definizione di tipografia, compresa una breve storia delle sue origini. Affronteremo quindi i vantaggi di una buona tipografia e l’impatto che può avere sui tuoi utenti. Infine, esamineremo i diversi elementi che compongono la tipografia e cosa significano tutti.
Ecco cosa tratteremo:
- Che cos’è la tipografia?
- Perché la tipografia è importante?
- I diversi elementi della tipografia
- Come scegliere il carattere corretto per il tuo sito web
- Conclusione
Pronto? Tuffiamoci!
Che cos’è la tipografia?
Iniziamo con le basi: cos’è in realtà la tipografia? In sostanza, la tipografia è l’arte di organizzare lettere e testo in un modo che rende la copia leggibile, chiara e visivamente attraente per il lettore. La tipografia coinvolge lo stile del carattere, l’aspetto e la struttura, che mira a suscitare determinate emozioni e trasmettere messaggi specifici. In breve, la tipografia è ciò che dà vita al testo.
Nel video qui sotto, CareerFoundry UI design mentor Olga solleva il coperchio sul perché la tipografia è importante—e quale differenza fa per i tuoi utenti.
La tipografia può essere datata all’xi secolo, durante l’innovazione del tipo mobile. Prima dell’era digitale, la tipografia era un mestiere specializzato associato a libri e riviste e, infine, alle opere pubbliche. Il primo esempio di tipografia può essere visto nella Bibbia di Gutenberg, che ha dato il via a una rivoluzione tipografica in occidente. Fatto divertente: lo stile di tipo utilizzato nella Bibbia Gutenberg è ora conosciuto come Textura, e lo troverete nel menu a discesa font sulle principali applicazioni desktop oggi!
Avanti veloce ai giorni nostri, dove la tipografia è per lo più associata sia al mondo digitale che alla stampa. Con la nascita di Internet è arrivata un’esplosione creativa dell’arte della tipografia. Improvvisamente, i web designer avevano un’abbondanza di font e opzioni di tipo a loro disposizione, rendendo la tipografia visivamente più diversificata che mai.
Perché la tipografia è importante?
La tipografia è molto di più della semplice scelta di caratteri belli: è una componente vitale del design dell’interfaccia utente. Una buona tipografia stabilirà una forte gerarchia visiva, fornirà un equilibrio grafico al sito Web e stabilirà il tono generale del prodotto. La tipografia dovrebbe guidare e informare gli utenti, ottimizzare la leggibilità e l’accessibilità e garantire un’esperienza utente eccellente.
Approfondiamo un po ‘ più a fondo perché la tipografia è così importante.
La tipografia crea il riconoscimento del marchio
Non solo la buona tipografia migliorerà la personalità del sito web, ma i tuoi utenti inizieranno subliminalmente ad associare il carattere tipografico presente sul tuo sito al tuo marchio. Tipografia unica e coerente ti aiuterà a stabilire un forte seguito da parte degli utenti, a creare fiducia con i tuoi utenti e a portare avanti il tuo marchio.
La tipografia influenza il processo decisionale
La tipografia ha un profondo effetto sul modo in cui gli utenti digeriscono e percepiscono le informazioni trasmesse dal testo. Il tipo accattivante è molto più persuasivo dei caratteri deboli che non rafforzano il messaggio del testo.
Tipografia tiene l’attenzione dei lettori
Una buona tipografia potrebbe essere la differenza tra qualcuno che rimane sul tuo sito web per un minuto o mezz’ora. È importante che il tuo sito web sia visivamente stimolante e memorabile, e la tipografia gioca un ruolo enorme in questo processo.
I diversi elementi della tipografia
Per iniziare nella tipografia, è necessario prima fare i conti con gli otto elementi essenziali di progettazione tipografica.
Font e caratteri tipografici
C’è una certa confusione che circonda la differenza tra caratteri tipografici e caratteri, con molti che trattano i due come sinonimi. Un carattere tipografico è uno stile di design che comprende una miriade di caratteri di varie dimensioni e peso, mentre un carattere è una rappresentazione grafica del carattere di testo. In parole povere, un carattere tipografico è una famiglia di caratteri correlati, mentre i caratteri si riferiscono ai pesi, alle larghezze e agli stili che costituiscono un carattere tipografico.
Esistono tre tipi di carattere di base: serif, sans-serif e decorativo. Per mantenere l’interfaccia ordinata e snella, un buon designer non userà mai più di tre caratteri e manterrà i caratteri decorativi al minimo. La maggior parte dei progettisti dell’interfaccia utente accoppierà i font serif con font sans-serif, ad esempio inserendo il testo del corpo principale in un font serif e inserendo il titolo in un font sans-serif o viceversa.
Contrasto
Proprio come la gerarchia, il contrasto aiuta a trasmettere quali idee o messaggi vuoi enfatizzare ai tuoi lettori. Passare un po ‘ di tempo sul contrasto rende il testo interessante, significativo e che attira l’attenzione. La maggior parte dei designer crea contrasto giocando con diversi caratteri tipografici, colori, stili e dimensioni per creare impatto e suddividere la pagina.
Consistenza
Mantenere i caratteri coerenti è la chiave per evitare un’interfaccia confusa e disordinata. Quando si trasmettono informazioni, è essenziale attenersi allo stesso stile di carattere, in modo che i lettori capiscano immediatamente ciò che stanno leggendo e inizino a notare un modello. Mentre va bene giocare con i livelli di gerarchia in una certa misura, è buona norma stabilire una gerarchia coerente di caratteri tipografici (un carattere coerente per le intestazioni, un altro per i sottotitoli) e attenersi ad esso.
Spazio bianco
Spesso indicato come “spazio negativo”, lo spazio bianco è lo spazio attorno al testo o alla grafica. È spesso trascurato e tende a passare inosservato dall’utente, ma l’uso corretto dello spazio bianco garantisce che l’interfaccia sia ordinata e che il testo sia leggibile. Lo spazio bianco può anche attirare l’attenzione sul testo e fornisce un’esperienza complessiva esteticamente gradevole. Lo spazio bianco spesso assume la forma di margini, padding o solo aree senza testo o grafica.
Allineamento
L’allineamento è il processo di unificazione e composizione di testo, grafica e immagini per garantire che ci sia uguale spazio, dimensione e distanze tra ciascun elemento. Molti designer dell’interfaccia utente creano margini per garantire che il logo, l’intestazione e il corpo del testo siano allineati tra loro. Quando si allinea l’interfaccia utente, è buona norma prestare attenzione agli standard del settore. Ad esempio, allineare il testo a destra sembrerà controintuitivo per i lettori che leggono da sinistra a destra.
Colore
Il colore è uno degli elementi più eccitanti della tipografia. È qui che i designer possono davvero diventare creativi ed elevare l’interfaccia a un nuovo livello. Il colore del testo, tuttavia, non deve essere preso alla leggera: inchiodare il colore del carattere può far risaltare il testo e trasmettere il tono del messaggio, ma sbagliare può comportare un’interfaccia disordinata e un testo che si scontra con i colori del sito.
Il colore ha tre componenti chiave: valore, tonalità e saturazione. Un buon designer saprà bilanciare queste tre componenti per rendere il testo accattivante e chiaramente leggibile, anche per chi ha problemi visivi. Spesso, i progettisti testeranno questo visualizzando il testo in scala di grigi (senza colore) e apportando modifiche se il testo è troppo scuro o troppo chiaro rispetto al colore di sfondo.
Gerarchia
Stabilire la gerarchia è uno dei principi più vitali della tipografia. La gerarchia tipografica mira a creare una chiara distinzione tra pezzi prominenti di copia che dovrebbero essere notati e letti per primi e copia di testo standard. In un’epoca di brevi intervalli di attenzione causati dai social media, i designer sono invitati a essere concisi e creare caratteri tipografici che consentano agli utenti di consumare le informazioni necessarie in breve tempo.
La gerarchia può essere creata usando dimensionamento, colore, contrasto e allineamento. Ad esempio, se si dispone di una riga di copia con un’icona del punto esclamativo all’inizio che è in rosso e più grande della copia precedente, questo è un indizio visivo per i lettori che si tratta di un invito all’azione. L’esempio più tipico di gerarchia tipografica è size: le intestazioni dovrebbero essere sempre più grandi delle sottovoci e del testo standard.
Come si fa a scegliere il carattere giusto per il tuo sito web?
Ora che abbiamo familiarizzato con i diversi elementi tipografici, parliamo del processo di scelta dei caratteri tipografici per la tua interfaccia. Con così tanti diversi tipi di carattere e caratteri tipografici tra cui scegliere, è facile sentirsi sopraffatti. Fare la scelta giusta dipende molto di più che vedere ciò che sembra bello. Ecco alcune considerazioni chiave:
Pensa alla personalità
Come vuoi che i tuoi utenti si sentano quando entrano per la prima volta nel tuo sito web. Vuoi emulare un’atmosfera amichevole? Vuoi che il sito si senta di fascia alta, accogliente, giocoso o serio? È imperativo che la tipografia rifletta la personalità del marchio o del prodotto. Un buon punto di partenza di fronte a questa sfida è quello di definire i tratti fondamentali del vostro marchio, e iniziare a raccogliere caratteri tipografici che riflettono questi tratti. Da lì, puoi iniziare a notare una tendenza.
Rifletti sul tono
È altrettanto importante considerare come il font si armonizza con il tono del messaggio. Ad esempio, se si desidera trasmettere informazioni serie o importanti, scegliere un carattere meno stilizzato o decorativo che sia chiaramente leggibile e limiterà la distrazione.
Non lesinare sulla funzione
La funzione è altrettanto vitale quanto la forma: non c’è niente di peggio di un sito web che sembra carino ma è del tutto illeggibile, che ti porta a fare clic sul pulsante sbagliato o prendere una svolta sbagliata perché le istruzioni non erano chiare. Al momento di decidere quali caratteri da includere nell’interfaccia, impostare lo stile, l’estetica e la voce da parte e riflettere se il carattere è leggibile, leggibile e accessibile. Il testo può essere leggibile senza sforzo? I personaggi sono abbastanza distinti?
Considera le prestazioni
Una cosa che molti designer spesso trascurano è la scelta di caratteri tipografici che sono web browser friendly. Le librerie di font comunemente utilizzate come Google Fonts offrono file di font basati sul Web che possono essere resi perfettamente in un browser senza problemi. Suggerimento: quando si scaricano font web, non scaricare mai più set di caratteri del necessario. In questo modo, eviterai l’eccesso di peso!
Lasciati ispirare
Se non sei sicuro da dove cominciare, prenditi un po ‘ di tempo per vedere cosa stanno facendo gli altri. Apri gli occhi sulla tipografia che vedi intorno a te. Riesci a notare modelli simili? Riesci a vedere esempi buoni e cattivi di tipografia? Anche seguendo hashtag tipografia sui social media o cercando tipografia su Pinterest vi darà alcune buone idee di ciò che è là fuori. Puoi anche guardare a queste otto tendenze tipografiche per ulteriori ispirazioni.
Prenditi un po ‘ di tempo per testare
Il modo migliore per decifrare quale font utilizzare per la tua interfaccia? Prova, prova e prova! Raccogliendo feedback utili da utenti reali, otterrai una visione più chiara di ciò che funziona, cosa no, cosa è leggibile e cosa sembra controintuitivo o goffo.
Conclusione
La tipografia è spesso trascurata, ma è una componente cruciale del design dell’interfaccia utente. Mastering tipografia vi vedrà sulla buona strada per diventare un designer UI fantastico! Se non sei sicuro da dove cominciare, perché non andare ai tuoi siti Web preferiti e iniziare a prendere nota di quali caratteri tipografici sono andati per.
Vuoi saperne di più sulla progettazione dell’interfaccia utente? Dai un’occhiata a questi post del blog correlati:
- 10 esempi di bellissimi blog che hanno inchiodato il loro design dell’interfaccia utente
- 32 elementi dell’interfaccia utente per i progettisti dell’interfaccia utente: il tuo ultimo glossario
- Ecco come progettare un’icona da zero: una guida passo-passo