Tipografia nel design

Come sa ogni esperto di marketing, le prime impressioni contano. La maggior parte degli utenti abbandonerà rapidamente una pagina web se il contenuto non è chiaro e accattivante. Il tuo team creativo lavora sodo per trasmettere il messaggio del tuo brand con un linguaggio coinvolgente e accessibile. Ora contano su di te per prendere le giuste decisioni in materia di caratteri tipografici e design, per migliorare la leggibilità e il coinvolgimento del brand.

Continua a leggere per scoprire di più su:

• Che cos'è la tipografia e perché è importante
• 5 tipi di carattere più popolari e 6 elementi chiave della tipografia
• Come trovare ed esplorare caratteri tipografici e font con Figma

Cos'è la tipografia?

La tipografia nel design consiste nella creazione o selezione di un sistema di caratteri tipografici e font per esprimere la parola scritta. Questa forma d'arte creativa è in grado di suscitare forti emozioni, utilizzando caratteri visivamente accattivanti e disponendoli in modo da esprimere la personalità del brand. Una tipografia ben realizzata può migliorare la chiarezza della comunicazione, garantendo una facile leggibilità e comprensibilità.

Perché la tipografia è importante?

La tipografia svolge un ruolo chiave nella creazione di siti web, app, e-mail, ebook e altro ancora. Una buona tipografia può aiutarti a:

• Attrarre utenti con caratteri ed elementi tipografici che catturano la loro attenzione già prima che inizino a leggere.
• Impostare la gerarchia visiva con dimensioni dei caratteri, pesi, font serif e/o sans-serif, abbinamenti di font e combinazioni di caratteri tipografici coerenti per guidare gli utenti e migliorare la leggibilità.
• Costruire il riconoscimento del marchio. Se utilizzata in modo coerente, una buona tipografia aiuta gli utenti a identificare il tuo brand attraverso il carattere tipografico e gli stili di font utilizzati per i tuoi contenuti.
• Sostenere gli obiettivi dei contenuti. La spaziatura uniforme tra le lettere, la lunghezza delle righe, l'uso delle maiuscole e delle minuscole e altri elementi tipografici migliorano la leggibilità, mentre i font utilizzati come elementi di design grafico amplificano il tono e il significato.

Breve storia della tipografia

Johannes Gutenberg contribuì a dare il via all'evoluzione dei caratteri tipografici europei nel 1400, quando inventò la prima macchina da stampa a caratteri mobili in metallo. Gutenberg utilizzava caratteri tipografici in stile gotico (noti anche come blackletter) per comporre righe di testo più lunghe per manoscritti e testi religiosi. Gli stampatori italiani crearono ben presto un carattere tipografico più semplice e compatto, originariamente chiamato Antiqua, oggi meglio conosciuto come Roman. Gli stampatori europei lanciarono quindi i caratteri tipografici in corsivo, riuscendo a comporre ancora più parole per pagina.

Facciamo un salto in avanti alla fine del 1700 e all'inizio del 1800, quando i primi caratteri tipografici serif moderni fecero il loro ingresso sul mercato. Poi arrivarono i caratteri sans-serif, che dominarono il mondo della stampa europea fino al XX secolo. Fu allora che vennero adottati caratteri tipografici più chiari e leggibili come Times New Roman, Futura, Helvetica e Arial. Oggi, i grafici e i web designer di tutto il mondo hanno accesso a vaste librerie di caratteri tipografici e font.

5 tipi di carattere più popolari

I designer moderni scelgono solitamente tra cinque tipi di caratteri tipografici più diffusi: serif, sans serif, script, monospace e display. Ogni carattere tipografico include una famiglia di font che copre i vari stili di quel carattere tipografico. Ad esempio, Helvetica è un tipo di carattere, mentre Helvetica Light e Helvetica Regular sono font.

• Font serif: questo font formale, più tradizionale, ha linee o tratti corti che si estendono dalle estremità superiori e inferiori delle lettere. Brand noti come New York Times, Sony e J.P. Morgan optano per un carattere tipografico serif. Ad esempio: Times New Roman e Garamond.
• Font sans serif: questo carattere semplice e moderno non include gli svolazzi presenti nel carattere tipografico serif. È una scelta popolare per i brand giovani e le startup tecnologiche (si pensi a Target, Airbnb e Doordash). Esempi di caratteri tipografici sans serif includono Helvetica, Arial e Calibri.
• Font script: questo carattere fluido e corsivo può variare da un'elegante calligrafia a stili di scrittura a mano giocosi. Non ideale per il testo, un font script è più adatto a citazioni, firme e brevi intestazioni. Ad esempio: Snell Roundhand, Pacifico e Scriptina.
• Font a larghezza fissa: questo carattere in stile retrò e macchina da scrivere presenta lettere e spaziatura a larghezza fissa, in modo che il carattere di ciascuna parola occupi la stessa larghezza. Utilizzato nel codice sorgente per facilitarne la leggibilità, il carattere tipografico a larghezza fissa compare anche in numerosi siti web e progetti grafici. Esempi includono Courier, Bergen Mono e Source Code Pro.
• Font display: conosciuti anche come decorativi, questi caratteri tipografici accattivanti possono aggiungere un tocco di stile e originalità a loghi, banner e titoli. Esempi di caratteri tipografici display includono Clearview, Johnston e Skywalker.

Elementi chiave della tipografia

È possibile perfezionare l'aspetto, la leggibilità e l'atmosfera di una parola, una riga di testo o un prodotto modificando uno o più elementi tipografici.

Allineamento

Per ottenere equilibrio e aiutare gli utenti a scorrere facilmente una pagina, allinea gli elementi di design, come il logo, un'immagine, l'intestazione e il testo. Spazia equamente ogni elemento del design e utilizza margini e padding in modo coerente. Allinea il testo a sinistra, a destra o al centro in base alle esigenze del tuo progetto. Ad esempio, i designer possono allineare al centro un'intestazione o una breve citazione, ma allineare a sinistra un testo lungo.

Colore

Scegli una palette di colori coerente con il tuo brand e che trasmetta chiaramente il tuo messaggio. Regola l'opacità del testo e usa colori complementari che creano un buon contrasto per garantire leggibilità e accessibilità, puoi utilizzare un generatore di ruota colore per creare una palette di colori ben bilanciata. Consiglio da esperto: Consulta le linee guida per l'accessibilità dei contenuti web per rapporti di contrasto ideali. Colori più vivaci e brillanti possono funzionare meglio per titoli e sottotitoli, mentre i colori neutri sono più adatti a grandi blocchi di testo.

Gerarchia

Sviluppare una gerarchia nella tipografia aiuta a dare priorità e mettere in evidenza le informazioni chiave, rendendole più facili da scansionare e assimilare. Rendi i titoli più grandi dei sottotitoli e i sottotitoli più grandi del corpo del testo. Ad esempio, il testo del corpo del sito web è generalmente di 16 px, con intestazioni H1 impostate a 48 px. Gioca con lo spazio bianco, l'allineamento del testo, il colore e diversi caratteri tipografici per rafforzare la gerarchia visiva.

Crenatura

Regola la quantità di spazio tra le singole lettere in modo che la distanza appaia coerente. Una corretta spaziatura tra i caratteri aiuta a migliorare l'attrattiva visiva del testo e a incrementarne la leggibilità.

Interlinea

L'interlinea si riferisce all'altezza della linea, ovvero alla distanza tra la linea di base di una riga di testo e la linea di base della riga di testo sopra di essa. In generale, un'altezza della linea di 1,125 e 1,200 volte la dimensione del font (112,5%–120.0%) migliora la leggibilità. Detto questo, ogni tipo di carattere tipografico richiede una messa a punto accurata, compresa un'attenta spaziatura delle righe.

Tracciamento

È possibile migliorare la leggibilità con il tracking (ovvero la spaziatura tra i caratteri), che riguarda la spaziatura complessiva tra le lettere in una parola o in una riga di testo. Aumenta il tracking per aggiungere spazio e diminuiscilo per ridurlo. Le parole o le frasi visualizzate in tutte lettere maiuscole sono a volte più facili da leggere con un maggiore tracking.

Come scegliere il giusto carattere tipografico

Il processo di scelta di un carattere tipografico si suddivide nei seguenti passaggi chiave:

• Considera il campo del tuo progetto, i requisiti e gli obiettivi. Poni al tuo team domande chiave sui contenuti: come stiamo fornendo i contenuti (tramite app, sito web, e-mail o materiale stampato)? Chi è il nostro pubblico e quali sono le loro esigenze? Quali caratteri e font usano i nostri concorrenti? Tieni presente che alcuni caratteri tipografici sono più adatti alle intestazioni rispetto al testo del menu. Altri hanno ampie famiglie di font con script internazionali, glifo e altri caratteri speciali.
• Crea una moodboard per sviluppare un tono visivo, basato sulla ricerca dell'utente e della concorrenza. Per iniziare, usa il modello di moodboard di FigJam. Suggerimento professionale: esaminare soluzioni simili può aiutare a identificare modelli e norme utili.
• Esplora le opzioni di caratteri tipografici sul tuo computer o su siti come Google Fonts. Cerca un carattere tipografico con elementi visivi che rispecchino ciò che desideri comunicare con il tuo prodotto o brand. Ad esempio, se il tono del tuo brand è professionale piuttosto che spensierato, scegli un carattere serio con pochi decori. Quale di questi esempi di design Figma ti sembra più professionale? Se hai scelto il modulo a sinistra, sei sulla strada giusta. Quel modulo utilizza Roboto, un carattere tipografico sans serif pulito e facile da leggere. Il modulo a destra include Almendra, un carattere calligrafico spesso usato nei libri per bambini.

• Scegli caratteri che siano in linea con il brand e accattivanti per supportare gli obiettivi del tuo progetto. Considera la struttura complessiva delle lettere (ad esempio, altezza della x, altezza delle maiuscole, contorni, ascendenti e discendenti), la capacità di ridimensionamento, la leggibilità, la personalità e la decorazione. Questi elementi influenzano l’aspetto e la sensazione complessiva di un carattere tipografico.
• Prova i tuoi caratteri con contenuti reali e pertinenti. Questo è il modo migliore per scegliere un carattere tipografico che coinvolga i tuoi utenti. Prova il carattere tipografico in diverse dimensioni per assicurarti che funzioni sia per testi grandi che piccoli.
• Testa i colori del tuo brand sul tuo carattere tipografico. Iniziamettendo il testo nero su uno sfondo bianco e il testo bianco su uno sfondo nero. Poi applica il colore principale del tuo brand al testo e verifica come il carattere funziona su sfondi sia bianchi che neri. Inverti i colori per vedere come appare il testo bianco e nero su uno sfondo nel colore principale del tuo brand.

Peso e stile

In un carattere tipografico, ad esempio, Montserrat di Julieta Ulanovsky and studio, ci sono stili e pesi multipli, come normale, grassetto, corsivo, sottile, nero, ecc., e ciascuno ha un font. Un font è un file che consente di installare e utilizzare un insieme di caratteri tipografici con un determinato spessore e stile di testo. Un carattere tipografico con più pesi ha un font per ogni peso, insieme sono conosciuti come una famiglia di caratteri.

Il carattere tipografico Montserrat ha una famiglia di 18 font: Thin, Thin Italic, Extra-Light, Extra-Light Italic, Light, Light Italic, Regular, Regular Italic, Medium, Medium Italic, Semi-Bold, Semi-Bold Italic, Bold, Bold Italic, Extra-Bold, Extra-Bold Italic, Black, and Black Italic.

Peso si riferisce allo spessore del tratto di una lettera. Un carattere tipografico può variare in termini di spessore da sottilissimo a ultra-nero e avere molti font intermedi, mentre alcuni caratteri tipografici possono essere disponibili in un solo spessore. Questi pesi hanno anche un'associazione numerica, utile da comprendere quando si programma o si collabora con uno sviluppatore. I pesi generalmente corrispondono a un numero su una scala da 100 a 900, con intervalli di 100: Regular 400, Medium 500, Semi-Bold 600, Bold 700, ecc.

Lo stile del font è la regolazione dei caratteri o delle maiuscole, come il corsivo e le maiuscole rispettivamente. Alcuni caratteri tipografici non hanno opzioni di stile e talvolta offrono solo un peso Regular.

Il maiuscolo e il minuscolo sono la distinzione tra lettere più piccole come quelle minuscole e lettere più grandi come quelle maiuscole. La maggior parte dei set di caratteri ha lettere di entrambi i tipi, mentre font come Bangers sono impostati solo in maiuscolo. I caratteri impostati solo in lettere maiuscole o solo in lettere minuscole sono molto meno comuni.

In inglese, i vari stili di maiuscole vengono utilizzati in modo diverso, a seconda delle circostanze:

• Il Titolo è Uno Stile Misto in Cui Tutte Le Parole di Una Frase Sono Scritte in Maiuscolo, ad Eccezione degli Articoli, delle Preposizioni Brevi e delle Congiunzioni. Queste eccezioni sono in qualche modo soggettive.
• Il sentence case (prima lettera maiuscola) è quello in cui siamo abituati a vedere il testo scritto, inclusa questa frase.
• ALL CAPS (tutto maiuscolo) è quando tutto il testo è maiuscolo ed è comunemente usato per titoli, loghi, testo sui pulsanti o altri tipi di etichette. Usalo per dare enfasi, piuttosto che per testi lunghi dove la mancanza di ascendenti e discendenti può rendere difficile la lettura in grandi quantità. Il tutto maiuscolo è utilizzato anche online per simulare l'atto di urlare, pertanto si consiglia di evitarne l'uso nelle chat e nelle interfacce basate sulla conversazione.
• Il maiuscoletto ha una forma simile alle lettere maiuscole, ma è alto quanto l'altezza della x del carattere tipografico. Il maiuscoletto è utilizzato per distinguere il testo dal titolo, tuttavia non è disponibile in molti caratteri tipografici.
• il testo interamente in minuscolo è una scelta stilistica utilizzata in alcuni prodotti e brand denominativi per motivi estetici.

Dimensione

Impostare e cambiare la dimensione del carattere può essere una decisione difficile. Dipenderà molto dal mezzo su cui apparirà il testo, come carta, telefono cellulare o cartellone pubblicitario, e potrà variare a seconda del dispositivo utilizzato dal lettore o della reattività del design.

È importante stabilire una gerarchia nella scelta dei caratteri, utilizzando la dimensione come uno degli elementi di enfasi.

Nello sviluppo web, è necessario definire alcune dimensioni chiave, come il titolo, il sottotitolo, il corpo del testo, il menu e il piè di pagina, ecc. Molti designer iniziano con la dimensione dell'intestazione, nota anche come H1, ma potrebbe essere utile iniziare con la dimensione del corpo del testo, poiché è così che gli sviluppatori front-end potrebbero implementarla. Quando uno sviluppatore lavora in ems, un'unità di misura basata sul ridimensionamento, la dimensione del testo del corpo è 1em e ogni altra dimensione del testo è un multiplo o una frazione di essa.

Ad esempio, una dimensione comune del testo per il web è 16 px. L'H1 può essere impostato a 3em, ovvero tre volte la dimensione del corpo del testo, in questo caso 48 px. Poiché la pagina web sarà progettata per diverse dimensioni di schermo, i design che crei potrebbero richiedere dimensioni di font diverse a seconda del dispositivo del cliente. Lo sviluppatore può far cambiare la dimensione del corpo del testo con le dimensioni del browser del tuo cliente, e tutto il resto del testo si adatterà di conseguenza.

Dettagli

Gran parte della tipografia riguarda i piccoli dettagli e le sfumature.

Ad esempio, quando si impagina un testo, uno degli aspetti da esaminare è il margine irregolare. Il raggruppamento è il margine irregolare del testo allineato a sinistra e a destra. È possibile modificarlo aumentando o diminuendo la larghezza di una casella di testo o cambiando la spaziatura tra le lettere dell'intero corpo del testo.

Quando una o due parole finiscono alla fine di un paragrafo, si parla solitamente di “vedova”. O all'inizio della colonna successiva, un "orfana".

Tuttavia, come sottolinea May-Li Khoe:

Preferisco indicarle come "pendenti" invece.

Man mano che le caselle di testo vengono modificate per evitare le lettere "pendenti", viene modificata anche la lunghezza della riga. Per il testo in inglese, limitare la lunghezza delle righe a circa 40-60 caratteri, spazi e punteggiatura inclusi, è l'ideale per garantire accessibilità e leggibilità. Se le lunghezze delle linee devono essere superiori a 60 caratteri, aumenta l'altezza della linea per una migliore leggibilità.

Uno dei modi più semplici per rendere un documento o un'interfaccia ben progettati è la coerenza nella disposizione degli oggetti nello spazio.

Supponiamo che lo schermo della tua app abbia un titolo a 100 px dalla parte superiore della cornice o dello schermo. Vuoi che tutti gli altri schermi dell'app con titoli simili abbiano quei titoli nello stesso punto.

Le guide e le misurazioni sono tue alleate in questo caso: basta cliccare e trascinare da un righello in Figma per creare una guida e tenere premuto il tasto Alt quando un oggetto è selezionato per vedere la distanza dagli oggetti circostanti.

Consideriamo il lato sinistro, o margine verticale sinistro, di un sito web, un poster, la schermata di un'app, un'infografica, ecc., contenente un logo, un'immagine, un'intestazione e del testo. Allineando questi elementi tra loro sarà più facile per l'occhio scorrere la pagina, ma anche il layout di questo contenuto apparirà più curato e intenzionale.

La giustificazione è un concetto di allineamento specifico per blocchi o linee di testo.

• Giustificato a sinistra è quando l'inizio di ogni riga di testo parte dallo stesso valore x lungo un margine sinistro. Questo è anche noto come allineato a sinistra e crea un margine frastagliato a destra.
• Giustificato a destra è quando la fine di ciascuna riga di testo è a filo contro un margine destro. Questo è anche noto come allineamento a destra e crea un margine irregolare a sinistra.
• La giustificazione completa si ha quando entrambe le estremità sinistra e destra delle righe di testo sono allineate ai lati della casella di testo. La spaziatura tra le lettere e le parole viene regolata per impostare ciascuna riga di testo a una larghezza coerente. Non c'è margine irregolare con la giustificazione completa.
• Il testo centrato è l'assenza di giustificazione.

Dai il via alle tue esplorazioni tipografiche con Figma

Figma fornisce risorse di design professionali per iniziare, inclusi lo strumento di design di Figma e un esempio di esplorazione dei caratteri tipografici. Puoi anche costruire una moodboard per il brand utilizzando il creatore di moodboard di FigJam.

Per ulteriori suggerimenti professionali, consulta l'articolo di Figma su come costruire e implementare sistemi tipografici in Figma.

Hai bisogno di ispirazione? Dai un'occhiata alla robusta libreria di modelli di tipografia, esempi e guide stilistiche condivisi dalla community di Figma.

Pronto a trovare un carattere che elevi il tuo brand?