Le parole sono la spina dorsale di Internet, nonostante la proliferazione dei media. Ciò significa che i caratteri tipografici che sceglierete per il vostro sito saranno un aspetto cruciale del vostro layout e del vostro design.

La tipografia di WordPress può evocare stati d’animo, aiutare il branding e molto altro ancora. Il Full Site Editing (FSE) in WordPress mette la personalizzazione dei caratteri tipografici nelle mani degli utenti e il file theme.json aiuta gli sviluppatori a creare temi WordPress che sfruttano questo aspetto.

Questo articolo analizza la tipografia di WordPress sia per FSE che per theme.json. Tuttavia, la discussione include anche contesti chiave come la tecnologia utilizzata, le considerazioni tecniche da tenere a mente e l’evoluzione dell’uso dei caratteri tipografici nel design.

La tipografia sul web: una breve storia

Se guardate ai primi progetti web, noterete che, nonostante la varietà dei layout, i caratteri tipografici hanno avuto una presentazione coerente. Questo è dovuto in parte alla disponibilità e in parte alla necessità. In poche parole, senza la tecnologia di cui disponiamo oggi, le parole sul web possono utilizzare solo i caratteri disponibili sul vostro computer.

Un “navigatore del web” della metà e della fine degli anni ’90 avrebbe avuto a disposizione solo una manciata di caratteri prevedibili: Times New Roman, Arial, Helvetica, Georgia e Verdana. Gli ultimi due sono prodotti da Microsoft che si adattano bene al web a prescindere dall’epoca.

Un confronto tra due caratteri tipografici serif, Verdana e Georgia. L'immagine mostra le lettere maiuscole e minuscole, nonché i numeri, in entrambi i caratteri. Il Verdana appare più condensato e geometrico, mentre il Georgia ha serif più pronunciati e un aspetto leggermente più tradizionale.
Esempi di font Verdana e Georgia.

Questa selezione primitiva è coerente e affidabile ma manca di flessibilità. Servizi come Google Fonts e Adobe Fonts utilizzano il formato WOFF per dare accesso a una libreria di migliaia di font, con un processo di incorporazione semplice.

Il sito web di Google Fonts mostra le anteprime dei font e le opzioni di filtraggio. Il testo dell'anteprima recita:
L’interfaccia principale di Google Fonts.

In questo modo è possibile migliorare la leggibilità, creare design particolari e personalizzare l’esperienza utente (UX) del vostro sito. Tra gli svantaggi ci sono i potenziali problemi di performance (come il cambio di layout dei contenuti), la dipendenza da servizi di terze parti per la visualizzazione dell’elemento più importante del vostro sito e i problemi di privacy.

Questo porta molti web designer a rinunciare alle librerie di font e a riconsiderare l’uso dei font di sistema. L’elaborazione più veloce e il controllo che avete sull’applicazione di uno “stack di font di sistema” che dà priorità ai caratteri nativi e utilizza anche opzioni di fallback è un approccio solido.

WordPress e la tipografia

WordPress pone una forte enfasi sulla tipografia per aiutarvi a creare contenuti coinvolgenti e leggibili. Nel corso della sua storia, i temi predefiniti di WordPress utilizzano tutti abbinamenti di caratteri che raggiungono un equilibrio tra estetica e funzionalità.

I temi predefiniti attuali utilizzano stack di font di sistema per una presentazione pulita, moderna e performante. I temi predefiniti più vecchi utilizzano abbinamenti come Noto Sans e Noto Serif (per Twenty Fifteen) e Montserrat e Merriweather (per Twenty Sixteen).

Per mostrare questo “cerchio della vita” tipografico, Twenty Sixteen utilizza Helvetica e Georgia come opzioni di riserva. Il tema predefinito di Twenty Ten utilizza solo Helvetica, Arial e Georgia:

L'anteprima del tema WordPress.org per
La pagina demo di Twenty Ten da WordPress.org.

Se da un lato queste scelte definiscono il tono del design di WordPress all’interno di ogni tema, dall’altro possono ispirarvi a prestare molta attenzione all’uso della tipografia, cosa che il FSE WordPress vi aiuta a fare.

Un breve riassunto sul Full Site Editing e sul file theme.json

FSE e theme.json sono fondamentali per la gestione della tipografia in WordPress, quindi la loro comprensione è essenziale. Il FSE sfrutta l’Editor a blocchi e aggiunge ulteriori funzionalità per diventare il Site Editor.

L'interfaccia dell'editor del sito WordPress visualizza la homepage di un'azienda di progettazione paesaggistica. La pagina ha uno sfondo blu con un testo bianco che recita
L’interfaccia dell’editor del sito di WordPress assomiglia molto all’editor a blocchi, ma con maggiori possibilità di personalizzazione.

Questo uniforma le opzioni di progettazione del sito in diversi modi:

  • Si utilizza l’approccio di modifica dei blocchi per l’intero sito, non solo per i contenuti.
  • Una libreria di modelli fa parte della configurazione, quindi è possibile modificarli usando gli stessi strumenti dei contenuti.
  • Anche lo styling avviene all’interno dell’Editor del sito e offre uno schema di impostazioni globali.
  • L’editor del sito non richiede alcun codice per implementare le opzioni disponibili. In questo modo si colma il divario tra lo sviluppo e la progettazione per l’utente finale.

Possiamo considerare il file theme.json come una versione di sviluppo del FSE. È necessario conoscere la JavaScript Object Notation (JSON) per lavorare con il file, ma questo è alla portata della maggior parte dei proprietari di siti. Si tratta di un file di configurazione centrale per la gestione degli stili e delle impostazioni globali.

Una finestra dell'editor di codice intitolata viene visualizzata su uno sfondo panoramico di montagne boscose. L'editor mostra una parte di un file theme.json di WordPress con varie configurazioni di stile. Il codice include impostazioni per il calendario, le categorie e gli elementi del codice, utilizzando variabili CSS per i colori e la spaziatura. I numeri di riga sono visibili a sinistra e l'interfaccia dell'editor ha un tema scuro per migliorare la leggibilità sullo sfondo.
Un file theme.json visualizzato in un editor di codice.

Ogni impostazione utilizza una coppia chiave/valore di option:value e si può implementare in diversi modi:

  • Definire palette di colori globali.
  • Impostazione di famiglie di caratteri e dimensioni.
  • Configurando stili specifici del blocco.
  • Gestendo le preferenze di spaziatura e layout.

Sfruttare theme.json permette di creare temi più coerenti e personalizzabili senza dover ricorrere a CSS personalizzati (anche se è possibile farlo). L’adattabilità e la flessibilità di theme.json ne fanno un componente fondamentale per lo sviluppo di temi per WordPress. L’approccio ottimale consiste nell’utilizzare entrambi in modi diversi per la progettazione di tutti i temi e la tipografia non fa eccezione.

Impostare la tipografia nell’editor del sito WordPress

Se sapete come usare l’Editor dei blocchi, è possibile anche usare l’Editor del sito. All’interno di WordPress, vai alla schermata Aspetto > Editor. In questo modo viene visualizzata la schermata iniziale dell’Editor del sito:

La schermata iniziale dell'editor del sito WordPress. La barra laterale di sinistra mostra le opzioni di design, mentre l'area principale presenta una homepage a tema blu con il titolo
La schermata iniziale dell’Editor del sito.

La schermata Stili nella navigazione a sinistra offre alcune opzioni di design globale che includono modifiche alla tipografia:

Una GIF dell'editor del sito WordPress che mostra varie preimpostazioni dello stile del tema. L'area del contenuto principale mostra
Diverse opzioni di stili preimpostati nell’Editor del sito WordPress.

Per la maggior parte dei casi di utilizzo, le impostazioni individuali per i vari aspetti tipografici ti daranno un valore maggiore. Nella parte superiore della schermata Stili ci sono due piccole icone che aprono altre opzioni: il Libro degli stili e l’icona della matita Modifica stili.

Una parte dell'Editor del sito WordPress che mostra le opzioni di stile sul lato sinistro e un'anteprima del sito web sulla destra. Le due icone per la visualizzazione e la modifica sono evidenziate in rosso.
Le icone di modifica degli stili nell’Editor del sito.

Inoltre, è possibile impostare le opzioni tipografiche a livello di elemento e per ogni blocco.

La libreria dei font

La schermata Modifica stili > Tipografia mostra la Libreria dei caratteri, anche se non ha questo nome esplicito nell’Editor del sito. Questa permette di gestire i font e i caratteri tipografici in diversi modi:

  • È possibile caricare e gestire caratteri tipografici personalizzati.
  • C’è un’opzione per utilizzare Google Fonts direttamente all’interno di WordPress.
  • Si possono creare collezioni di font utilizzando PHP.

Per accedere alla libreria di font dalla sezione Tipografia nella barra laterale dell’Editor del sito, cliccate sull’icona Gestisci font:

Il pannello delle impostazioni tipografiche nell'Editor del sito mostra le opzioni dei font, tra cui Cardo, Jost, System Sans-serif e System Serif. Nell'angolo in alto a destra è evidenziato il pulsante Gestisci font. Il pannello è visualizzato accanto a uno sfondo blu del sito contenente testo latino, che mostra gli stili tipografici applicati.
L’icona Gestisci font nell’Editor del sito WordPress.

Qui, la scheda Libreria mostra gli attuali caratteri tipografici registrati per il vostro tema e indica quali sono quelli attivi:

L'interfaccia della libreria di font di WordPress mostra i font installati e quelli del tema. Merriweather Sans è elencato come font installato con quattro varianti attive. I font tematici includono Cardo, Jost, System Sans-serif e System Serif, ciascuno con le rispettive varianti attive.
L’interfaccia della libreria di font di WordPress.

Cliccando su uno di questi font è possibile attivare o disattivare i singoli caratteri:

La finestra di dialogo di selezione della libreria di font che mostra le opzioni per la famiglia di font Cardo. La finestra di dialogo mostra tre varianti: Cardo Normal, Cardo Bold e Cardo Normal Italic, ciascuna con una casella di controllo selezionata. Sopra le varianti, c'è una nota che avverte che troppe varianti di font potrebbero rallentare il sito web.
I font attivi all’interno della libreria di font dell’editor del sito.

Nella scheda Carica, si può utilizzare una finestra di dialogo di caricamento drag-and-drop per installare i propri font nei formati TTF, WOFF, WOFF2 e OTF.

La scheda Installa font si collega a Google Fonts, in modo da poter sfruttare quella libreria all’interno del vostro tema. Questo approccio scarica e serve i font dal vostro sito, piuttosto che da un CDN di Google:

La libreria dei font di WordPress mostra le opzioni per installare i font di Google. La barra di ricerca consente agli utenti di trovare font specifici e un elenco mostra varie opzioni di font, tra cui Merienda, Merriweather e Metal Mania. I controlli di paginazione sono visibili in basso.
La libreria di Google Fonts nell’editor del sito WordPress.

Selezionate i font che volete installare dall’elenco completo, quindi cliccate sul pulsante Installa. Una volta visualizzata la notifica di successo, i font verranno visualizzati nella scheda Libreria:

La libreria dei font di WordPress mostra i font installati e quelli dei temi. Merriweather Sans è elencato come font installato con quattro varianti attive. I font tematici includono Cardo, Jost, System Sans-serif e System Serif, ciascuno con le rispettive varianti attive.
I font installati per un’istanza di WordPress.

Ciò permette di utilizzare questi font come qualsiasi altro font sul vostro sito. Ora basta solo personalizzarli per adattarli alle vostre esigenze.

Il Libro degli stili

Uno dei pericoli della scelta e dell’impostazione dei caratteri tipografici è che non si sa come verranno abbinati a schemi di colori, layout e formattazioni. Il Libro degli stili è prezioso perché permette di vedere in anteprima le impostazioni tipografiche su diversi elementi.

L'interfaccia dell'editor del libro degli stili di WordPress mostra uno sfondo blu con
Il Libro degli stili dell’editor del sito.

Scegliendo l’icona dell’occhio si aprirà il Libro degli stili, dove sono presenti cinque schede:

  • Testo. Qui è possibile lavorare con paragrafi, intestazioni, elenchi e altri elementi che si concentrano sul testo.
  • Media. Qui è possibile regolare le immagini, i video e le presentazioni audio.
  • Design. Questa sezione raccoglie gli aspetti strutturali del design, come colonne, separatori e pulsanti.
  • Widget. Ci sono due elementi in questa schermata: le generazioni dinamiche, come gli elenchi di archivi, e i commenti. Qui è possibile anche lavorare con la barra di ricerca, le icone dei social media e le tag cloud.
  • Tema. Si concentra sugli elementi dell’header del sito, come il titolo, la tagline, la navigazione e il logo.

Facendo clic su un elemento del libro degli stili, si avranno a disposizione diverse opzioni con cui giocare nella barra laterale. Qui si lavora con le impostazioni tipografiche di ogni blocco piuttosto che con gli elementi dedicati:

Il Libro degli stili mostra il pannello delle impostazioni tipografiche con le opzioni per le intestazioni e i paragrafi. Il titolo "Il codice è poesia" è visualizzato in varie dimensioni, con un paragrafo di esempio sotto. Le opzioni di personalizzazione dei caratteri sono visibili sul lato destro.
È possibile modificare la tipografia direttamente dal Libro degli stili.

Possiamo arrivare alle stesse schermate attraverso la sezione Stili > Blocchi dalla homepage dell’Editor del sito. In ogni caso, le opzioni che vedrete vi permettono di personalizzare la tipografia (e molto altro) di ogni blocco in modo dettagliato.

Ottimizzare le opzioni tipografiche nell’Editor del sito

Per tutti i blocchi e gli elementi sono disponibili le stesse opzioni principali. Ecco una panoramica di ogni opzione all’interno del pannello.

Tipo e dimensione del carattere

Il menu a tendina Font è semplice: scegliete il font che volete applicare all’elemento o al blocco specifico:

L'interfaccia del Libro degli stili mostra un paragrafo di Don Chisciotte e un elenco di personaggi di Alice nel Paese delle Meraviglie. La barra laterale di destra mostra le impostazioni tipografiche, tra cui la selezione del carattere (attualmente impostato su Cardo) e varie opzioni di formattazione del testo. Una citazione di Julio Cortázar è riportata in un riquadro blu in basso.
Scegliere un font dalla selezione disponibile nella scheda Tipografia.

Le preimpostazioni delle dimensioni sono le meno personalizzabili all’interno dell’Editor del sito. È possibile scegliere una dimensione tra Small e Extra Extra Large:

The Site Editor's Typography settings panel. The font is set to Cardo, size is set to Medium (M), and the appearance drop-down menu shows Regular selected. Line height is set to 1.55, and additional options for letter spacing and letter case are visible.
WordPress offre delle preimpostazioni per le dimensioni dei caratteri all’interno dell’Editor del sito.

Modificando il file theme.json, è possibile cambiare questi valori predefiniti, ma non è possibile farlo dall’Editor del sito. Il pulsante Imposta dimensione personalizzata permette di impostare una dimensione personalizzata utilizzando una serie di unità di misura:

L'interfaccia dell'editor del sito mostra le impostazioni tipografiche di un sito. L'area di testo principale visualizza un paragrafo in bianco su sfondo blu. La barra laterale di destra consente di personalizzare il carattere, la dimensione, l'aspetto e l'altezza della linea, con il carattere Cardo selezionato e la dimensione impostata a 1,2 rem.
Scegliere una dimensione e un’unità di misura del carattere personalizzata.

Ci sono altri modi per regolare la tipografia all’interno dell’Editor del sito, compresi i metodi per i quali solitamente si utilizzano i CSS.

Aspetto, altezza delle linee e spaziatura delle lettere

Il menu a tendina Aspetto sembra semplice: scegliete il peso di un font da un ampio elenco e sarà applicato al vostro testo. Tuttavia, spesso non avrete a disposizione tutti i font disponibili per ogni peso.

Il menu a discesa Aspetto nell'Editor del sito WordPress. Il pannello è impostato su Regolare. Sotto di esso, un controllo di regolazione dell'altezza delle linee è impostato su 1,55, con pulsanti più e meno per la regolazione fine.
Il menu a tendina Aspetto nell’Editor del sito WordPress.

I nostri test dimostrano che WordPress non filtra questo elenco per mostrare solo i pesi dei font disponibili. Inoltre, applica una “corrispondenza più vicina” se si seleziona un peso senza un font corrispondente. Ad esempio, per il nostro sito di esempio utilizziamo Cardo Normal, Cardo Bold e Cardo Bold Italic. Scegliendo Semi Bold, Bold, Extra Bold o Black si utilizza solo Cardo Bold:

Una GIF dell'editor del sito WordPress che mostra uno sfondo blu con una citazione di Don Chisciotte sul lato sinistro. La barra laterale di destra mostra un utente che scorre le opzioni del menu a discesa Aspetto.
Modificare l’aspetto del testo nell’Editor del sito WordPress.

L’altezza della riga non utilizza preimpostazioni e bilancia la scelta del font, l’aspetto e le dimensioni. Questo valore aumenta lo spazio tra una riga e l’altra ed è spesso un’implementazione pratica quando il testo sembra troppo ravvicinato:

Una GIF dell'editor del sito WordPress che mostra una modifica dell'impostazione dell'altezza delle linee nella barra laterale destra. L'area principale mostra un testo tratto da Don Chisciotte e un elenco di personaggi di Alice nel Paese delle Meraviglie. Una citazione in basso recita:
Cambiare l’altezza delle righe nell’Editor del sito WordPress.

La spaziatura delle lettere è simile e segue l’abitudine dei CSS di aggiungersi alla spaziatura naturale presente:

La barra laterale Tipografia dell'editor del sito mostra il font impostato su Cardo, con le opzioni per regolare le dimensioni, l'aspetto, l'altezza delle linee e la spaziatura delle lettere. Uno sfondo blu con testo bianco mostra come la spaziatura delle lettere (5 px qui) appare sul sito web.
È possibile spingere la spaziatura delle lettere troppo in là per renderla utilizzabile.

Come per il ridimensionamento personalizzato dei caratteri, è possibile selezionare diverse unità di misura. La scelta di un valore relativo è spesso l’approccio preferibile in questo caso. WordPress imposta la spaziatura delle lettere su un valore predefinito CSS di “normale” Questo lascia che sia il browser a scegliere il valore e, secondo la nostra esperienza, è l’ideale.

È una pratica tipica quella di utilizzare piccoli valori positivi di spaziatura delle lettere – spesso non più di 0,12rem/em – e quasi nessuna spaziatura negativa.

L’ultimo gruppo di scelte, le maiuscole, permette di scegliere se rendere il testo maiuscolo, minuscolo o a frase. è possibile anche eliminare le maiuscole. Questo è ottimo per garantire la coerenza quando si tratta di caratteri, in quanto non è necessario utilizzare un caso specifico quando si crea un contenuto.

Come utilizzare theme.json per definire la tipografia del tema WordPress

L’Editor del sito è ottimo per gli utenti che non hanno conoscenze tecniche. Il file theme.json è il modo per garantire che l’Editor del sito offra agli utenti ciò di cui hanno bisogno per personalizzare i loro siti. È il file di configurazione che costituisce la base di sviluppo del vostro tema.

Non ci occuperemo della struttura e della formattazione dell’intero file theme.json , ma vedremo come definire, impostare e applicare la tipografia al suo interno.

La struttura del file theme.json e definire le impostazioni globali

Si utilizza JSON per definire tutti gli elementi di theme.json, compresa la tipografia. L’elemento typography si annida sotto l’oggetto settings all’interno del file. Da lì, è possibile annidare altri elementi, proprietà e oggetti per costruire la tipografia del vostro sito:

{
  "version": 3,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif",
          "slug": "system-font",
          "name": "System Font"
        }
      ],
      "fontSizes": [
        {
          "slug": "small",
          "size": "13px",
          "name": "Small"
        },
        {
          "slug": "medium",
          "size": "20px",
          "name": "Medium"
        }
      ]
    }
  }
}

Tutti questi elementi seguono uno schema simile. Le impostazioni predefinite e più facili da capire sono quelle globali. Queste si annidano in modo semplice, ma è possibile anche definire le impostazioni tipografiche per i singoli blocchi:

"styles": {
  "blocks": {
    "core/paragraph": {
      "typography": {
        "fontFamily": "var(--wp--preset--font-family--primary)",
        "fontSize": "var(--wp--preset--font-size--medium)",
        "lineHeight": "1.5"
      }
    },
    "core/heading": {
      "typography": {
        "fontFamily": "var(--wp--preset--font-family--secondary)",
        "fontWeight": "700"
      }
    }
  }
}

In questo caso si utilizza la proprietà blocks e uno spazio dei nomi specifico per ogni blocco che si desidera utilizzare. Sebbene aggiunga altri due livelli di annidamento, non c’è alternativa a questo approccio. In ogni caso, avete a disposizione molte proprietà con cui giocare.

Registrare i font

Per la tipografia avete lo stesso livello di personalizzazione dell’interfaccia dell’Editor del sito, e in alcuni casi anche di più. A livello di base, annidate il vostro stack di font nella proprietà fontFamilies, per poi dargli uno slug e un nome:

  • fontFamily corrisponde al valore CSS font-family e sarà la pila di caratteri che desiderate utilizzare nel vostro tema.
  • name è ciò che si vede nell’Editor del sito quando si seleziona un font, quindi sarà leggibile.
  • slug si aggiunge a una proprietà CSS personalizzata per un ulteriore utilizzo.

Per i font di sistema, questo è semplice:

…
  "typography": {
    "fontFamilies": [
    {
      "name": "Primary",
      "slug": "primary",
      "fontFamily": "Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif"
    },
    {
      "name": "Secondary",
      "slug": "secondary",
      "fontFamily": "system-ui, sans-serif"
      }

La registrazione di web font personalizzati richiede l’utilizzo della proprietà fontFace e la definizione di alcuni attributi:

…
"name": "Secondary",
"slug": "secondary",
"fontFamily": "'Open Sans', sans-serif",
  "fontFace": [
    {
      "fontFamily": "Open Sans",
      "fontWeight": "300 800", // This is a range of font weight values.
      "fontStyle": "normal", // This has to be a valid CSS font-style value.
      "fontStretch": "normal", // This also needs to be a valid CSS font-stretch value.
      "src": [ "file:./assets/fonts/open-sans.woff2" ] // This is an array of URLs for custom fonts, and can support multiple formats.
    },
…

Una volta registrati i font, potrete selezionarli dai vari menu a tendina dell’Editor del sito.

Ci sono diversi modi per registrare i caratteri per il vostro tema. C’è la libreria di font all’interno dell’interfaccia dell’Editor del sito, la tipica richiesta PHP e il plugin Create Block Theme:

Uno sfondo blu con testo bianco che recita CREATE BLOCK THEME in un font sans-serif in grassetto. Le parole sono impilate verticalmente con CREATE in alto nella dimensione più grande, BLOCK leggermente più piccolo al centro e THEME più piccolo in basso.
L’immagine dell’intestazione di Create Block Theme da WordPress.org.

Si tratta di un modulo per la creazione di un tema, ma permette anche di registrare e definire i caratteri tipografici. Una volta registrati i font nel modo più comodo (noi consigliamo la Libreria di font), è possibile iniziare a pensare al loro dimensionamento.

Impostazione del dimensionamento e dei preset dei font nel file theme.json

Un’altra attività fondamentale per la tipografia è l’impostazione delle dimensioni dei caratteri. Questo utilizza la proprietà fontSizes e permette di definire dei preset per l’Editor del sito:

"settings": {
  "typography": {
    "fontSizes": [
      {
        "slug": "small",
        "size": "12px",
        "name": "Small"
      },
      {
        "slug": "x-large",
        "size": "32px",
        "name": "Extra Large"
      }
    ]
  }
}

Come per le altre impostazioni tipografiche, WordPress genererà una proprietà CSS personalizzata per ogni preset utilizzando lo slug che avete fornito:

body {
--wp--preset--font-size--small: 12px;
--wp--preset--font-size--x-large: 32px;
}

WordPress disattiva la tipografia fluida per impostazione predefinita, ma è possibile attivarla utilizzando dei valori booleani. È un’opzione che è possibile impostare a livello globale.

{
  "version": 2,
    "settings": {
      "typography": {
        "fluid": true
      }
    }
}

… o per ogni preset e dimensione che definite:

{
  "name": "Medium",
  "size": "1.25rem",
  "slug": "md",
  "fluid": {
    "min": "1rem",
    "max": "1.5rem"
  }
},

I valori min e max permettono di determinare l’intervallo di scalabilità per ogni dimensione di carattere fluido che definite.

Implementare funzioni tipografiche avanzate

Il sito theme.json offre una serie completa di opzioni, al pari di quelle che è possibile trovare nell’Editor del sito. Questo permette di personalizzare la tipografia del vostro sito con una serie di valori predefiniti che hanno senso per il vostro tema:

"styles": {
  "typography": {
    "letterSpacing": "0.02em",
    "textTransform": "uppercase",
    "textDecoration": "underline",
    "lineHeight": "1.55rem",
    "fontStyle": "normal"
  }
}

È possibile scegliere di attivare o disattivare queste opzioni. Ogni opzione ha un valore booleano, il che significa che avete a disposizione alcune opzioni di personalizzazione anche per l’Editor del sito. Ci sono alcune personalizzazioni che è possibile fare che vanno oltre le offerte dell’Editor del sito:

  • customFontSize è attivo per impostazione predefinita e consente agli utenti di inserire dimensioni personalizzate dei caratteri, ma è possibile disabilitarlo se volete controllare in modo più stretto le opzioni disponibili.
  • dropCap è attivo per impostazione predefinita, ma se lo attivate, l’utente ha la possibilità di abilitare il maiuscolo per la lettera iniziale di qualsiasi blocco di paragrafi.
  • textColumns abilita l’opzione “colonne” per qualsiasi testo all’interno di un blocco, opzione che è disattivata per impostazione predefinita.
  • writingMode abilita le opzioni per cambiare l’orientamento del testo nell’Editor del sito. è possibile dare agli utenti la possibilità di scegliere tra testo orizzontale e verticale.

L’ambito di applicazione di theme.json significa che dovreste lavorarci prima, soprattutto quando costruite un tema. Le opzioni dell’Editor del sito permetteranno a voi o ai vostri utenti di perfezionare la tipografia di WordPress.

Come implementare la tipografia utilizzando theme.json: un esempio pratico

Il FSE rende la progettazione e lo sviluppo con WordPress più facile che mai. Inoltre, alcuni dei processi generali di selezione e implementazione dei caratteri tipografici sono più semplici. In parte ciò è dovuto alle tendenze del design, ma gli strumenti esistono per colmare le lacune in cui non avete a disposizione un grafico.

Possiamo iniziare con la selezione dei caratteri principali.

1. Abbinare caratteri tipografici complementari

C’è un motivo per cui si scrive tanto su come scegliere i font e i caratteri tipografici. Perché può essere un compito difficile. Ad esempio, dovete considerare il branding del sito, il suo scopo e ciò che volete trasmettere.

Tuttavia, grazie alle attuali tendenze del design, il lavoro da fare è molto meno. Infatti il testo del corpo può utilizzare i font di sistema, in particolare il carattere principale del sistema operativo (OS). L’unico compito che dovrete svolgere è quello di scegliere un carattere che funzioni al suo fianco.

Questo non è un tutorial sull’abbinamento dei caratteri tipografici, ma abbiamo alcuni consigli da darvi:

  • I caratteri OS per la body copy sono in genere sans-serif. Questo significa che dovete cercare un carattere serif o un altro sans-serif che sia diverso, unico e che si faccia notare.
  • Mantenete le cose semplici e prendete in considerazione l’idea di utilizzare il font OS solo se funziona con il design.
  • Provate diverse combinazioni per capire quali caratteri funzionano insieme (e quali no).

Un buon abbinamento per uno stack di font di sistema è Playfair Display, un font serif di Google:

Il sito web di Google Fonts mostra il campione del font Playfair Display. Il testo del campione recita:
La pagina di esempio di Google Fonts per Playfair Display.

Con una coppia di font, dovete considerare le loro dimensioni, non solo sulla pagina ma anche in relazione l’una all’altra.

2. Trovare la giusta dimensione assoluta e relativa

Anche la scelta della dimensione dei font è fondamentale, perché le dimensioni assolute sbagliate possono rovinare la tua UX/UI. È anche un’area in cui potreste volervi attenere ai valori predefiniti. Tuttavia, vi invitiamo a sperimentare, perché ogni abbinamento avrà il suo “spazio” per i caratteri.

Typescale è uno strumento eccellente che può aiutarvi a creare la giusta tipografia per WordPress, qualunque sia la vostra esigenza:

L'interfaccia della web app Typescale per la personalizzazione della tipografia. Il pannello di sinistra mostra le impostazioni dei caratteri, mentre il lato destro mostra un'anteprima di diverse dimensioni di intestazioni e un esempio di design di pagina di destinazione.
Il sito web di Typescale.

Uno degli aspetti migliori di questo strumento è la scelta della scala. In pratica fa un sacco di lavoro per voi nella scelta delle dimensioni dei caratteri. In questo caso abbiamo scelto la scala Major Third, con un fattore di 1,2 e una dimensione di base di 16px:

Le opzioni di scala dei font all’interno di Typeface.

Nel pannello centrale vedrete le dimensioni risultanti per ogni titolo e paragrafo e potrete scegliere tra diverse unità di misura. Typescale permette anche di modificare l’interlinea, l’altezza della linea, il peso del carattere e altro ancora: tutto personalizzabile all’interno di theme.json.

3. Applicare i valori predefiniti nel file theme.json

Una volta scelti i caratteri e le dimensioni giuste, è possibile implementarli all’interno del vostro file theme.json. Ecco un esempio di come si presenta un tipico file theme.json:

{
  "version": 3,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif",
          "slug": "ubuntu-sans",
          "name": "Ubuntu Sans"
        },
        {
          "fontFamily": ""Playfair Display", serif",
          "slug": "playfair",
          "name": "Playfair Display"
        }
      ],
      "fontSizes": [
        {
          "slug": "small",
          "size": "13px",
          "name": "Small"
        },
        {
          "slug": "medium",
          "size": "16px",
          "name": "Medium"
        },
        {
          "slug": "large",
          "size": "20px",
          "name": "Large"
        },
        {
          "slug": "x-large",
          "size": "25px",
          "name": "Extra Large"
        },
        {
          "slug": "huge",
          "size": "31px",
          "name": "Huge"
        }
      ]
    }
  },
  "styles": {
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--system)",
      "fontSize": "var(--wp--preset--font-size--medium)",
      "lineHeight": "1.8"
    },
    "blocks": {
      "core/paragraph": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--medium)"
        }
      },
      "core/heading": {
        "typography": {
          "fontFamily": "var(--wp--preset--font-family--playfair)",
          "fontWeight": "700"
        }
      },
      "core/post-title": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--huge)"
        }
      }
    }
  }
}

È possibile applicare questi caratteri anche a qualsiasi blocco e pensare di stilizzare ogni titolo in modo unico. Cercate di creare un sistema tipografico WordPress coerente e gerarchico che costituisca la base del design del vostro tema. Questo garantirà un aspetto coeso in tutto il vostro sito, mentre l’Editor del sito offrirà una maggiore flessibilità e personalizzazione.

Il ruolo di Kinsta nel flusso di lavoro per lo sviluppo di un tema WordPress

L’hosting ad alte prestazioni di Kinsta aiuta a gestire un sito web efficiente e veloce. Tuttavia, offre anche solidi strumenti di sviluppo, tra cui DevKinsta, un ambiente di sviluppo locale che funziona su container Docker.

Illustrazione artistica del logo DevKinsta. Raffigura una persona che lavora al computer in un ambiente buio. L'immagine utilizza i toni del blu e del viola, mostrando mani che digitano su una tastiera e regolano apparecchiature. Sul monitor compare il logo K stilizzato.
Il logo DevKinsta.

È importante assicurarsi che la tipografia del vostro WordPress funzioni prima di iniziare a lavorare. In questo caso gli ambienti di staging di Kinsta saranno essenziali. In particolare, il Push selettivo sarà una funzione che utilizzerete spesso. Questo permette di inviare file e cartelle specifiche, qualsiasi risorsa vogliate, anziché che tutto in una volta.

L'interfaccia di MyKinsta mostra una finestra di dialogo Push to Live. Vengono presentate le opzioni per spingere i file e i database dall'ambiente di staging a quello live, con caselle di controllo per file, cartelle e tabelle di database specifici.
Lo strumento di push selettivo di Kinsta.

In questo modo, è possibile apportare modifiche discrete al progetto eseguendo il push di singoli file (come ad esempio theme.json). Inoltre, è possibile ridurre al minimo il rischio di danneggiare parti del design del vostro sito di cui siete soddisfatti ed è possibile effettuare aggiornamenti incrementali e più frequenti della tipografia del vostro sito.

Riepilogo

Il FSE sta maturando e theme.json è al centro dell’intero approccio alla modifica di WordPress. La tipografia è un fattore critico e WordPress offre strumenti di livello per gli sviluppatori e l’accesso a elementi che prima richiedevano una conoscenza approfondita di CSS e PHP.

Grazie all’interfaccia intuitiva dell’Editor del sito e all’adattabilità di theme.json, è possibile creare una tipografia che migliora l’estetica del vostro sito, che risuona con il vostro branding e che migliora l’esperienza complessiva dell’utente.

Ci piacerebbe conoscere le vostre esperienze con la tipografia di WordPress e sapere se il FSE è la chiave del successo per voi. Condividete con noi i vostri pensieri nei commenti qui sotto.

Jeremy Holcombe Kinsta

Content & Marketing Editor presso Kinsta, web developer di WordPress e content writer. Al di fuori di tutto ciò che riguarda WordPress, mi piacciono la spiaggia, il golf e il cinema. Ho anche i problemi di tutte le persone più alte della media ;).