XYZ – Una guida alla scelta dei font

Famiglie e tipi di caratteri

Quando senti “web design”, a cosa stai pensando? Il layout di un sito web? Diversi stili, colori e sfondi? Il web design riguarda anche i caratteri e il modo in cui questi si combinano per rendere il sito armonioso. Parliamo di lettere e glifi.

Tipi

I caratteri si distinguono in diversi tipi, caratteri tipografici e famiglie. Esistono tre tipi generali, classificati in base a come vengono utilizzati.

Font web

Sono i caratteri che vedi nelle applicazioni web e nei siti web. Google Fonts e Adobe Fonts (precedentemente noto come Typekit) offrono un’ampia varietà di selezioni.

Font di sistema

Tendi a imbatterti in questi in programmi e applicazioni per PC e sul tuo dispositivo mobile.

Caratteri variabili

Sono insiemi di caratteri contenenti diversi pesi (spessori) e larghezze (distanza tra le lettere). Vengono utilizzati al giorno d’oggi in quanto si adattano automaticamente alle loro proprietà.

Esempio di come un carattere variabile può adattarsi a un dato spazio

Caratteri tipografici e famiglie di caratteri

Un carattere tipografico descrive come sono disegnate le lettere. Ciò include variazioni di spessore (sottile, grassetto), pendenza (corsivo) e larghezza (condensato).

Una famiglia di font, come Arial, può avere diversi caratteri tipografici con un nuovo nome di font, ad esempio Arial Black e Arial Narrow.

Le famiglie di caratteri sono evidenziate in blu e i loro caratteri tipografici (sfondo bianco), vengono forniti esempi per i caratteri sans serif e serif

In generale, si possono classificare le famiglie di caratteri in quattro tipologie: serif, sans serif, display e script. Esistono anche tipologie subordinate. Tra queste si trovano slab serif, moderni, monospazio o non proporzionali, solo per citarne alcuni.

Il Serif, come il Times New Roman, è il classico che nasce dalle stampe dei giornali.

Un serif è un piccolo tratto attaccato a una lettera che segue parallelamente alla riga di testo. I caratteri serif sono quindi più facili da leggere per l’occhio.

Sans Serif

Di questa famiglia, la più conosciuta è probabilmente Arial e Calibri. Sono font chiari senza abbellimenti o serif.

Script

Assomiglia ad una calligrafia. I caratteri sono giocosi, come il font Snell Roundhand o Edwardian.

Display

I caratteri, come Cooper Black o Fat Face, sono audaci e non convenzionali. Si vedranno, ad esempio, lettere maiuscole e minuscole mescolate e le dimensioni delle lettere (altezza e larghezza) invertite.

Evergreen e tendenze

Cos’è per te un bel font? Ricordi quando hai scarabocchiato alcune note su un pezzo di carta e dopo non sei riuscito a leggere la tua calligrafia? Ovviamente nessuno vuole decifrare un font.

Quindi, i caratteri devono essere:

• scalabili a tutte le dimensioni dei media, su stampa e digitale senza perdere qualità
  
  
• leggibili in termini di dimensioni e design dello script
  
  
• compatibili con altre famiglie di caratteri

Un sito web dovrebbe mostrare un massimo di tre caratteri diversi che vadano bene insieme e si adattino alla lunghezza della riga necessaria. Non devono per forza provenire dalla stessa famiglia di caratteri, ma devono essere chiaramente leggibili su tutti gli schermi e avere un bell’aspetto con qualsiasi colore. I loro caratteri tipografici devono essere ugualmente ben leggibili.

Classici versatili che non annoiano mai, sono font come:

• Arvo
• Roboto
• Lato
• Merriweather
• Montserrat
• Open Sans
• Times New Roman
• Playfair Display

Font nei costruttori di siti web

Quali font offre il tuo editor di siti web?

I modelli forniti da un costruttore di siti Web per creare il tuo blog, negozio online o sito Web personale sono progettati in modo tale che i caratteri corrispondano all’argomento del modello. Convenientemente, hai una precisa selezione di caratteri tra cui scegliere.

Nell’editor di Webnode, troverai i principali tipi di carattere elencati nelle affermazioni della riga di navigazione

A proposito, i caratteri maggiormente utilizzati da Webnode sono:

• Montserrat, Roboto o Open Sans della famiglia sans serif
• Playfair Display, Pt Serif o Merriweather per quelli con serif

Modificare tutti i caratteri per l’intero sito Web in una sola volta è spesso possibile nelle impostazioni di progettazione dell’editor. Qui puoi cambiare la combinazione di caratteri e famiglie di font.

Esempi di diversi font combinati nell’editor di Webnode

Le combinazioni di caratteri sono automaticamente “accoppiate al meglio”.  Si completano a vicenda in modo tale da corrispondere allo sfondo dell’immagine e al layout del sito. Pertanto, sono la ciliegina sulla torta del web design.

Tendenze

Il world wide web è iniziato con i caratteri sans serif. Semplicemente perché allora gli schermi non avevano una risoluzione nitida per far emergere tipi di carattere calligrafici e sperimentali. Ora, la creatività ci circonda. Non esiste un carattere “sbagliato”.

La tipografia web vive una rinascita. I caratteri di Google sono una fonte per i designer per sviluppare ulteriormente i caratteri tipografici.

Nel 2020 hanno dominato i caratteri sans serif. I lettering di caratteri espressivi come Goldplay e Versus stavano aumentando. Quest’anno la tendenza va verso la solidità e la chiarezza. Tuttavia, i sans serif sono di tendenza nel mondo digitale. I tipi di carattere sono realizzati in sans serif geometricamente chiari perché sono:

• Grassetto
• Nitidi
• Utilitaristici
• Solidi
• Puliti
• Usano lo spazio negativo

Scelta di un carattere

Basta nozioni. È il tuo turno. Come decidi qual è il font migliore per raccontare la tua storia?

Significato dei caratteri

Famiglie di font e loro caratteri tipici

I caratteri trasmettono uno stato d’animo. Hanno carattere. I caratteri script simili a quelli calligrafici scorrono con eleganza e passione. A causa dei loro tratti estesi, delle linee arrotondate e degli abbellimenti simili a fiocchi, sono più decorativi. Se Cenerentola potesse ballare un carattere, sarebbe Edwardian. Se un ristorante francese classificato Michelin propone un nuovo piatto d’autore, dovrebbe presentarsi in caratteri di script.

I caratteri di visualizzazione sono camaleontici, passando da divertenti a unici o giocosi. Il font rimbalzoso sulla scatola di fagioli Jelly Belly sa come attirarti nell’angolo giusto nel negozio di dolciumi.

I font moderni sono eleganti e audaci. Riconoscerai il carattere Futura sul marchio di alta moda Dolce & Gabbana e sul tuo conto PayPal.

A causa dell’antica eredità delle stampe dei giornali, i caratteri serif portano tradizione, fiducia e rispetto. La famosa rivista di moda Vogue utilizza Bodoni, un font serif. Apple originariamente citava “Think different” nella stessa famiglia di caratteri.

Al contrario, il font sans serif Trade Gothic è utilizzato da Nike o Helvetica da The North Face. Un font sans serif trasmette stabilità, forza, chiarezza e pulizia, caratteristiche spesso apprezzate dalle società sportive.

Stai iniziando a farti un’idea delle sottili sfumature nei tipi di carattere? Quale famiglia di font ti rappresenterà meglio? Un buon modo per iniziare è chiarire qual è la tua missione e cosa rappresenta la tua attività. Se hai un sito personale o un blog, scegli un font che rappresenti al meglio i tuoi tratti caratteriali.

La scelta giusta per il tuo marchio

Principalmente 2-3 caratteri diversi guidano il tuo visitatore attraverso le sezioni delle tue pagine. Con loro, saranno come i capitoli di un libro. Sarà più chiaro quando una nuova sezione inizia con un’intestazione in un carattere più audace o più decorativo e termina con un testo di dimensioni normali.

Diversi font ti consentono anche di evidenziare contenuti diversi o cambiare il tono, ad esempio se ti piace citare qualcuno o attirare l’attenzione su nuove offerte. I font differenziano meglio le linee di prodotti del tuo e-shop per i tuoi clienti.

Scegli il font giusto per te e per il tuo brand, rispondendo alle seguenti domande:

• Chi è il mio pubblico e cosa è importante per loro?
• Esiste un font che si riferisce all’esperienza dei miei clienti?
• Il font funzionerà nel contesto in cui verrà visualizzato?
• Quale font cattura la personalità del mio marchio?
• I miei colori funzioneranno con il font selezionato?

Ad esempio, se il tuo sito Web integra il tuo canale YouTube e hai molte miniature su una pagina che porta ai tuoi video, o hai anche molte immagini se sei un artista, il tuo pubblico sta guardando i tuoi contenuti piuttosto che leggerli. Di conseguenza, il tuo font non dovrebbe distrarre dal contenuto visivo.

Se sei un avvocato o un consulente, potresti voler riflettere fiducia e responsabilità. Un font di scrittura emotivo sembrerebbe fuori posto qui.

Un carattere deve anche essere compatibile con tutti i browser. Esamina la scelta del font e la sua accessibilità nei browser utilizzati su diversi dispositivi prima di prendere la decisione finale.

Gli errori da evitare

Molte famiglie di font di caratteri diversi e caratteri tipografici mescolati possono rovinare lo sfondo e il contesto

Infine, sapere cosa evitare quando si sceglie il font a volte è più facile da ricordare di che cosa fare. Ecco i punti salienti più importanti:

Rispetta la famiglia!

Usare più di 3 diverse famiglie di font. Attieniti ad una sola ma varia il tipo di carattere. Una famiglia di font come Helvetica, Verdana, Open Sans ha già abbastanza variazioni nei caratteri tipografici per distinguere i passaggi nel testo.

Non tutti le combinazioni sono adatte

Puoi mescolare. Fai attenzione a sperimentare con caratteri opposti, come Times New Roman e Edwardian Script. Non si fonderanno.

Miglioramento

Limita i font di scrittura decorativi o i caratteri di visualizzazione complessi per evidenziare le intestazioni. Non usarli per i passaggi di testo in un paragrafo.

Spazio

Non essere avaro con le dimensioni. Una buona dimensione del font accessibile, che tutte le persone possono leggere, è 16pt. Vai al di sotto ed escluderai le persone con problemi di vista dalla lettura della tua storia.

Linee lunghe

Evita frasi lunghe o font con molto spazio bianco tra le lettere. Normalmente, nei modelli dei costruttori di siti Web, il layout è codificato in modo tale che le interruzioni di riga vengano introdotte prima che diventino necessarie.

Disposizioni esagerate

Ultimo ma non meno importante, anche se hai il font migliore per il tuo sito web, assicurati che tutto il testo sia allineato correttamente. Correttamente significa attenersi al testo centrato o allineato a destra su una pagina. Se hai caselle di testo con righe di testo che iniziano in alto al centro e in basso a destra, il lettore avrà difficoltà a seguire il testo della tua pagina. Organizza il tuo testo. Usa gli spazi bianchi per dare al tuo lettore una pausa.

Se il web design è qualcosa che ti interessa, l’ articolo sul web design ti fornirà alcune informazioni aggiuntive su come rendere il tuo sito web fantastico.