Rivoluzionare la tipografia di WordPress con il Full Site Editing e il theme.json

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.

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.

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:

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.

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.

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 Stili nella navigazione a sinistra offre alcune opzioni di design globale che includono modifiche alla tipografia:

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.

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:

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

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

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:

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:

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.

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:

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:

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

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:

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.

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:

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:

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

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:

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:

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:

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:

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.

È 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.

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.