11 font di web design che daranno al tuo sito web un volto nuovo

Pubblicato: 2023-02-02

I font per il web design sembrano un piccolo aspetto del tuo sito web aziendale ma, in realtà, hanno un grande impatto sulle conversioni.

Cosa separa "super" dall'ordinario? Come esclama un personaggio del film blu e dalla testa grande, "Presentazione!"

Quando si progetta una pagina web, l'aspetto gioca un ruolo importante nel grande schema delle cose. Diciamo che potresti avere un pezzo interessante che il tuo pubblico potrebbe apprezzare. Se la tua presentazione è meh o decisamente atroce, potresti semplicemente allontanare quel pubblico. Molto molto Lontano.

Fortunatamente, il web design e lo sviluppo non devono essere difficili. Devi rendere attraente la tua pagina web e coinvolgere davvero il tuo pubblico. È così che crei un'esperienza meravigliosa per i tuoi utenti. In particolare, la tua scelta del carattere può influenzare se un lettore rimane o lascia la tua pagina web.

Sentiti libero di usare questi caratteri per il design della tua pagina web e raggiungi il tuo massimo potenziale. Si spera che tu possa avere un'idea generale di quali caratteri scegliere e perché sono così potenti per la portata online.

Come scegliere i caratteri per il web design

La tua pagina web ha un aspetto definito e unico. Il modo in cui i testi vengono visualizzati su quel look è la chiave del tuo successo. Tieni presente, tuttavia, che puoi migliorare quel successo sulla base di questi sei fattori:

Leggibilità e leggibilità
Coerenza del marchio
Umore e tono
Linee guida per l'accessibilità web
Compatibilità tra browser
Scalabilità

1. Leggibilità e leggibilità

La leggibilità è la facilità con cui i tuoi utenti possono distinguere i caratteri. Se il tuo lettore ha difficoltà a determinare se un carattere è "S" di "5", allora potresti dover scegliere un carattere diverso. Alcuni tipi di carattere forniscono forme diverse per caratteri simili (come "1", "I" maiuscola e "l" minuscola) per distinguerli l'uno dall'altro.

La leggibilità può essere influenzata da altri fattori, come la scelta del colore di primo piano e di sfondo, la dimensione e lo spessore del carattere. Ad esempio, alcune lettere potrebbero essere più leggibili quando si aumenta la dimensione del carattere, ma è leggibile?

A questo proposito, la leggibilità è diversa dalla leggibilità.

La leggibilità è quanto è comodo un lettore con la lettura di blocchi di testo. Questo livello di comfort è influenzato anche dalla leggibilità del tuo testo. Se una parola è troppo piccola per distinguere le lettere l'una dall'altra, la parola potrebbe non essere leggibile. Questo è anche il caso di un denso blocco di "carattere fini" legali in cui si può leggere l'intero testo, ma non così comodamente come si sarebbe voluto.

2. Coerenza del marchio

Devi mantenere la tua presentazione coerente. Mentre la voce del tuo marchio fornisce una solida base per la tua pagina web, mantenere la stessa identità stabilisce quanto sei serio nel guidare il tuo punto di vista. La tua presentazione è tutta mirata a raccontare una storia particolare e stai invitando i clienti a identificarsi e riconoscere quella storia.

Trova caratteri che mantengano la narrazione al suo posto. Se stai cercando un tono professionale, usa caratteri dall'aspetto professionale. Per contenuti accattivanti e amichevoli, utilizza caratteri piacevoli da guardare. Puoi trovarne uno che si adatta perfettamente al conto se guardi abbastanza bene.

3. Umore e tono

La psicologia dei caratteri è lo studio di come i caratteri influenzano il modo in cui il tuo pubblico percepisce i tuoi contenuti. Alcuni caratteri sono stati tradizionalmente utilizzati per scopi specifici e le persone si sono abituate a questo. Altri tipi di carattere semplicemente evocano determinati pensieri ed emozioni dai loro lettori. In ogni caso, potresti voler utilizzare un carattere che aiuti a portare il tuo lettore all'atmosfera che desideri stabilire.

Puoi giocare con i caratteri per stabilire quello stato d'animo. Alcuni caratteri, ad esempio, sono più efficaci per le intestazioni che per il corpo del testo. Mescolare e abbinare i caratteri può persino creare un'atmosfera più drammatica per i tuoi contenuti e far emergere emozioni più potenti.

4. Linee guida per l'accessibilità del web

Il tuo sito web deve essere inclusivo per tutti i visitatori. Garantisce che coloro che incontrano difficoltà o limitazioni siano comunque i benvenuti nel tuo sito Web allo stesso modo di tutti gli altri. Non è semplicemente uno strumento per generare più traffico verso la tua attività, ma incoraggia una comunità tra tutti i tuoi consumatori.

Per fare ciò, i progettisti utilizzano spesso linee guida per migliorare l'accessibilità web ai loro siti. Queste regole e linee guida rendono i contenuti più user-friendly e di facile comprensione per tutti i visitatori. Anche se non è necessario in questo momento, migliorare l'accessibilità web è un buon modo per stabilire un rapporto con la tua base di consumatori e mostra loro che ci tieni e che vuoi che facciano parte di ciò che stai costruendo. I quattro standard principali sono:

Percettibile. In poche parole, i tuoi consumatori devono comprendere i tuoi contenuti. Inoltre, non si limita solo a "vedere" il contenuto. Tieni presente che gli utenti non vedenti o ipovedenti utilizzano software di lettura dello schermo alternativi per navigare in Internet. Considera questi utenti quando imposti la tua pagina web.
Operabile. Ciò significa che tutti gli utenti possono accedere e gestire tutte le parti della tua pagina web (testo, collegamenti, audio, video, altri media). In generale, la maggior parte dei siti Web utilizzabili sono semplici e, quindi, facili da navigare.
Comprensibile. I tuoi utenti devono essere in grado di digerire tutte le informazioni che stai dicendo. Potresti usare una lingua comune o offrire lingue alternative. Allo stesso modo, la navigazione del tuo sito web deve essere organizzata in modo intuitivo e naturale per aiutare gli utenti a capire te e il tuo prodotto.
Robusto. Il contenuto del tuo sito web dovrebbe essere facilmente scomposto e analizzato da programmi assistivi come lettori di schermo. In questo modo, le persone con difficoltà continueranno a far parte dell'esperienza offerta dal tuo sito web.

LETTURA CONSIGLIATA: concetti di web design che danno priorità alla centralità del cliente

5. Compatibilità tra browser

Devi considerare che alcuni utenti semplicemente non vogliono utilizzare browser Web popolari come Chrome o Mozilla (per un motivo o per l'altro). In alcuni casi, questi browser alternativi utilizzano caratteri sostitutivi, come Arial o Times New Roman, per visualizzare il testo. Utilizza un tipo di carattere che possa essere visualizzato correttamente dalla maggior parte dei browser, se non da tutti.

I quattro formati di carattere supportati dai siti Web sono:

Tipo aperto integrato (EOT). Supportato solo dai browser Microsoft (Internet Explorer e Microsoft Edge)
Carattere True Type/Open Type Font (TTF/OTF). Fondati da Apple e Microsoft negli anni '80, questi formati sono supportati da tutti i principali browser, ovvero Chrome, Firefox, Opera, Microsoft Edge e Internet Explorer
Formato carattere aperto Web (WOFF). Fondato da Mozilla nel 2009, questo formato è una versione compressa del TTF/OTF realizzata per caricarsi più velocemente
Formato carattere aperto Web (WOFF2). Una revisione del precedente WOFF, i suoi principali attori includono Chrome, Firefox e Opera; è progettato per sostituire WOFF e lo farà alla fine

Tieni presente che i formati più comunemente utilizzati in questo momento sono TTF/OTF e WOFF. I caratteri che utilizzano questi formati possono essere visualizzati correttamente su tutti i browser supportati.

6. Scalabilità

Hai mai notato che alcuni caratteri hanno un aspetto migliore e più fluido di altri? Questi tipi di caratteri sono chiamati caratteri scalabili. Sono programmati per avere lo stesso aspetto indipendentemente dalla dimensione del testo. Alcuni caratteri non sono programmati allo stesso modo e il testo risultante sembra solo più economico e di qualità inferiore.

Perché la scalabilità è importante? È semplice. Alcune persone, per lo più utenti più anziani, non riescono a leggere testi più piccoli. Devono ingrandire molto per poter leggere ciò che vuoi che leggano. La scelta di un font scalabile arricchisce la loro esperienza con la tua pagina web e li fa sentire inclusi come parte del tuo pubblico.

Font popolari per il web design

Ora che hai coperto le nozioni di base nella scelta dei migliori font per la tua pagina web, ecco alcuni font popolari consigliati dai designer.

1. Apri Sans

Open Sans è un tipo di carattere "senza fronzoli". È diretto e diretto e non scherza con il tuo messaggio. Open Sans è anche sorprendentemente molto versatile. Sembra formale, ma ha anche un "aspetto neutro, ma amichevole" dal suo designer.

È scalabile, il che significa che puoi leggerlo in dimensioni di testo piccole e grandi. È inoltre ottimizzato per le interfacce di stampa, web e mobile.

Puoi vedere perché Open Sans è comunemente usato online. Infatti, più di 84 milioni di siti web lo utilizzano in un modo o nell'altro. Alcuni di questi siti Web includono:

Upwork
Vana
Atollo digitale
Ssense Magazine

2. Robot

Roboto è un altro font popolare consigliato dai designer. È un carattere rigido e geometrico, pur caratterizzato da “curve amichevoli e aperte”. Le lettere appaiono più vicine l'una all'altra, rendendo la lettura un po' più ritmata.

La famiglia di caratteri Roboto include Roboto Condensed e Roboto Slab, rendendo flessibile l'intera famiglia Roboto. È un font che può essere utilizzato praticamente per qualsiasi cosa, dai titoli, alle intestazioni, al semplice vecchio testo del corpo. In ogni caso, sembra abbastanza professionale e amichevole da inserire nella tua pagina web.

Non c'è da meravigliarsi che oltre 630 milioni di siti Web, inclusi Google e YouTube, utilizzino Roboto religiosamente.

3. Lato

Lato è stato originariamente progettato come carattere professionale per un sito Web aziendale. Poiché il cliente è andato in una direzione diversa, il carattere è stato rilasciato per uso pubblico. Le lettere sembrano lucide ed eleganti, un po 'come una lettera scritta a mano a tema rustico.

È anche piacevole per gli occhi, rendendo Lato un serio contendente per il corpo del testo. È ottimo anche nei formati più grandi, mantenendo le sue caratteristiche uniche man mano che il testo si ingrandisce.

Anche la familiarità e il calore sono grandi temi nel carattere. Anche Lato (estate in polacco) è stato progettato pensando alla sensazione dell'estate. È rigido, ma non troppo, emanando un tono serio ma confortante.

Un buon esempio dell'uso di Lato può essere trovato in Bundl, un sito di corporate venture.

4. Elvetico

Questo è un classico. Potresti aver sentito parlare di questo, e ha ricevuto un'accoglienza mista a seconda di dove lo chiedi. Indipendentemente da ciò, Helvetica rimane un font solido per le pagine web. È una famiglia di caratteri molto flessibile e puoi averla in grassetto, condensata o semplicemente avere un normale carattere tipografico per la tua pagina web.

Helvetica è stato originariamente progettato nel 1957 per essere un carattere neutro, da utilizzare praticamente ovunque. Ha svolto questo ruolo fino in fondo, affermandosi rapidamente come uno dei caratteri più popolari di Internet. Il carattere rende le parole più facili da leggere a distanza ed è perfetto anche per i titoli. Rimane anche leggibile e leggibile indipendentemente dalla dimensione del carattere del testo.

Helvetica è anche in continua evoluzione con i tempi grazie alla sua flessibilità. Marchi di diversi settori utilizzano Helvetica in un modo o nell'altro, vale a dire: BMW, Motorola, Nestlé, Microsoft e Apple. Anche le autorità governative come la NASA e l'Unione Europea presentano Helvetica.

5. Prossima Nova

L'ex capo del design di Facebook, Cameron Moll, ha pubblicato un articolo sulla storia di Proxima Nova. Descrive il carattere come "incredibilmente versatile per le interfacce digitali, si comporta come un cavallo di battaglia in molte dimensioni diverse e ha un aspetto straordinario sui display retina".

Proxima Nova è un font volto che doveva catturare la rotondità di caratteri come Futura e la geometria di caratteri come Helvetica. Non è unico al riguardo, tuttavia, poiché anche altri caratteri hanno provato a fare lo stesso. Gotham era molto più popolare di Proxima Nova nei primi anni 2000. Moll sostiene che la prima disponibilità di Proxima Nova sul web ha catapultato il suo status di carattere tipografico iconico.

Da allora, è diventato il font commerciale online più popolare.

6. Montserrat

Il carattere Montserrat è stato ispirato dall'omonimo quartiere brasiliano. Tenta di catturare l'atmosfera della vecchia tipografia di Buenos Aires e di portarla ai media moderni. Per questo motivo, Montserrat suscita nostalgia e familiarità nei suoi spettatori. Imposta un tono serio ma amichevole per tutti i tipi di materiale promozionale.

La sua popolarità è dovuta alla sua scalabilità e, a sua volta, leggibilità. Pertanto, il suo utilizzo non è limitato solo ai media online, ma anche ai media stampati come opuscoli e libri. Anche il manuale grafico del governo messicano ha impostato il carattere come standard per i media ufficiali.

7. Relaway

Raleway è un elegante font open source. Ciò significa che è gratuito e può davvero resistere a qualsiasi web design, in particolare la sua "W" unica.

Ai designer piace usare Raleway per la sua accessibilità e anche perché si combina bene con altri font. Il carattere stesso è leggibile e fornisce un appello accogliente ai lettori. Puoi utilizzare Raleway praticamente per qualsiasi progetto adatto a un vasto pubblico.

8. Fonte Sans Pro

Source Sans Pro è la prima famiglia di font open source di Adobe. È progettato per funzionare particolarmente bene con le interfacce utente. Le sue forme arrotondate rendono le lettere piacevoli alla vista, massimizzando al contempo gli spazi tra ogni carattere.

La qualità più notevole di Source Sans Pro è la sua leggibilità e puoi facilmente distinguere tra caratteri simili in virtù di alcune scelte di design stilistico. Fondamentalmente, Source Sans Pro è incentrato sull'accessibilità. È facile da leggere e professionale nel tono. La Stanford University e Adobe utilizzano il font per i propri siti web.

9. Poppin

Se stai cercando un tono solido e serio per la tua pagina web, Poppins potrebbe fare al caso tuo. Le lettere sembrano forti e lineari e sono semplici come puoi ottenere con un font.

Di conseguenza, non dovrai preoccuparti che il tuo testo sia scalabile. È anche molto elegante e semplice. È una scelta solida per qualsiasi pagina web.

Lo studio di animazione Wonderlust è tra gli 8,1 milioni di siti Web che utilizzano il carattere.

10. Georgia

Progettato da Microsoft, Georgia è un font destinato a essere leggibile in formato digitale. Appare elegante e leggibile, anche su schermi a bassa risoluzione.

La sua eleganza è in gran parte dovuta al suo design di ispirazione romana. Tuttavia, ciò non impedisce affatto ai caratteri di essere leggibili. Di conseguenza, l'esperienza di lettura sembra bilanciata sia sul digitale che su carta.

Microsoft aggiorna regolarmente il carattere per conferirgli un aspetto più moderno e flessibile. La versione aggiornata, Georgia Pro, è disponibile per l'acquisto. Tuttavia, gli utenti Microsoft possono ottenere il carattere gratuitamente su Microsoft Store.

11. Esposizione del parco giochi

Playfair Display si legge come carta da giornale del 18° secolo, non che sia una brutta cosa. Questo tipo di carattere sembra molto elegante e stabilisce un tono molto professionale per la tua pagina web. Rende anche la lettura sofisticata ed è sorprendentemente flessibile. Puoi abbinarlo ad altri font per portare a casa quella sensazione di classe.

Come utilizzare i caratteri del web design in modo efficace

Ti è stato fornito un elenco di caratteri da utilizzare e come identificare i caratteri per le tue esigenze. Usarli in modo efficace è un processo completamente diverso. Ecco alcune cose a cui prestare attenzione quando si utilizzano i caratteri.

1. Abbinamento e combinazione di caratteri.

Non è raro vedere i designer mescolare e abbinare i caratteri per ottenere un effetto maggiore. Pensa a come passare attraverso il tuo guardaroba e far risaltare una semplice t-shirt bianca in uno dei tuoi outfit. O guidare gli occhi della gente su quei nuovi calci ai tuoi piedi.

Allo stesso modo, puoi indirizzare i lettori verso determinati punti della tua pagina web anche se non sono di per sé accattivanti. Devi solo strutturare tutto il resto attorno ad esso per assicurarti che le persone guardino davvero in quel punto specifico.

Ciò include l'utilizzo di caratteri diversi per scopi diversi sulla stessa pagina Web o qualcosa di semplice come l'impostazione di una combinazione di colori estetica. Massimizzare la psicologia del colore può persino migliorare le conversioni sulla tua pagina web.

2. Creazione di caratteri personalizzati.

Se sei abbastanza creativo, puoi persino creare il tuo font per i tuoi scopi! Alcuni servizi, come Calligraphr, ti consentono di trasformare la tua calligrafia in un formato digitale. Se stai cercando di creare un font che gli altri possano usare, tieni presente che in genere è un lungo processo di progettazione.

3. Diritti di licenza e utilizzo.

La maggior parte dei font sono gratuiti e possono essere utilizzati per una varietà di scopi, personali o commerciali. Tuttavia, alcuni designer di font pongono limiti all'utilizzo della loro creazione. Ad esempio, devi pagare il designer per utilizzare un font per scopi commerciali.

4. Test e ottimizzazione.

Un'importante fase di pre-rilascio per qualsiasi pagina Web è il test e l'ottimizzazione. Devi ricontrollare se il testo è visualizzato correttamente e con il carattere giusto, se la combinazione di colori è piacevole alla vista, ecc.

LETTURA CONSIGLIATA: Come creare un flusso di lavoro di progettazione e sviluppo Web senza soluzione di continuità

Configurazione dei caratteri da utilizzare sui siti web

Ora che hai un'idea di quali caratteri sono comunemente usati online, sei pronto per iniziare a usarli. Ecco come puoi iniziare:

1. Scarica e installa i font.

Alcune suite creative dispongono già di caratteri preinstallati pronti per l'uso. Tuttavia, se trovi che un font che ti piace non fa parte del tuo catalogo, puoi semplicemente cercarlo online. Puoi anche scegliere il formato che desideri scaricare (ad esempio, se utilizzerai TTF/OTF, WOFF o entrambi).

Molti font open source possono essere scaricati gratuitamente, ma alcuni font devono essere acquistati prima di poterli utilizzare per determinati scopi. Se prevedi di utilizzare un font per scopi commerciali, assicurati di leggere i termini di licenza del font prima di farlo.

Una volta trovato un font, basta scaricarlo sul tuo computer. La maggior parte dei font arriverà in un formato .ZIP, quindi dovrai estrarli. Basta fare clic con il pulsante destro del mouse sul file e selezionare "Estrai qui" per farlo. Ti ritroverai con un file di font pronto per l'installazione.

Basta fare doppio clic sul file e quindi premere "Installa" nella schermata di anteprima che si apre.

2. Incorpora i caratteri sul tuo sito web.

Se hai intenzione di fare il lavoro da solo, puoi sfogliare diverse guide come questa per vedere come puoi incorporare i caratteri utilizzando diverse piattaforme web.

Tieni presente che esiste una lista di controllo per il web design prima di rilasciare la tua pagina web al pubblico.

3. Garantire la compatibilità cross-browser.

I caratteri più popolari e comunemente usati sono già nelle versioni TTF/OTF o WOFF, il che significa che vengono visualizzati correttamente su tutti i principali browser. Tuttavia, potresti incontrare un font personalizzato che non sembra proprio come previsto perché ha un formato diverso.

Se vuoi restare con un font, puoi provare alcune guide online e rendere il tuo testo compatibile con tutti i browser. Tuttavia, si consiglia di utilizzare caratteri con i suddetti formati in modo che il tuo web design non venga compromesso.

Suggerimenti per l'ottimizzazione dei caratteri Web

Potresti riscontrare problemi con i tempi di caricamento della tua pagina web. Al giorno d'oggi, i lunghi tempi di caricamento sono la rovina di chiunque navighi sul web. I tuoi utenti e potenziali clienti non sono diversi. Ecco come evitare lunghi tempi di caricamento:

1. Non usare troppi caratteri.

Questo è piuttosto semplice. In genere, più caratteri personalizzati utilizzi sul tuo sito Web significa che stai rallentando il tuo servizio di web hosting.

La regola generale nell'utilizzo dei caratteri è attenersi a due classi di caratteri: una per l'intestazione e i titoli e una per il corpo del testo. In questo modo, puoi evitare di sovraccaricare il tuo servizio di hosting ed è meno faticoso per il tuo team di progettazione. I tuoi visualizzatori potrebbero anche essere disattivati se cambi font frequentemente.

2. Usa caratteri ottimizzati per ogni browser.

Sfortunatamente, nessun formato funziona in tutti i browser. Devi usare diversi formati quando crei una pagina web. Con Google Analytics puoi verificare quali browser e dispositivi sono più popolari tra i tuoi visitatori.

Se ti senti a tuo agio con i browser meno recenti che utilizzano caratteri alternativi, puoi sempre prendere scorciatoie. Ma ancora una volta, non è raccomandato.

Punti chiave

Ora che la polvere si è calmata, è il momento di far funzionare i tuoi succhi creativi. Sei libero di utilizzare i caratteri in questo elenco o di esplorare Internet per i caratteri personalizzati più adatti alle tue esigenze. In ogni caso, ecco tre aspetti principali di questo articolo:

Usa un carattere coerente con la voce del tuo marchio. Migliora le relazioni con il tuo pubblico e dà il tono ai nuovi clienti.
Rendi il tuo marchio incentrato sul cliente. Un aspetto importante del web design è che stai creando qualcosa per far divertire i tuoi utenti; non solo tu.
Non aver paura di sperimentare. Ecco a cosa serve il processo di progettazione. Dovresti esplorare cosa funziona e cosa no.

Mettiti in contatto con Propelrr oggi per saperne di più sui concetti di web design. Siamo più che felici di aiutarti. Se hai bisogno di ulteriore aiuto o maggiori informazioni, connettiti con noi tramite Facebook, Twitter o LinkedIn.

Per ulteriori suggerimenti su come creare siti Web e applicazioni incentrati sull'utente, assicurati di iscriverti alla newsletter di Propelrr per ottenere l'accesso immediato.