Web Designer Freelance Milano ・ Yunikon Design

  • Chi sono
  • Servizi
    • Identità per Brand
    • Siti Web su misura
  • Consulenze
    • Brand Styling
    • Performance sito web
  • Web Designer Freelance Milano e Online · Yunikon Design
  • Newsletter
  • Blog
    • Branding
    • Web Design
    • Palette Colori
    • Risorse e How-To
    • Vita da freelance
  • Contatti
Font Design: come scegliere i font per il tuo brand o sito web

Come scegliere i font per il tuo brand

Branding/ 11 Giugno 2014

Una delle cose più importanti di una buona brand identity è la scelta dei font.

Spesso si pensa a loro solo in un secondo momento, quando parte della brand identity è già stata definita: in realtà sarebbe opportuno “riabilitarli” dandogli l’importanza che meritano, dato che ci possono essere di gran aiuto già in definizione del mood del progetto (ad esempio mentre lavoriamo alla moodboard).

Se ci soffermiamo invece sul legame tra tipografia e siti web, è bene ricordare quanto segue: i visitatori che entrano in una pagina del nostro sito, sono di solito alla ricerca di una particolare informazione. È nostro compito, come designer, riuscire a mettere a disposizione i contenuti in modo che siano il più fruibili possibili: è anche un gran atto di cortesia che compiamo nei confronti di chi decide di avventurarsi nella lettura di un nostro contenuto.

Tipologie di caratteri tipografici

Serif

Font graziato, serif

Nei caratteri serif, ogni lettera inizia e termina con una grazia, cioè un piccolo tratto decorativo che si estende oltre la lettera. Sono usati dalla notte dei tempi: prova a sfogliare un libro, una rivista, un quotidiano e a osservare: che tipo di carattere usano? 9 volte su 10 è un serif. Viene scelto per la stampa perché aumenta la leggibilità dei testi.

I caratteri serif sono senza tempo: morbidi ed eleganti, perfetti per progetti editoriali o dedicati a un target femminile.

Ma nel web tutto cambia…

Sans-Serif

Font sans serif bastoni

Se, abbiamo visto, la carta stampata predilige caratteri graziati, il web (ma in generale, tutto ciò che appare a video) preferisce i sans serif (o bastoni).

La motivazione è da ritrovare nella scarsa leggibilità di un carattere graziato a video: le lettere appaiono più piccole, perché vengono usati più pixel per riempire lo spazio delle grazie. I sans serif sono invece ben leggibili da monitor (pensa all’Arial, per esempio) e per questo sono così usati sul web.

L’unico font graziato creato appositamente per risultare ben leggibile anche su qualsiasi monitor è il Georgia.

I caratteri sans-serif sono moderni, minimal, puliti e geometrici. Sono perfetti per qualsiasi progetto destinato a svilupparsi soprattutto online.

Ci sono poi font che non fanno parte di nessuna delle due tipologie elencate sopra. Vediamoli insieme.

Script

Font script informale

I caratteri script danno a un progetto un tocco personale: ne fanno parte i font calligrafici e quelli che simulano la scrittura a mano (li vediamo subito sotto). Sono perfetti per inviti a nozze e biglietti di auguri.

Calligraphy

Font calligraphy calligrafico

Questi caratteri molto popolari simulano la scrittura calligrafica. Sono molto eleganti e in grado di dare un tocco unico e distintivo a un lavoro: di contro vanno utilizzati con parsimonia, perché rendono difficile la lettura. Usali solo per i titoli o quando desideri dare enfasi a un breve testo.

Hand-written

Font handwritten scritti a mano

Si differenziano dai caratteri calligrafici in quanto gli handwritten simulano una vera e propria scrittura a mano e per questo risultano più informali. Anche in questo caso vale il principio della parsimonia: se usati per paragrafi o testi corposi ne inficiano la leggibilità. Io li uso di rado, perché temo sempre l’effetto lezioso: non li uso mai nei siti web, ma dedico loro spazio se devo fare delle grafiche (soprattutto social).

Come scegliere i font giusti per il tuo brand

Ora che abbiamo capito quali sono i principali tipi di caratteri tipografici, chiediamoci: come scelgo quelli in grado di rappresentare al meglio il mio brand?

Crea una solida gerarchia visiva

Prova a guardare i contenuti di una qualsiasi pagina web, focalizzando la tua attenzione sui testi. Dovresti essere in grado di riconoscere subito il titolo della pagina, i sottotitoli e i vari paragrafi che compongono il contenuto. Questo è ciò che dobbiamo ricreare: una solida gerarchia visiva.

Per questo segui la “Regola dei 3”, ovvero non andare oltre i tre font. So che possono sembrare pochi, ma ti assicuro che il risultato sarà ordinato e pulito: io di solito scelgo un font per il logo, uno per i titoli e un altro per i paragrafi. Raramente vado oltre!

È importante destinare un font a se per il logo, dato il suo peso in tutto il processo di brand identity: il logo deve essere in grado di raccontare l’identità di un marchio, per questo è meglio non ripeterne l’utilizzo del carattere per altri elementi come titoli o paragrafi.

Per quanto riguarda invece i titoli, puoi permetterti più libertà: puoi usare caratteri graziati, perché anche se la leggibilità a monitor non è ottimale, i testi sono brevi. Per i paragrafi invece è indispensabile mettere al primo posto la fruizione dei contenuti e un’ottima leggibilità: meglio quindi caratteri bastoni.

Contrasto

Se tutto questo ti sembra limitativo e poco creativo ricorda che puoi sempre giocare con i colori, le dimensioni, le spaziature dei caratteri e i loro stili: MAIUSCOLO, minuscolo, grassetto e corsivo.

Infatti un altro modo per delineare la gerarchia visiva nei testi è quella di giocare con i contrasti usando font wide e condensed, minuscoli e maiuscoli, e scegliendo diverse tipologie di colori (se sei interessato a approfondire l’uso dei colori nel tuo blog puoi leggere questo articolo).

Come combinare i font tra loro?

Il problema che riscontro tra chi è alle prime armi è la difficoltà nel riuscire a combinare i font (in inglese font pairing) tra di loro in maniera pulita, equilibrata ma al tempo stesso creativa. Come si può cioè scegliere font o famiglie di font diverse che stiano bene e si armonizzino tra loro?

Il mio consiglio è sempre quello di puntare sulla semplicità. Infarcire il tuo sito web di tanti caratteri diversi serve solo a disorientare i visitatori (perché viene meno la gerarchia visiva di cui ho scritto sopra) creando confusione e scarsa coerenza visiva.

Un altro consiglio che mi sento di condividere è quello di evitare i caratteri calligrafici e handwritten, perché:

  • ne escono di nuovi ogni giorno con il risultato che un carattere che oggi sembra moderno il giorno dopo risulta subito superato;
  • come ho già scritto sopra, soprattutto a monitor, risultano di scarsa leggibilità: è davvero impossibile arrivare alla fine di un paragrafo se si utilizza un carattere handwritten o calligrafico. Se proprio non ne possiamo fare a meno scegliamo uno script morbido e pulito, come il Lobster;
  • proprio perché vengono usati soprattutto per progetti personali come inviti a un matrimonio, risultano poco professionali, vezzosi e – passatemi il termine – feminine. Quindi sì se il progetto riguarda la brand identity di una fotografa o una grafica di matrimoni, no per (quasi) tutto il resto.

Cerchi una bacheca Pinterest piena di ispirazione? Eccola qui: Fonts Inspiration.

Font Pairing: strumenti e ispirazione

Online esistono tonnellate di siti dedicati alle combinazioni di caratteri tipografici: FontPair è sicuramente uno dei più famosi, ma basta digitare “font pairing” su Google o Pinterest per rimanere a bocca aperta. Il mio sito di riferimento per cercare ispirazione è però, senza ombra di dubbio, TypeWolf (può causare dipendenza, poi non dire che non te l’ho detto!).

Scegliere i font per il tuo brand: infografica e strumenti utili

Di seguito un’infografica (creata nel lontano 2014 e che non ho cuore di cancellare): il comic sans alla fine è chiaramente ironico (ehm!).

font-blog-infografica
Font pairing combinazioni

Potrebbe interessarti anche:

Risorsa gratuita: Brand Style Guide Guida alla Logo DesignLogo design: partiamo dalle basi Live Youtube yunikon design laura lonighiE giunse finalmente l’anno delle live

Ciao, sono Laura Lonighi, Brand & Web designer freelance

Nel mio lavoro disegno la personalità visiva di un marchio e realizzo siti web ed ecommerce. Vivo nelle nebbiose (sigh!) campagne mantovane con il mio compagno e nostri due gatti di nome Brando e Briseide. Se questo articolo ti è piaciuto puoi ricevere i prossimi iscrivendoti alla newsletter che trovi in fondo al sito.

Leggi chi sono

Commenti

  1. Daniele Imperi dice

    12/06/2014 alle 7:38 am

    Ho trovato un servizio online che ti aiuta a combinare i font, due al massimo, numero sufficiente per un sito. Lo strumento ti dà una serie di coppie di font che stanno bene fra loro.

    Rispondi
    • Martina De Nardi dice

      13/06/2014 alle 7:47 am

      Come si chiama questo servizio online?

      Rispondi
      • Daniele Imperi dice

        13/06/2014 alle 6:49 pm

        Eccolo 😉

        Rispondi
  2. Lorenzo Tiribocchi dice

    12/06/2014 alle 10:10 am

    Mi piace “sperimentare” con i font, sopratutto quando scrivo racconti dove a volte ho bisogno di diversificare due linee temporali o magari sostituire la narrazione stessa con l’inserimento di un testo (come potrebbe essere un ipotetico articolo di giornale).
    Un po’ di difficoltà nella scelta la risconto in ambito lavorativo, per post “Tecnici” o comunque non personali, che font consigli?
    Quale tra quelli con una linea “Moderna e professionale” ?

    Rispondi
    • Laura Lonighi dice

      17/06/2014 alle 5:55 pm

      Moderno e professionale ti direi Museo Slab, che vedi ovunque, e che personalmente mi ha un po’ rotto.
      Il mio proferito, forevvaendevva, è il Proxima Nova (semibold soprattutto).
      Lo puoi ammirare qui: Proxima Nova

      Sì, costa un mutuo ma ne vale la pena. 🙂

      Rispondi
  3. Marco Piovani dice

    29/10/2014 alle 12:01 am

    Ho trovato molto utile questo tuo post e mi piace moltissimo l’infografica!

    Rispondi
    • Laura Lonighi dice

      29/10/2014 alle 10:16 am

      Grazie!

      Rispondi

Lascia un commento Annulla risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Yunikon Design di Laura Lonighi
di Laura Lonighi
Web Designer Freelance
via Amendola, 4
46033 — Castel d’Ario (MN)
P. IVA: 02326200207
SDI: SZLUBAI

hello@yunikondesign.com

💎 Servizi

  • Brand Styling
  • Web Designer Freelance

🤖 Consulenze online

  • Brand Styling
  • Performance sito web

💌 Newsletter

Puoi cancellarti in ogni momento, cliccando sul link in fondo a ogni newsletter. Per ulteriori informazioni leggi la Privacy Policy.

Thank you!

You have successfully joined our subscriber list.

.
Rivedi i cookie
  • Privacy policy
  • Cookie policy
  • IG
  • FB
Questo sito usa diversi tipi di cookie. Puoi dare il tuo consenso cliccando ACCETTA e/o modificarlo con "Rivedi i cookie" in fondo al sito. Qui lo spiegone: Privacy policy.
ACCETTA RIFIUTA Personalizza
Rivedi i cookie

Privacy Policy

Questo sito Web utilizza i cookie per migliorare la tua esperienza durante la navigazione sul sito. I cookie classificati come necessari vengono memorizzati nel browser e sono essenziali per il funzionamento delle funzionalità base del sito. Utilizziamo anche cookie di terze parti che ci aiutano ad analizzare e comprendere come navighi questo sito. Questi cookie saranno memorizzati nel tuo browser solo se ci dai il tuo consenso: hai anche la possibilità di disattivare questi cookie. La disattivazione di alcuni di questi cookie può influire sulla tua esperienza di navigazione.
Necessary
Sempre abilitato
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurataDescrizione
_GRECAPTCHA5 months 27 daysThis cookie is set by the Google recaptcha service to identify bots to protect the website against malicious spam attacks.
csrftoken1 yearThis cookie is associated with Django web development platform for python. Used to help protect the website against Cross-Site Request Forgery attacks
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
CookieDurataDescrizione
_pin_unauth1 yearThis cookie is placed by Pinterest Tag when the user cannot be matched. It contains a unique UUID to group actions across pages.
cookielawinfo-checkbox-cookie-analitici1 yearNo description
cookielawinfo-checkbox-cookie-di-profilazione-e-social-plugin1 yearNo description
cookielawinfo-checkbox-cookie-tecnici1 yearNo description
ppwp_wp_session30 minutesNo description
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
CookieDurataDescrizione
_fbp3 monthsThis cookie is set by Facebook to display advertisements when either on Facebook or on a digital platform powered by Facebook advertising, after visiting the website.
fr3 monthsFacebook sets this cookie to show relevant advertisements to users by tracking user behaviour across the web, on sites that have Facebook pixel or Facebook social plugin.
VISITOR_INFO1_LIVE5 months 27 daysA cookie set by YouTube to measure bandwidth that determines whether the user gets the new or old player interface.
YSCsessionYSC cookie is set by Youtube and is used to track the views of embedded videos on Youtube pages.
yt-remote-connected-devicesneverYouTube sets this cookie to store the video preferences of the user using embedded YouTube video.
yt-remote-device-idneverYouTube sets this cookie to store the video preferences of the user using embedded YouTube video.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
CookieDurataDescrizione
_ga2 yearsThe _ga cookie, installed by Google Analytics, calculates visitor, session and campaign data and also keeps track of site usage for the site's analytics report. The cookie stores information anonymously and assigns a randomly generated number to recognize unique visitors.
_gat_gtag_UA_13058607_221 minuteSet by Google to distinguish users.
_gid1 dayInstalled by Google Analytics, _gid cookie stores information on how visitors use a website, while also creating an analytics report of the website's performance. Some of the data that are collected include the number of visitors, their source, and the pages they visit anonymously.
CONSENT2 yearsYouTube sets this cookie via embedded youtube-videos and registers anonymous statistical data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
CookieDurataDescrizione
_auth1 yearThis cookie is set by Pinterest that collects statistical details to track the use of its services.
_pinterest_referrer5 minutesThis cookie is set by Pinterest to track the use of its services.
_pinterest_sess1 yearThis cookie is set by Pinterest that collects statistical details to track the use of its services.
_routing_idsessionThis cookie is set by Pinterest that collects statistical details to track the use of its services.
languagesessionThis cookie is used to store the language preference of the user.
ACCETTA E SALVA
Powered by CookieYes Logo