Come Usare i Font nel Web Design
Stai realizzando il tuo sito web da solo ? Sei alla fase di analisi preliminare in cui devi sceglire il font da usare per il tuo sito web ? Oppure hanno già scelto il font per il logo e ti occorre un font per abbinarlo ? Va bene, vedremo queste valutazioni in questo articolo su come usare i font nel web design, perchè anche loro hanno la loro emotività nel commercio e nel comunicare alle persone.
Cosa sono i font ?
Devo per forza descrivere cosa sono i font.
Prima che ti descrivo come possono essere i font e come usarli, voglio descriverti la differenza che abbiamo tra caratteri tipografici e font, spesso molti credono siano esattamente la stessa cosa.
Per caratteri tipografici si intendeno, un insieme di caratteri studiati in modo coerente e secondo gli stessi principi formali, forma un carattere tipografico, il cui file viene chiamato font.
Il carattere, a sua volta, è composto da diversi glifi (maiuscolo, minuscolo, grassetto, corsivo ecc.) in cui può declinarsi.
Carattere e glifo, quindi, formano il typeface (o carattere tipografico).
In inglese, la distinzione tra font e typeface è molto chiara, mente in italiano la parola typeface è spesso tradotta impropriamente con “font”.
Quindi tutto questo insieme forma il file chiamato FONT con il quale tu puoi creare il tuo testo.
Quindi, ad esempio, la lettera “A” è un carattere.
Questo carattere a sua volta può essere composto da diversi glifi, come A, a, a o a, che saranno quindi glifi dello stesso carattere e dello stesso carattere tipografico.
L’insieme di tutti i caratteri e glifi dell’alfabeto latino progettati secondo la stessa coerenza visiva e di significato, prende il nome, nuovamente, di carattere tipografico.
Ed è qui che in Italiano nascono le incomprensioni.
L’inglese è più chiaro: il carattere (inteso come lettera) è character, glifo è glyph e l’insieme coerente di tutto questo, il carattere tipografico, è typeface.
Il font, invece, è il file
Font è un’altra cosa: font è il mezzo che permette di applicare un carattere.
Ovvero: mentre Garamond è un carattere (typeface), il file garamond_semibold.otf è un font (meglio: uno dei font che compongono la famiglia dei font Garamond).
Come scegliere il font da usare nel web design
La comunicazione svolge un ruolo fondamentale nel web design.
Spesso in molti realizzano siti web senza stabilire una connessione chiara tra il sito Web e l’utente.
Mentre è fondamentale aiutare i tuoi utenti a raggiungere i loro obiettivi.
Quando parliamo di comunicazione nel contesto del web design, di solito intendiamo, creare una connessione chiara tra le immagini, colori, testi, spazi, call to action, logo , UVP e il cliente, in modo da riuscire a convertirlo in cliente finale.
Quindi, la tipografia e il font da usare nel web design, svolge un ruolo fondamentale in questo processo.
Un font scelto accuratamente e che rispecchi gli obiettivi del progetto rende l’atto di leggere senza sforzo, mentre una cattiva comunicazione manda via gli utenti.
Come afferma Oliver Reichenstein nel suo articolo “ Web Design and Typography ”.
Ora passiamo alla scelta del font giusto per il tuo sito web e come effettuarla.
Prima di analizzare i font, poniti alcune domande, del tipo:
Il tuo marchio che obiettivo ha ?
Il tuo potenziale cliente chi è ? Giovane ? Adulto ?
Cosa vuoi comunicare ?
Come lo vuoi comunicare ? ecc
Questo serve per effettuare una scleta accurata per il tuo sito web.
Come scegliere tra i tanti tipi di font esistenti
In definitiva i font si dividino essenzialmente in:
– sans serif
– Serif
– Decorativi
– Monospazio
– Calligrafici
Font Sans Serif
I font senza grazie (sans serif) sono quei caratteri che non hanno ornamentali alla fine delle lettere, cioè , non hanno nessun tipo di rifinitura o “ghirigoro”, sono puliti, moderni e attuali.
Di solito vengono usati questi tipi di caratteri sul web perché sono molto leggibili.
Font Serif
I font Serif sono quelli con le grazie, cioè hanno le rifiniture o ” ghirigori” .
I caratteri serif sono utilizzati per esprime creatività sul web e quando il contenuto da leggere non è troppo lungo.
Vengo spesso usati nei giornali e in documenti cartacei.
Font Decorativi
I font decorativi sono molto particolari, perchè presentano appunto delle decorazioni a volte in un carattere altre volte in ogni carattere.
Sono utilizzati solo per qualche titolo o sottotitolo, altre volte, per lanciare un messaggio d’effetto in qualche banner.
Font Monospace
I monospace sono caratteri che mantengono una larghezza fissa, indipendentemente dalla reale dimensione delle lettere.
Sono font poco utilizzati nel web, poco accattivanti.
Magari sono da utilizzare in piccole parti per comunicare un breve messaggio.
Font Calligrafici
Sono quei font che come dice il nome simulano la scrittura a mano.
Sono molto eleganti da utilizzare e si trovano spesso nei siti di weddings (matrimoni).
Possono essere molto originali se utilizzati come logo o nelle testate dei siti web. Ma poi non abusare.
Dopo che hai scelto i tuoi font, passiamo a come usare i fotn nel web design, in modo da provarli e controllare il messaggio che passano.
Come usare i font nel web design
Quando devi usare i font nel web design, cerca di non utilizzare più di tre font per il tuo sito web, altrimenti rendi il tuo sito web una raccolta di font è credimi non sarebbe bello da vedere.
Cerca sempre di utilizzare un font principale, quello che dovrebbe essere il più adatto al tuo marchio, usalo per i titoli .
Utilizza magari un secondo font per le descrizioni e tutti i testi del sito web e magari proprio se riesci ad abbinare un terzo font per i caratteri accentati che possono essere utilizzati per elementi specifici del sito Web come un invito all’azione o un menu di navigazione.
Se utilizzi più di un carattere, assicurati che le famiglie di caratteri si completino a vicenda in base alla larghezza del carattere.
Prendi l’esempio di combinazioni di caratteri nell’immagine. La combinazione di Georgia e Verdana (a sinistra) condivide valori simili che creano un abbinamento armonioso.
Confrontalo con l’abbinamento di Baskerville e Impact (a destra) dove il peso elevato di Impact oscura ampiamente Baskerville.
Lunghezza della linea
Avere la giusta quantità di caratteri su ogni riga è la chiave per la leggibilità del tuo testo.
Non creare il tuo testo con linee troppo lunghe, considera di creare un testo adeguato tra i 70 max 80 caratteri per linea, ovvio non è una regola fissa ma molti articoli dettano questa linea guida per testi leggibili, chi supera questo limite, crea testi poco leggibili.
Considera questo consiglio sulla leggibilità e la lunghezza della linea dal Baymard Institute .
Ricordati che siamo nel 2021 e ci sono i dispositivi come tablet, mobile di ogni dimensione e schermi di ogni dimensione, quindi il tuo testo deve adattarsi ad ogni display esistente.
Nel web design puoi ottenere un numero ottimale di caratteri per riga limitando la larghezza dei tuoi blocchi di testo usando em o pixel.
Le Dimensioni del carattere
Le dimensioni dei caratteri scalabili modulari daranno al tuo testo un aspetto più armonioso.
Questa è una serie di dimensioni dei caratteri che possiedono la proporzione perfetta che il pubblico in generale considera “bello”.
Dimensioni dei caratteri consigliate: 8, 16, 24, 32, 48, 64, 95
16px è la dimensione del carattere ideale per il testo del corpo principale.
Non è né troppo piccolo né troppo grande, quindi aiuta davvero a migliorare la leggibilità del tuo paragrafo.
In effetti, la dimensione del carattere che utilizzo nelle aree di contenuto principali è di 16 px, qualche volta arrivo anche a 18px.
Per i titoli, sentiti libero di giocare con le dimensioni dei caratteri più grandi come meglio credi, considera il mobile e vedi come ottimizzarli al meglio.
Non usare nel web design font confondibili
Molti caratteri tipografici rendono troppo facile confondere forme di lettere simili, in particolare con “i” e “L”.
Quindi, quando scegli il tipo di font che sia ben leggibile e distinguibile, assicurati di controllare il tuo tipo in contesti diversi per assicurarti che non causi problemi ai tuoi utenti.
Lo Spazio Bianco
Lo spazio bianco è lo spazio vuoto che circonda il contenuto come titoli, paragrafi, immagini o pulsanti ed è di vitale importanza per il tuo web design.
Fare uso dello spazio bianco è una delle cose più facili che puoi fare in questo momento per rendere immediatamente più facile la lettura dei contenuti del tuo sito web.
Lo spazio bianco impedisce al tuo sito web di sembrare disordinato e dà ai tuoi contenuti più impatto e “spazio per respirare”, il che a sua volta rende più facile la scansione e la digestione per i visitatori.
Lo spazio bianco in realtà non deve essere bianco : è solo lo spazio vuoto tra gli elementi.
Però devi saperlo inserire, ci vuole il giusto spazio interno ed esterno.
Non usare troppi colori per i tuoi font
Usa pochi colori, come abbiamo già parlato per la scelta dei colori.
Il colore è un potente strumento di branding.
Ad esempio, quando pensi a Starbucks, che colore/i ti vengono in mente? Molto probabilmente è il verde che vedi nel loro logo e sul loro sito web.
Quando scegli i colori per i tuoi caratteri, scegli solo uno o due colori del marchio che rappresentano veramente te o la tua attività da utilizzare nel titolo o nei sottotitoli.
Ultimi consigli su come usare i font per web design
Ricordati di non sbagliare questi 7 punti quando usi i tuoi font sul sito web e ricordati che quando crei il sito web hai tutto lo spazio che vuoi, in lunghezza non in larghezza. Sfruttalo.
– Non usare testo lampeggiante
– Non usare font che non comunicano nulla per il tuo progetto o di cattivo gusto
– Cerca di non usare molto testo rosso o verde, molte persone l’8% è daltonico, troverà difficoltà nella lettura.
– Cura lo spazio tra interlinea e lettera in base al progetto e la lettura del tuo progetto di web design
– Non usare caratteri calligrafici per scrivere un testo in un sito web
– Come sempre crea una attenta analisi prima di creare il sito web o progetto completo
– Effettua delle prove su pagine complete e falle esaminare da persone, non avere paura di chiedere, se sei alle prime armi ti possono sfuggire degli errori.
Approfondisci gli argomenti nell’articolo ” COME SCEGLIERE I FONT PER I SITI WEB ” .
Dove trovare font gratuti da scegliere per i siti web
Puoi utilizzare e trovare i tuoi font gratuitamente su questi siti:
Contattami Per sviluppare il tuo E-commerce con Una Pianificazione Seo Adeguata al progetto o Per qualsiasi dubbio, i consigli non si pagano!
Tu sai come realizzare il tuo E-commerce ? Non ancora ? Vuoi consigli ? Oppure chiederci un preventivo ? Siamo qua per te, contattaci.
Ti può Interessare Invece:
– Come scegliere il carattere di un sito web
– Come scegliere i font per siti web
– Scegliere i colori giusti per il tuo sito web
– La psicologia dei colori nel web designer
– Come creare una paletta dei colori
– Come scegliere i colori per sito web
– I migliori tools per la scelta dei colori nel web designer
– Strategie dei colori nel web designer
– Testare visual design in un Ecommerce