Come utilizzare i caratteri variabili su un sito Web WordPress

Diciamo la verità. Se utilizzi un singolo carattere sul tuo sito Web senza variazioni di peso, altezza o spaziatura, le persone si annoieranno. Non leggeranno le tue cose. Ecco perché è necessario utilizzare caratteri variabili sul tuo sito. Anche se scegli di utilizzare un solo carattere, puoi modificarlo abbastanza tramite CSS che funzionalmente diventa una moltitudine di scelte di caratteri.

Che cos'è un carattere variabile?

I caratteri variabili sono caratteri singoli che possono essere modificati dai CSS secondo 5 criteri diversi, o assi. Ciascun asse controlla un aspetto particolare dell'aspetto del carattere e ha un'etichetta CSS corrispondente.

• Peso (WGHT in CSS)
• Inclinato ( inclinato in CSS)
• Corsivo ( ital in CSS)
• Dimensione ottica ( opsz in CSS)
• Larghezza ( peso in CSS)

E poi c'è lo pseudo-asse Grade, rappresentato da GRAD in CSS. Vorrei poterti dire perché Grade è scritto tutto in maiuscolo quando usato nei tuoi fogli di stile... ma non posso. È quello che è. Inoltre, nuovi assi possono essere introdotti (e sono) da diverse aziende man mano che la tecnologia si sviluppa. Quindi c'è molto che saremo in grado di fare con questi in futuro.

Quando combini tutti questi diversi assi, puoi fare in modo che qualsiasi singolo carattere faccia all'incirca tutto ciò che vuoi fare, persino animarli come SVG. (Nota, questo include anche caratteri di icone come il nostro.)

Perché usare caratteri variabili?

La risposta breve è che sono molto più efficienti dell'incorporamento e del rendering di più caratteri sul tuo sito. La documentazione per gli sviluppatori di Google lo riassume bene:

I caratteri variabili OpenType ci consentono di memorizzare più varianti di una famiglia di caratteri in un singolo file di caratteri. Monotype ha eseguito un esperimento combinando 12 caratteri di input per generare otto pesi, su tre larghezze, sia nello stile corsivo che in quello romano. La memorizzazione di 48 caratteri individuali in un singolo file di caratteri variabili ha comportato una riduzione dell'88% delle dimensioni del file . (sottolineare il loro)

Utilizzo di caratteri variabili in WordPress

Quindi, ora che sappiamo che i caratteri variabili sono piuttosto fantastici, il prossimo passo è incorporarli nel nostro flusso di lavoro e nei siti WordPress.

Passo 1

La prima cosa che devi fare è installare il font sul tuo sito web. Puoi utilizzare un plug-in come Use Any Font, caricarlo direttamente tramite l'interfaccia Divi se sei un membro ET, collegarti ad esso utilizzando @font-face o rinunciare completamente a plug-in e temi e farlo alla vecchia maniera.

Indipendentemente da come lo fai, una volta che lo hai sul tuo sito, usare il font è in realtà abbastanza facile. Per questo, ho caricato il font gratuito Gingham tramite Divi perché è quello che uso. Il risultato finale è lo stesso.

Passo 2

Poiché i caratteri variabili sono basati su CSS, vorrai andare ovunque tu abbia aggiunto il tuo CSS personalizzato. Potrebbe trovarsi in un file custom.css , uno stylesheet.css , nel CSS aggiuntivo del personalizzatore di WordPress o anche nella parte inferiore della scheda Generale delle opzioni del tema Divi (la maggior parte dei temi ha anche una casella simile). Inserisci questo codice (con il nome del carattere variabile che stai utilizzando).

@font-face {
  font-family: 'Gingham';
  src: url('Gingham.woff2') format('woff2'),
}

Apparirà qualcosa di simile nella tua finestra CSS.

Tutto ciò che fa è permetterti di utilizzare il carattere sul tuo sito web.

Passaggio 3

Ora è il momento di modellarlo in qualche modo. Puoi fare quello che vuoi con esso e lo stile può essere applicato a qualsiasi classe o ID. Come puoi vedere, questo viene applicato a qualsiasi div .et_pb_text . Puoi applicarlo a tutto il corpo o h1, h2, h3 o anche p. La tua scelta. Sono caratteri variabili dopo tutto.

Ci sono due modi in cui puoi avvicinarti a questo. Il primo è una singola ed efficiente linea di CSS che utilizza le impostazioni di variazione dei caratteri.

h3 { 
  font-family: 'Gingham',Helvetica,sans-serif;
  font-size: 35px;
  font-variation-settings: 'wght' 700, 'wdth' 75; 
}

Puoi aggiungerli anche con altri CSS, proprio come float o z-axis o qualsiasi altra cosa.

In alternativa, è possibile inserire gli assi su singole righe.

h3 { 
  font-family: 'Gingham',Helvetica,sans-serif;
  font-size: 35px;
  wdth: 900;
  wght: 100;  
}

Entrambi fanno la stessa cosa alla fine.

Credito immagine: Guida per gli sviluppatori di Google

Dove trovo i caratteri variabili?

Trovare caratteri variabili è un po' più difficile che andare su Google Fonts (soprattutto perché nessuno dei Google Fonts è variabile). Poiché la tecnologia è nuova, i caratteri variabili non sono così diffusi. Devono essere realizzati individualmente a causa di tutte le interazioni tra gli assi, quindi nei luoghi che li forniscono, sono generalmente caratteri premium per l'acquisto.

Adobe Typekit offre una serie di caratteri variabili tra cui scegliere. Puoi accedere ad alcuni TypeKit con un abbonamento a Creative Cloud.
• V-Fonts.com è una directory di molti posti diversi in cui puoi ottenere caratteri variabili. Si collegano alle diverse fonti di ciò che tirano.
• Monotype vende caratteri variabili e c'è anche una demo gratuita del loro carattere FF Meta .

Caratteri variabili gratuiti

Detto questo, puoi ottenere alcuni caratteri individuali gratuiti. Questi sono quelli consigliati dal delizioso e sempre talentuoso Kenny Sing.

• Gingham è quello che abbiamo usato sopra. Kenny mi ha messo su di esso, ed è una buona cosa.
• League Mono è anche una buona scelta per un carattere variabile semplice ma versatile.
• La pagina di Renner dice che è un capolavoro moderno. Chi sono io per litigare?

Questo dovrebbe bastarti per ora. Poiché i caratteri variabili sono come dozzine di caratteri racchiusi in una scatola, scarica quelli sopra e avrai accesso a più opzioni di quante ne possa contare.

Tieni a mente

L'unica cosa che devi tenere a mente quando usi i caratteri variabili sul tuo sito WordPress è questa: non tutti i browser li supportano ma Firefox, ad esempio, ha alcuni problemi con loro. Quindi, se hai intenzione di rendere la parte variabile di un carattere variabile una parte preziosa del tuo sito Web, probabilmente vorrai un piano di emergenza per le persone su Firefox... o Microsoft Edge. Ma poi di nuovo, probabilmente ne hai già uno a causa delle persone che eseguono ancora IE 6.

Avvolgendo

I caratteri variabili apportano un sacco di valore alla tabella con pochissimo lavoro da parte dell'utente. Essere in grado di modellarli con attributi CSS proprio come potresti aggiungere grassetto o corsivo è meraviglioso. E poiché più browser iniziano a riconoscere i vari assi che vengono sviluppati per loro, i caratteri variabili saranno qualcosa con cui vorrai almeno sperimentare, se non abbracciare con entrambe le braccia.

Cosa ne pensi dei caratteri variabili?

Articolo in primo piano immagine credito Tyler Finck / tylerfinck.com