design

Come scegliere il font giusto
per un sito web o un articolo

Queste linee guida vi aiuteranno a scegliere un font -
senza addentrarsi troppo nella teoria.
Il carattere è molto importante. È come l'aria, non si nota quando tutto è a posto. La maggior parte delle persone non ha idea dei caratteri tipografici, dei loro nomi o delle loro caratteristiche (e va bene così), ma sicuramente percepirà che c'è qualcosa che non va se si utilizza un carattere non adatto per il proprio sito web.
Con Tilda, la piattaforma all-in-one, chiunque può creare un sito web senza dover assumere uno sviluppatore web o un designer professionista.
Cambiare e regolare i font
I caratteri possono essere modificati nelle impostazioni del sito e applicati a tutti i blocchi e le pagine. In questo modo si crea uno stile unificato e chiaro per il sito.
È possibile aggiungere un massimo di due font. Da un lato, l'uso di un numero limitato di font crea una buona impressione visiva. D'altra parte, ogni font aggiuntivo rallenta la velocità di download della pagina.

Andate su "Impostazioni del sito", quindi cliccate su "Font e colori" che vi porterà alle coppie di famiglie di font. Si tratta di combinazioni di due font raccomandate dai nostri designer. Scorrete verso il basso fino a trovare la coppia che vi piace. Fate clic su "Seleziona" e "Salva modifiche". I caratteri del vostro sito cambieranno.
Se le combinazioni fornite non vi soddisfano, fate clic su "Impostazioni personalizzate". Verrà visualizzato un elenco di altre opzioni per l'aggiunta di un font a Tilda, come ad esempio:
1) Selezionare un font dal set predefinito
2) Caricare un proprio font
3) Installare un font con Typekit
4) Utilizzare Google Fonts
5) Caricare il proprio file CSS
Per una guida dettagliata, è sufficiente seguire i link precedenti.
Scorrendo la pagina verso il basso, si trovano le impostazioni di dimensione, peso e colore dei caratteri. I parametri impostati saranno applicati a tutto il sito. Se è necessario modificare i caratteri di un blocco, è possibile farlo nell'editor di ciascun blocco.
Cosa sono i pesi dei caratteri?
Il peso dei caratteri definisce lo spessore di ciascun carattere. Di solito i font hanno due stili: normale o grassetto. Possono avere altri gradi di spessore, da super light a super bold. Tilda supporta cinque pesi di base: light, regular, medium, semi-bold e bold. Non tutti i font hanno molti pesi, alcuni ne hanno solo due: regular e bold.
Esistono sette varianti di peso dei caratteri per Avenir.
Qual è la dimensione migliore dei caratteri per un sito web?
La dimensione dei caratteri dipende dalla quantità di testo presente nel sito. Se non avete molto testo e lo usate principalmente per didascalie e commenti, aumentate la dimensione dei caratteri a 22px (la dimensione predefinita è 20px). Se avete molto testo, riducete i caratteri (18px) per migliorare la leggibilità.
Come impostare le proprietà dei caratteri in base al progetto
Chiedetevi: qual è il vostro progetto web? Si tratta di un articolo, di un post su un blog o di una lunga lettura in cui il testo la fa da padrone? Oppure si tratta di un sito web, di una landing page o di una storia fotografica con solo un po' di testo?
Impostazione dei font per un sito web in base al suo messaggio
Quando iniziate a progettare un sito web, decidete se il carattere predefinito si adatta all'aspetto e all'atmosfera del vostro sito. Non è possibile che i siti web di un campo sportivo per bambini e di un'architettura abbiano lo stesso aspetto, no? È possibile esprimere la differenza con i pesi dei caratteri.
In seguito, analizzeremo quattro diverse grammature di caratteri nei titoli e nel testo. Essi contribuiscono a definire il tono di voce di un sito web, in modo che le sue pagine appaiano equilibrate e corrette.
1
Titolo in grassetto + testo normale
È la combinazione di base che funziona bene per la maggior parte dei siti web. Utilizzatela se volete semplicemente creare una pagina web di bell'aspetto senza attirare l'attenzione su elementi particolari. Si adatta a qualsiasi sito web.

Utilizzate i seguenti parametri nelle impostazioni del sito web:
Peso del carattere del testo - Normale
Peso del carattere del titolo - Semibrillante
Impostazioni del sito web > Caratteri e colori > Dimensione e peso
Esempio
Pagina web dell'annuncio di lavoro. Caratteri: Open Sans (titolo) e Roboto (testo).
2
Titolo in grassetto + testo normale
Consigliamo di utilizzare questa popolare combinazione se il vostro progetto ha come tema la grinta e l'energia.

È particolarmente adatta per siti web di bar, spazi di coworking, promozioni di concerti e tournée, competizioni sportive e così via.

Utilizzate i seguenti parametri nelle impostazioni del sito web:
Peso del carattere del testo - Normale
Peso del carattere del titolo - Grassetto
Impostazioni del sito web> Caratteri e colori > Dimensione e peso
Esempio
Sito web per unospazio di coworking. Caratteri: Ubuntu (titolo) e PT Sans (testo).
3
Titolo in grassetto + testo sottile
Si tratta di una combinazione meno comune, che ha un aspetto drammatico grazie al contrasto dei caratteri. Funziona benissimo quando è necessario abbinare l'unità allo stile. Ad esempio, i titoli e i testi di facile lettura riflettono un design esteticamente gradevole nel sito web di questo corso di marketing.

Utilizzate i seguenti parametri nelle impostazioni del sito web:
Peso del carattere del testo - Leggero
Peso del carattere del titolo - Grassetto
Impostazioni del sito web> Caratteri e colori > Dimensione e peso
Esempio
Pagina web dello studio di design. Caratteri: Noto Sans (titolo) e Open Sans (testo).
4
Titolo sottile + testo sottile
Questa combinazione funziona molto bene per i progetti che riguardano l'alta tecnologia, il progresso, la tecnologia all'avanguardia o qualcosa che deve apparire bello e forte. È particolarmente indicata quando si dispone di molto spazio bianco, accentuato da macchie di colore brillante e da belle immagini.

È adatto a siti web che presentano gadget, gioielli, caffè o ristoranti di lusso e saloni di bellezza.

Utilizzate i seguenti parametri nelle impostazioni del sito web:
Peso del carattere del testo - Leggero
Peso del carattere del titolo - Leggero
Impostazioni del sito web> Caratteri e colori > Dimensione e peso
Esempio
Landing page per un'applicazione mobile di elaborazione fotografica. Caratteri: Open Sans (titolo) e Open Sans (testo)
Esempi di belle combinazioni di caratteri
L'abbinamento di font diversi nei titoli e nei testi vi aiuterà a ottenere vari gradi di impatto visivo complessivo e a esprimere il carattere e il tono di voce del vostro sito web.
Scegliere i font per un articolo
Volete che il vostro articolo sia facile da leggere per i vostri utenti? Allora assicuratevi che utilizzi buoni contrasti e che i caratteri non siano troppo grandi.

Se avete una lettura lunga o un articolo con molto testo, scegliete la dimensione del carattere di 18px. Per un saggio fotografico che utilizza il testo soprattutto per le didascalie, aumentate la dimensione del carattere a 20px o addirittura a 22px.

Utilizzate i seguenti parametri nelle impostazioni del sito web:
Peso del carattere del testo - Normale
Peso del carattere del titolo - Grassetto / Semi grassetto
Dimensione del carattere del testo - 18px
Impostazioni del sito web > Caratteri e colori > Dimensione e peso
Esempio
Blog di moda
Esempio
Blog aziendale
Esempio
Articolo sul marketing online
Con o senza serifs?
Carattere Serif
Carattere Sans-serif
Le piccole linee arancioni nell'esempio a sinistra sono serif. Per la citazione di Massimo Vignelli a sinistra è stato utilizzato Baskerville Regular, mentre a destra è stato utilizzato Helvetica Light.
I caratteri serif creano una linea guida che aiuta gli occhi a scorrere in modo più fluido e veloce. Quando sono comparsi i primi computer, i caratteri sans serif si sono diffusi perché i caratteri sans serif apparivano più leggibili su uno schermo a bassa risoluzione.

I monitor moderni visualizzano entrambi i caratteri con la stessa qualità. Per questo motivo oggi la scelta tra serif e sans serif è determinata dalla natura del messaggio, non dalla leggibilità. I caratteri serif a volte suggeriscono un tono piuttosto formale e si adattano ad alcuni marchi, ma non a tutti.
Aggiunta di font supplementari
In tutti gli esempi precedenti abbiamo utilizzato set di caratteri molto semplici. Se volete cambiare il set di font, andate nelle impostazioni del sito web e selezionate un font dall'elenco o aggiungete qualsiasi altro font di vostro gradimento (perché in Tilda è possibile!).
Dove acquistare i font o trovarli gratuitamente
Su Tilda, ci sono cinque modi per aggiungere un carattere:
1
Nelle impostazioni del sito, scegliete uno dei 13 font che abbiamo preselezionato da fonti aperte.
2
Caricate il vostro file con un font che avete acquistato altrove. Ad esempio, potete acquistare i font qui:

MyFonts.com
I prezzi partono da circa $19/29/49 per carattere. Alcuni dei font più economici costano 2 dollari, mentre altri possono costare 89 dollari. Alcuni set includono font gratuiti. È disponibile anche una prova di 30 giorni per i webfont.

Fonts.com
Gestisce un sistema di abbonamento. È possibile accedere gratuitamente a 3.000 font, mentre i piani a pagamento costano da 5 a 100 dollari al mese.

Type.today

3
Aggiungete un font attraverso Adobe Typekit. Si tratta di una libreria di font.
- Piano gratuito: 940 font
- Il piano a pagamento costa 49 dollari al mese e dà accesso a 5660 font.
- L'accesso a questi 5660 font è consentito agli abbonati ad Adobe Creative Cloud. Chi paga Creative Cloud non deve pagare un extra per Typekit.
4
Utilizzate Google Fonts. I font sono gratuiti. La nostra guida.
5
Caricare il file CSS. La nostra guida.
L'elenco dei font buoni
Futura. Acquista questo font: myfonts.com/fonts/paratype/futura-book
Proxima Nova. Acquista questo font: myfonts.com/fonts/marksimonson/proxima-nova
Franklin Gothic. Acquista questo font: myfonts.com/fonts/itc/franklin-gothic
Graphik. Acquista questo font: type.today/Graphik
Museo. Acquista questo font: myfonts.com/fonts/exljbris/museo-sans
Gotham. Acquista questo font: typography.com/fonts/gotham
GT Walsheim. Acquista questo font: grillitype.com/typefaces/gt-walsheim
Helvetica Neue. Acquista questo font: myfonts.com/fonts/linotype/helvetica-neue
Come garantire la leggibilità del vostro sito web
Qualunque sia il carattere scelto, deve essere leggibile. Soprattutto se si utilizza una foto di sfondo. Se si mette un carattere sottile su un'immagine che contiene molti piccoli dettagli, il testo sarà molto difficile da leggere. Tenetelo sempre presente!
Cosa si può fare? Innanzitutto, utilizzare una buona foto di sfondo con elementi grandi e omogenei. In secondo luogo, applicare un filtro di dissolvenza per ammorbidire l'immagine. In questo modo il testo sarà più facile da leggere. In terzo luogo, potete aumentare il peso del vostro blocco di design utilizzando uno stile in linea. Ciò significa che si assegnano le impostazioni a una sezione specifica del testo, non all'intero sito web. Evidenziate il testo desiderato e assegnate le impostazioni utilizzando l'editor del sito web.
Lo stile applicato in questo modo avrà sempre la priorità sulle impostazioni predefinite. Pertanto, quando si modificano le impostazioni dei caratteri del sito e le modifiche non sono visibili sul sito, significa che sono "in linea". Per rimuovere queste modifiche, è sufficiente evidenziare il testo e fare clic su "Cancella".
Il testo non è del tutto leggibile
Il testo è facilmente leggibile
Sulla copertina di sinistra, il testo è molto difficile da leggere. Per correggere questo problema abbiamo scelto una foto senza molti piccoli dettagli, abbiamo usato un filtro blu al 40% e abbiamo aumentato la grammatura dei caratteri.


Se siete interessati a saperne di più sulla tipografia, cercate siti web simili a quello che state progettando e scoprite quali sono i font utilizzati. L'estensione del browser What Font vi aiuterà in questo.

Inoltre, sfogliate questo archivio tipografico indipendente. Presenta una raccolta di siti web e campioni di materiale stampato ordinati in base al tipo di carattere.

Ti è piaciuto l'articolo? Condividetelo con gli amici! Grazie mille!
Realizzato su
Tilda