Rassegna


Autore: NICK SCHÄFERHOFF | Fonte: Torque


Come colori, immagini e altri elementi strutturali, il carattere tipografico è una parte importante del web design.
 
Comunica la filosofia del marchio, la personalità del brand e può migliorare notevolmente generale l’estetica di un sito.

Fortunatamente, negli ultimi anni font gratuiti e “typekits” sono diventati più facilmente utilizzabili.
Ora è possibile attingere a un gran numero di risorse così da includere un numero maggiore di font per migliorare la propria presenza online.
 
In questo articolo vedremo due modi per ottenere i font personalizzati sul tuo sito web WordPress, tramite i due servizi Google Fonts e Adobe Edge Web Fonts. Entrambi i servizi sono grandi librerie online di font facilmente disponibili da integrare sul tuo sito.
 
Tuttavia, prima di spiegare come fare, cerchiamo di discutere in fretta perché la tipografia è importante per il vostro sito web.

Perché usare font personalizzati

Usare correttamente i font nel nel web design è un’arte in sé.
Non è solo questione di scegliere il carattere giusto; anche la pesantezza, l’inclinazione e la dimensione dello stesso riveste un ruolo enorme.
 
D’altra parte, quando è fatta correttamente, la tipografia può cambiare notevolmente l’aspetto grafico del tuo sito e mostrare al meglio quello che vuoi comunicare. Un sito commerciale? La tua azienda? Freelance hipster? Il font sul tuo sito web è un fattore importante per attrarre i visitatori.
 
È un dato di fatto, in questo articolo, Derek Halpern parla di un esperimento che ha mostrato come gli ospiti di un ristorante ristorante hanno ipotizzato il livello di abilità dello chef sulla base al tipo di carattere utilizzato nel menu. Interessante, non è vero? Chiaramente non dovete giudicare mai un cuoco da un font, ma si tratta di un esperimento sulla psicologia dei font.
 
Oltre a questo, vi è la questione dell’esperienza visiva dell’utente. Sappiamo tutti che il contenuto è ciò che conta, ma il modo di presentare il contenuto è altrettanto importante. Possiamo scrivere gli articoli più interessanti e chiarificatori della storia, ma se sono presentati come un pasticcio illeggibile, nessuno perderà del tempo per leggerli.
 
Infatti, lo stesso articolo cita un altro esperimento. Qui ai partecipanti è stato chiesto di dire quanto tempo avrebbe richiesto completare un determinato numero di istruzioni. Sorprendentemente, quando le istruzioni sono state stampate in un carattere più complesso, le stime sono quasi raddoppiate.
 
Alla luce di questi risultati, pensi che i caratteri potrebbero svolgere un ruolo nel modo in cui le persone percepiscono il tuo sito web? In effetti, la scelta del font giusto è di fondamentale importanza per il successo di un sito web! Hanno influenza diretta sulla frequenza di rimbalzo, le conversioni, e altri fattori importanti.
 
Inoltre, date un’occhiata a questo elenco di temi WordPress basati sul fattore “typography” per capire il vero ruolo dei font.

Installazione dei caratteri da Google Font

Bene, ora andiamo al centro di tutto questo articolo: come effettivamente ottenere font personalizzati per il tuo sito. Come accennato in precedenza, vedremo due servizi che possono aiutare a raggiungere questo obiettivo.
Il primo è di Google Font. La sua biblioteca ospita centinaia di font open-source pronti per essere visualizzati sul tuo sito web. Ottenerli è semplice, come si vedrà in questa guida passo-passo.

1. Trovare il font giusto

Per prima cosa dobbiamo scegliere qualunque tipo di carattere che vorremmo aggiungere alla nostra pagina. Se si sa esattamente che quello che si sta cercando, si può semplicemente cercare qualsiasi tipo di carattere in base al nome.
Per coloro che sono indecisi o che vogliono curiosare un po ‘, Google fornisce una serie di opzioni di filtro:
 
Categoria

  • Serif
    Caratteri tipografici con grazie – in inglese serif fonts – che possiedono alle estremità degli allungamenti ortogonali, detti per l’appunto grazie. Ad esempio, Times New Roman.
  • Sans-Serif
    Caratteri tipografici senza grazie; ad esempio Arial.
  • Display
    Da utilizzare in dimensioni più grandi, come ad esempio per le intestazioni.
  • Handwriting
    Font che imitano la scrittura a mano.
  • Monospace
    Carattere tipografico a larghezza fissa; ad esempio Courier.

 
Stile

  • Thickness / Spessore
    Da molto sottile a molto spesso.
  • Slant / Inclinazione
    Da dritto a obliquo)
  • Width / Larghezza
    Da stretta ad ampia spaziatura tra i caratteri.

 
Script
(per andare oltre all’alfabeto latino)

  • Cirillico
  • Cirillico estesa
  • Devanagari
  • Greco
  • Greco esteso
  • Khmer
  • Latino
  • Latino esteso
  • Vietnamita

Possiamo anche cercare semplicemente un font del nome. Ad esempio il carattere “Advent Pro“.

2. Selezionare il tipo di carattere

Ora, aggiungete il font in questione alla vostra collezione facendo clic sul pulsante blu in basso a destra. Si aprirà una barra nella parte inferiore dello schermo in cui vengono salvati tutti i font selezionati.
Nota: è possibile aggiungere più di una famiglia di font.

Google Font | Scelta del font
Google Font | Scelta del font

3. Scegliere stili di carattere

Ora è il caso di selezionare i diversi stili di carattere. La maggior parte dei tipi di carattere sono disponibili in vari livelli di spessore. Dal momento che il caricamento di font personalizzati incide sul tempo di caricamento della pagina (notare il cronometro sulla destra), è meglio aggiungere solo gli stili di cui si ha realmente bisogno. Per esempio. “normal”, “light” E “extra light.”

Google Font | Scegli stile font
Google Font | Scegli stile font

4. Selezionare Ulteriori set di caratteri (opzionale)

Se avete intenzione di visualizzare il sito in una lingua con un alfabeto diverso da quello latino, e se il vostro tipo di carattere scelto lo supporta, nella prossima sezione è possibile scegliere il sottoinsieme di cui avrete bisogno. Se non avete intenzione di fare nessuna di queste cose, potete lasciare tutto così com’è.

5. Copiare il codice e aggiungerlo al sito WordPress

Dalle vostre scelte appena effettuate, Google Font genererà il codice necessario per caricare i font sulla pagina.
Sono disponibili tre opzioni: HTML, CSS o JavaScript.

Se optate per HTML o Javascript, il codice fornito va insrito nel documento “header.php”, preferibilmente subito dopo il tag . Nel caso in cui si opti per i CSS, la chiamata deve essere aggiunta all’inizio del file “style.css”.

6. Chiama il font nel CSS

Ora il tipo di carattere è completamente integrato nel tuo sito. Tutto quello che resta da fare è in realtà dichiararlo da qualche parte.
Per visualizzare il carattere personalizzato, è necessario assegnarlo a un elemento sul tuo sito tramite CSS, ad esempio in questo modo:
h1 {
font-family: 'Advent Pro', sans-serif;
font-weight: 400;
}


Ora hai finito. Non è stato così difficile ora, vero?
Esistono comunque plugin che svolgono lo stesso compito.

Easy Google Fonts
Easy Google Fonts

Easy Google Fonts è un plugin che consente di installare Google Font sul sito senza armeggiare con il codice. È inoltre integrato con il WordPress Customizer per consentire di visualizzare in anteprima le modifiche del font sul tuo sito in tempo reale. Quindi, se siete alla ricerca di un modo per aggiungere font personalizzati al vostro sito senza toccare alcun file, questa è una valida opzione.


Installazione dei caratteri da Adobe Edge Web Fonts

Adobe Edge Web Fonts
Adobe Edge Web Fonts

Il nostro secondo servizio è Adobe Edge WebFonts. Si tratta di un servizio di – manco a dirlo – Adobe, il creatore di Photoshop (e del fastidioso Flashplayer che vuole sempre essere aggiornato).
Come Google Fonts, Edge Web Fonts è una directory con più di 500 caratteri tipografici completamente gratuiti. Il servizi è forse ancora più facile di Google Fonts. Clicca su “Get Started” nella pagina principale o vai a questo indirizzo per iniziare.

1. Trova il tuo font
Adobe Edge Web Fonts
Adobe Edge Web Fonts

Per ottenere il font che desiderate, è possibile cercare direttamente per nome o filtrare i caratteri disponibili da un certo numero di classificazioni e proprietà. Adobe offre ancora più opzioni rispetto ai concorrenti.

  • Classificazione (sans-serif, Serif, Slab Serif, Scrittura, Blackletter, Monospaced, fatti a mano e decorativi)
  • Consigliato per le intestazioni o paragrafi
  • Peso, altezza, larghezza, maiuscole/minuscole, Contrasto, Oldstyle…
  • Il supporto per le lingue straniere e alfabeti alternativi come il cirillico, catalano, tedesco o svedese

La scelta “Advent Pro” è disponibile anche qui, quindi non ci sono problemi a reperire il font tramite la ricerca per nome.

2. Aggiungere il font alla vostra selezione

Quando si passa sopra un tipo di carattere che ti piace, viene mostrata una nuova finestra pop-up che mostra tutti gli stili disponibili e le loro licenze
Clicca sui link di licenza per vedere se il font è disponibile per il vostro uso. Per procedere a ottenere il carattere sul tuo sito, clicca su ‘Select this font’ in alto.

Adobe Edge Web Fonts | Selezionare il font
Adobe Edge Web Fonts | Selezionare il font

3. Configurare il font

A questo punto si aprirà un menu in basso da cui è possibile configurare ulteriormente il font.

ADOBE EDGE WEB FONTS | configurare il font
ADOBE EDGE WEB FONTS | configurare il font

In primo luogo scegliete se utilizzare il set standard o tutti i caratteri disponibili. Standard include tutti i caratteri latini più alcuni segni tipografici utili. La seconda opzione è costituita da tutti i caratteri disponibili in questo tipo di carattere. Di nuovo, questo è un problema di tempo di caricamento ma tieni presente che può sempre capitare di dover utilizzare caratteri non presenti nel nostro alfabeto standard.
ADOBE EDGE WEB FONTS | configurare il font
ADOBE EDGE WEB FONTS | configurare il font

Prossimo scegliere gli stili desiderati, includendo solo quelli realmente necessari. Per esempio, se non hai intenzione di utilizzare “Semibold” non c’è bisogno di caricare questo stile.

4. Includere il codice nel tuo sito

Una volta che hai finito con la configurazione, devi copiare il codice in basso. A differenza di Google Font, Adobe Edge Web Fonts fornisce solo uno script JS.
Come detto in precedenza, questo deve essere incluso nella sezione del tuo sito web, preferibilmente subito dopo il tag iniziale.

Nota: quando si sceglie più di un tipo di carattere, tutti loro saranno inclusi nella stessa riga di codice in modo da poterli aggiungere al tuo sito in una sola volta. Non c’è bisogno di passare attraverso lo stesso processo più volte e aggiungere più righe di codice.

5. Chiamare il carattere nel file css

Ora tutto quello che resta da fare è chiamare il tipo di carattere da qualche parte nel foglio di stile.
Per esempio nelle intestazioni:
h1, h2, h3 {
font-family: avvento-pro, sans-serif;
}


Aggiungere font personalizzati al tuo sito in WordPress può fare una differenza enorme.
Sono un ottimo strumento di progettazione, trasmettono personalità, e ti permettono di sviluppare e caratterizzare ulteriormente il vostro marchio.
I font personalizzati determinano soprattutto una migliore leggibilità dei contenuti e influenzano direttamente l’esperienza dell’utente.
Utilizzando font web è un modo conveniente per ottenere una stile di typography personale per il tuo sito.

Entrambi i servizi che abbiamo testato sono ben forniti, gratuiti e facili da usare per chiunque. Con pochi clic, è possibile scegliere tra centinaia di diversi tipi di font e caricali sul sito web
Usi caratteri personalizzati per WordPress?
Qual è il tuo metodo preferito?

 


Leggi l’articolo completo dal blog di Torque