theme.json<\/code> aiuta gli sviluppatori a creare temi WordPress che sfruttano questo aspetto.<\/p>\nQuesto articolo analizza la tipografia di WordPress sia per FSE che per theme.json<\/code>. 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.<\/p>\n<\/div><\/kinsta-auto-toc>\nLa tipografia sul web: una breve storia<\/h2>\n
Se guardate ai primi progetti web<\/a>, noterete che, nonostante la variet\u00e0 dei layout, i caratteri tipografici hanno avuto una presentazione coerente. Questo \u00e8 dovuto in parte alla disponibilit\u00e0 e in parte alla necessit\u00e0. In poche parole, senza la tecnologia di cui disponiamo oggi, le parole sul web possono utilizzare solo i caratteri disponibili sul vostro computer.<\/p>\nUn “navigatore del web” della met\u00e0 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.<\/p>\n![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/verdana-georgia.png\")
Esempi di font Verdana e Georgia.<\/figcaption><\/figure>\nQuesta selezione primitiva \u00e8 coerente e affidabile ma manca di flessibilit\u00e0. Servizi come Google Fonts e Adobe Fonts<\/a> utilizzano il formato WOFF per dare accesso a una libreria di migliaia di font, con un processo di incorporazione semplice.<\/p>\n![\"Il](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/google-fonts.png\")
L’interfaccia principale di Google Fonts.<\/figcaption><\/figure>\nIn questo modo \u00e8 possibile migliorare la leggibilit\u00e0, 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<\/a>), la dipendenza da servizi di terze parti per la visualizzazione dell’elemento pi\u00f9 importante del vostro sito e i problemi di privacy.<\/p>\nQuesto porta molti web designer a rinunciare alle librerie di font e a riconsiderare l’uso dei font di sistema<\/a>. L’elaborazione pi\u00f9 veloce e il controllo che avete sull’applicazione di uno “stack di font di sistema” che d\u00e0 priorit\u00e0 ai caratteri nativi e utilizza anche opzioni di fallback \u00e8 un approccio solido.<\/p>\nWordPress e la tipografia<\/h3>\n
WordPress pone una forte enfasi sulla tipografia per aiutarvi a creare contenuti coinvolgenti e leggibili. Nel corso della sua storia, i temi predefiniti<\/a> di WordPress utilizzano tutti abbinamenti di caratteri che raggiungono un equilibrio tra estetica e funzionalit\u00e0.<\/p>\nI temi predefiniti attuali utilizzano stack di font di sistema per una presentazione pulita, moderna e performante. I temi predefiniti pi\u00f9 vecchi utilizzano abbinamenti come Noto Sans e Noto Serif (per Twenty Fifteen<\/a>) e Montserrat e Merriweather (per Twenty Sixteen<\/a>).<\/p>\nPer mostrare questo “cerchio della vita” tipografico, Twenty Sixteen utilizza Helvetica e Georgia come opzioni di riserva. Il tema predefinito di Twenty Ten<\/a> utilizza solo Helvetica, Arial e Georgia:<\/p>\n![\"L'anteprima](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/twenty-ten.png\")
La pagina demo di Twenty Ten da WordPress.org.<\/figcaption><\/figure>\nSe 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.<\/p>\n
Un breve riassunto sul Full Site Editing e sul file theme.json<\/h2>\n
FSE<\/a> e theme.json<\/code> sono fondamentali per la gestione della tipografia in WordPress, quindi la loro comprensione \u00e8 essenziale. Il FSE sfrutta l’Editor a blocchi e aggiunge ulteriori funzionalit\u00e0 per diventare il Site Editor.<\/p>\n![\"L'interfaccia](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/site-editor.png\")
L’interfaccia dell’editor del sito di WordPress assomiglia molto all’editor a blocchi, ma con maggiori possibilit\u00e0 di personalizzazione.<\/figcaption><\/figure>\nQuesto uniforma le opzioni di progettazione del sito in diversi modi:<\/p>\n
\n- Si utilizza l’approccio di modifica dei blocchi per l’intero sito, non solo per i contenuti.<\/li>\n
- Una libreria di modelli fa parte della configurazione, quindi \u00e8 possibile modificarli usando gli stessi strumenti dei contenuti.<\/li>\n
- Anche lo styling avviene all’interno dell’Editor del sito e offre uno schema di impostazioni globali.<\/li>\n
- 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.<\/li>\n<\/ul>\n
Possiamo considerare il file theme.json<\/code> come una versione di sviluppo del FSE. \u00c8 necessario conoscere la JavaScript Object Notation (JSON) per lavorare con il file, ma questo \u00e8 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.<\/p>\n![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/theme-json.png\")
Un file theme.json visualizzato in un editor di codice.<\/figcaption><\/figure>\nOgni impostazione utilizza una coppia chiave\/valore di option:value<\/code> e si pu\u00f2 implementare in diversi modi:<\/p>\n\n- Definire palette di colori globali.<\/li>\n
- Impostazione di famiglie di caratteri e dimensioni.<\/li>\n
- Configurando stili specifici del blocco.<\/li>\n
- Gestendo le preferenze di spaziatura e layout.<\/li>\n<\/ul>\n
Sfruttare theme.json<\/code> permette di creare temi pi\u00f9 coerenti e personalizzabili senza dover ricorrere a CSS personalizzati<\/a> (anche se \u00e8 possibile farlo). L’adattabilit\u00e0 e la flessibilit\u00e0 di theme.json<\/code> 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.<\/p>\nImpostare la tipografia nell’editor del sito WordPress<\/h2>\n
Se sapete come usare l’Editor dei blocchi, \u00e8 possibile anche usare l’Editor del sito. All’interno di WordPress, vai alla schermata Aspetto <\/strong>> Editor<\/strong>. In questo modo viene visualizzata la schermata iniziale dell’Editor del sito:<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/site-editor-home.png\")
La schermata iniziale dell’Editor del sito.<\/figcaption><\/figure>\nLa schermata Stili<\/strong> nella navigazione a sinistra offre alcune opzioni di design globale che includono modifiche alla tipografia:<\/p>\n![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/styles-options.gif\")
Diverse opzioni di stili preimpostati nell’Editor del sito WordPress.<\/figcaption><\/figure>\nPer 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<\/strong> ci sono due piccole icone che aprono altre opzioni: il Libro degli stili e l’icona della matita Modifica stili<\/strong>.<\/p>\n![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/styles-sidebar-icons.png\")
Le icone di modifica degli stili nell’Editor del sito.<\/figcaption><\/figure>\nInoltre, \u00e8 possibile impostare le opzioni tipografiche a livello di elemento e per ogni blocco.<\/p>\n
La libreria dei font<\/h3>\n
La schermata Modifica stili<\/strong> > Tipografia<\/strong> 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:<\/p>\n\n- \u00c8 possibile caricare e gestire caratteri tipografici personalizzati.<\/li>\n
- C’\u00e8 un’opzione per utilizzare Google Fonts direttamente all’interno di WordPress.<\/li>\n
- Si possono creare collezioni di font<\/a> utilizzando PHP.<\/li>\n<\/ul>\n
Per accedere alla libreria di font dalla sezione Tipografia nella barra laterale dell’Editor del sito, cliccate sull’icona Gestisci font<\/strong>:<\/p>\n![\"Il](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/manage-fonts-icon.png\")
L’icona Gestisci font<\/strong> nell’Editor del sito WordPress.<\/figcaption><\/figure>\nQui, la scheda Libreria<\/strong> mostra gli attuali caratteri tipografici registrati per il vostro tema e indica quali sono quelli attivi:<\/p>\n![\"L'interfaccia](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/font-library-dialog.png\")
L’interfaccia della libreria di font di WordPress.<\/figcaption><\/figure>\nCliccando su uno di questi font \u00e8 possibile attivare o disattivare i singoli caratteri:<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/active-fonts.png\")
I font attivi all’interno della libreria di font dell’editor del sito.<\/figcaption><\/figure>\nNella scheda Carica<\/strong>, si pu\u00f2 utilizzare una finestra di dialogo di caricamento drag-and-drop per installare i propri font nei formati TTF, WOFF, WOFF2 e OTF.<\/p>\nLa scheda Installa font<\/strong> 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<\/a>:<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/google-fonts-library.png\")
La libreria di Google Fonts nell’editor del sito WordPress.<\/figcaption><\/figure>\nSelezionate i font che volete installare dall’elenco completo, quindi cliccate sul pulsante Installa<\/strong>. Una volta visualizzata la notifica di successo, i font verranno visualizzati nella scheda Libreria<\/strong>:<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/installed-fonts.png\")
I font installati per un’istanza di WordPress.<\/figcaption><\/figure>\nCi\u00f2 permette di utilizzare questi font come qualsiasi altro font sul vostro sito. Ora basta solo personalizzarli per adattarli alle vostre esigenze.<\/p>\n
Il Libro degli stili<\/h3>\n
Uno dei pericoli della scelta e dell’impostazione dei caratteri tipografici \u00e8 che non si sa come verranno abbinati a schemi di colori, layout e formattazioni. Il Libro degli stili \u00e8 prezioso perch\u00e9 permette di vedere in anteprima le impostazioni tipografiche su diversi elementi.<\/p>\n![\"L'interfaccia](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/style-book.png\")
Il Libro degli stili dell’editor del sito.<\/figcaption><\/figure>\nScegliendo l’icona dell’occhio si aprir\u00e0 il Libro degli stili, dove sono presenti cinque schede:<\/p>\n
\n- Testo<\/strong>. Qui \u00e8 possibile lavorare con paragrafi, intestazioni, elenchi e altri elementi che si concentrano sul testo.<\/li>\n
- Media<\/strong>. Qui \u00e8 possibile regolare le immagini, i video e le presentazioni audio.<\/li>\n
- Design<\/strong>. Questa sezione raccoglie gli aspetti strutturali del design, come colonne, separatori e pulsanti.<\/li>\n
- Widget<\/strong>. Ci sono due elementi in questa schermata: le generazioni dinamiche, come gli elenchi di archivi, e i commenti. Qui \u00e8 possibile anche lavorare con la barra di ricerca, le icone dei social media e le tag cloud.<\/li>\n
- Tema<\/strong>. Si concentra sugli elementi dell’header del sito, come il titolo, la tagline, la navigazione e il logo.<\/li>\n<\/ul>\n
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:<\/p>\n![\"Il](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/style-book-editing.png\")
\u00c8 possibile modificare la tipografia direttamente dal Libro degli stili.<\/figcaption><\/figure>\nPossiamo arrivare alle stesse schermate attraverso la sezione Stili<\/strong> > Blocchi<\/strong> 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.<\/p>\nOttimizzare le opzioni tipografiche nell’Editor del sito<\/h3>\n
Per tutti i blocchi e gli elementi sono disponibili le stesse opzioni principali. Ecco una panoramica di ogni opzione all’interno del pannello.<\/p>\n
Tipo e dimensione del carattere<\/h4>\n
Il menu a tendina Font<\/strong> \u00e8 semplice: scegliete il font che volete applicare all’elemento o al blocco specifico:<\/p>\n![\"L'interfaccia](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/font-drop-down.png\")
Scegliere un font dalla selezione disponibile nella scheda Tipografia.<\/figcaption><\/figure>\nLe preimpostazioni delle dimensioni<\/strong> sono le meno personalizzabili all’interno dell’Editor del sito. \u00c8 possibile scegliere una dimensione tra Small e Extra Extra Large:<\/p>\n![\"The](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/size-presets.png\")
WordPress offre delle preimpostazioni per le dimensioni dei caratteri all’interno dell’Editor del sito.<\/figcaption><\/figure>\nModificando il file theme.json<\/code>, \u00e8 possibile cambiare questi valori predefiniti, ma non \u00e8 possibile farlo dall’Editor del sito. Il pulsante Imposta dimensione personalizzata<\/strong> permette di impostare una dimensione personalizzata utilizzando una serie di unit\u00e0 di misura:<\/p>\n![\"L'interfaccia](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/font-size-custom.png\")
Scegliere una dimensione e un’unit\u00e0 di misura del carattere personalizzata.<\/figcaption><\/figure>\nCi sono altri modi per regolare la tipografia all’interno dell’Editor del sito, compresi i metodi per i quali solitamente si utilizzano i CSS.<\/p>\n
Aspetto, altezza delle linee e spaziatura delle lettere<\/h4>\n
Il menu a tendina Aspetto<\/strong> sembra semplice: scegliete il peso di un font da un ampio elenco e sar\u00e0 applicato al vostro testo. Tuttavia, spesso non avrete a disposizione tutti i font disponibili per ogni peso.<\/p>\n![\"Il](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/appearance-drop-down.png\")
Il menu a tendina Aspetto nell’Editor del sito WordPress.<\/figcaption><\/figure>\nI nostri test dimostrano che WordPress non filtra questo elenco per mostrare solo i pesi dei font disponibili. Inoltre, applica una “corrispondenza pi\u00f9 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:<\/p>\n![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/bold-appearance.gif\")
Modificare l’aspetto del testo nell’Editor del sito WordPress.<\/figcaption><\/figure>\nL’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 \u00e8 spesso un’implementazione pratica quando il testo sembra troppo ravvicinato:<\/p>\n![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/line-height.gif\")
Cambiare l’altezza delle righe nell’Editor del sito WordPress.<\/figcaption><\/figure>\nLa spaziatura delle lettere \u00e8 simile e segue l’abitudine dei CSS di aggiungersi alla spaziatura naturale presente:<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/letter-spacing.png\")
\u00c8 possibile spingere la spaziatura delle lettere troppo in l\u00e0 per renderla utilizzabile.<\/figcaption><\/figure>\nCome per il ridimensionamento personalizzato dei caratteri, \u00e8 possibile selezionare diverse unit\u00e0 di misura. La scelta di un valore relativo \u00e8 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, \u00e8 l’ideale.<\/p>\n
\u00c8 una pratica tipica quella di utilizzare piccoli valori positivi di spaziatura delle lettere – spesso non pi\u00f9 di 0,12rem\/em – e quasi nessuna spaziatura negativa.<\/p>\n
L’ultimo gruppo di scelte, le maiuscole, permette di scegliere se rendere il testo maiuscolo, minuscolo o a frase. \u00e8 possibile anche eliminare le maiuscole. Questo \u00e8 ottimo per garantire la coerenza quando si tratta di caratteri, in quanto non \u00e8 necessario utilizzare un caso specifico quando si crea un contenuto.<\/p>\n
Come utilizzare theme.json per definire la tipografia del tema WordPress<\/h2>\n
L’Editor del sito \u00e8 ottimo per gli utenti che non hanno conoscenze tecniche. Il file theme.json<\/code> \u00e8 il modo per garantire che l’Editor del sito offra agli utenti ci\u00f2 di cui hanno bisogno per personalizzare i loro siti. \u00c8 il file di configurazione che costituisce la base di sviluppo del vostro tema.<\/p>\nNon ci occuperemo della struttura e della formattazione dell’intero file theme.json <\/code>, ma vedremo come definire, impostare e applicare la tipografia al suo interno.<\/p>\nLa struttura del file theme.json e definire le impostazioni globali<\/h3>\n
Si utilizza JSON per definire tutti gli elementi di theme.json<\/code>, compresa la tipografia. L’elemento typography<\/code> si annida sotto l’oggetto settings<\/code> all’interno del file. Da l\u00ec, \u00e8 possibile annidare altri elementi, propriet\u00e0 e oggetti per costruire la tipografia del vostro sito:<\/p>\n{\n \"version\": 3,\n \"settings\": {\n \"typography\": {\n \"fontFamilies\": [\n {\n \"fontFamily\": \"-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif\",\n \"slug\": \"system-font\",\n \"name\": \"System Font\"\n }\n ],\n \"fontSizes\": [\n {\n \"slug\": \"small\",\n \"size\": \"13px\",\n \"name\": \"Small\"\n },\n {\n \"slug\": \"medium\",\n \"size\": \"20px\",\n \"name\": \"Medium\"\n }\n ]\n }\n }\n}<\/code><\/pre>\nTutti questi elementi seguono uno schema simile. Le impostazioni predefinite e pi\u00f9 facili da capire sono quelle globali. Queste si annidano in modo semplice, ma \u00e8 possibile anche definire le impostazioni tipografiche per i singoli blocchi:<\/p>\n
\"styles\": {\n \"blocks\": {\n \"core\/paragraph\": {\n \"typography\": {\n \"fontFamily\": \"var(--wp--preset--font-family--primary)\",\n \"fontSize\": \"var(--wp--preset--font-size--medium)\",\n \"lineHeight\": \"1.5\"\n }\n },\n \"core\/heading\": {\n \"typography\": {\n \"fontFamily\": \"var(--wp--preset--font-family--secondary)\",\n \"fontWeight\": \"700\"\n }\n }\n }\n}<\/code><\/pre>\nIn questo caso si utilizza la propriet\u00e0 blocks<\/code> e uno spazio dei nomi specifico per ogni blocco che si desidera utilizzare. Sebbene aggiunga altri due livelli di annidamento, non c’\u00e8 alternativa a questo approccio. In ogni caso, avete a disposizione molte propriet\u00e0 con cui giocare.<\/p>\nRegistrare i font<\/h3>\n
Per la tipografia avete lo stesso livello di personalizzazione<\/a> dell’interfaccia dell’Editor del sito, e in alcuni casi anche di pi\u00f9. A livello di base, annidate il vostro stack di font nella propriet\u00e0 fontFamilies<\/code>, per poi dargli uno slug e un nome:<\/p>\n\nfontFamily<\/code> corrisponde al valore CSS font-family<\/code> e sar\u00e0 la pila di caratteri che desiderate utilizzare nel vostro tema.<\/li>\nname<\/code> \u00e8 ci\u00f2 che si vede nell’Editor del sito quando si seleziona un font, quindi sar\u00e0 leggibile.<\/li>\nslug<\/code> si aggiunge a una propriet\u00e0 CSS personalizzata per un ulteriore utilizzo.<\/li>\n<\/ul>\nPer i font di sistema, questo \u00e8 semplice:<\/p>\n
\u2026\n \"typography\": {\n \"fontFamilies\": [\n {\n \"name\": \"Primary\",\n \"slug\": \"primary\",\n \"fontFamily\": \"Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif\"\n },\n {\n \"name\": \"Secondary\",\n \"slug\": \"secondary\",\n \"fontFamily\": \"system-ui, sans-serif\"\n }<\/code><\/pre>\nLa registrazione di web font personalizzati richiede l’utilizzo della propriet\u00e0 fontFace<\/code> e la definizione di alcuni attributi:<\/p>\n\u2026\n\"name\": \"Secondary\",\n\"slug\": \"secondary\",\n\"fontFamily\": \"'Open Sans', sans-serif\",\n \"fontFace\": [\n {\n \"fontFamily\": \"Open Sans\",\n \"fontWeight\": \"300 800\", \/\/ This is a range of font weight values.\n \"fontStyle\": \"normal\", \/\/ This has to be a valid CSS font-style value.\n \"fontStretch\": \"normal\", \/\/ This also needs to be a valid CSS font-stretch value.\n \"src\": [ \"file:.\/assets\/fonts\/open-sans.woff2\" ] \/\/ This is an array of URLs for custom fonts, and can support multiple formats.\n },\n\u2026<\/code><\/pre>\nUna volta registrati i font, potrete selezionarli dai vari menu a tendina dell’Editor del sito.<\/p>\n
Ci sono diversi modi per registrare i caratteri per il vostro tema. C’\u00e8 la libreria di font all’interno dell’interfaccia dell’Editor del sito, la tipica richiesta PHP<\/a> e il plugin Create Block Theme<\/a>:<\/p>\n![\"Uno](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/create-block-theme.png\")
L’immagine dell’intestazione di Create Block Theme da WordPress.org.<\/figcaption><\/figure>\nSi 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\u00f9 comodo (noi consigliamo la Libreria di font), \u00e8 possibile iniziare a pensare al loro dimensionamento.<\/p>\n
Impostazione del dimensionamento e dei preset dei font nel file theme.json<\/h3>\n
Un’altra attivit\u00e0 fondamentale per la tipografia \u00e8 l’impostazione delle dimensioni dei caratteri. Questo utilizza la propriet\u00e0 fontSizes<\/code> e permette di definire dei preset per l’Editor del sito:<\/p>\n\"settings\": {\n \"typography\": {\n \"fontSizes\": [\n {\n \"slug\": \"small\",\n \"size\": \"12px\",\n \"name\": \"Small\"\n },\n {\n \"slug\": \"x-large\",\n \"size\": \"32px\",\n \"name\": \"Extra Large\"\n }\n ]\n }\n}<\/code><\/pre>\nCome per le altre impostazioni tipografiche, WordPress generer\u00e0 una propriet\u00e0 CSS personalizzata per ogni preset utilizzando lo slug che avete fornito:<\/p>\n
body {\n--wp--preset--font-size--small: 12px;\n--wp--preset--font-size--x-large: 32px;\n}<\/code><\/pre>\nWordPress disattiva la tipografia fluida per impostazione predefinita, ma \u00e8 possibile attivarla utilizzando dei valori booleani. \u00c8 un’opzione che \u00e8 possibile impostare a livello globale.<\/p>\n
{\n \"version\": 2,\n \"settings\": {\n \"typography\": {\n \"fluid\": true\n }\n }\n}<\/code><\/pre>\n… o per ogni preset e dimensione che definite:<\/p>\n
{\n \"name\": \"Medium\",\n \"size\": \"1.25rem\",\n \"slug\": \"md\",\n \"fluid\": {\n \"min\": \"1rem\",\n \"max\": \"1.5rem\"\n }\n},<\/code><\/pre>\nI valori min<\/code> e max<\/code> permettono di determinare l’intervallo di scalabilit\u00e0 per ogni dimensione di carattere fluido che definite.<\/p>\nImplementare funzioni tipografiche avanzate<\/h3>\n
Il sito theme.json<\/code> offre una serie completa di opzioni, al pari di quelle che \u00e8 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:<\/p>\n\"styles\": {\n \"typography\": {\n \"letterSpacing\": \"0.02em\",\n \"textTransform\": \"uppercase\",\n \"textDecoration\": \"underline\",\n \"lineHeight\": \"1.55rem\",\n \"fontStyle\": \"normal\"\n }\n}<\/code><\/pre>\n\u00c8 possibile scegliere di attivare o disattivare<\/a> 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 \u00e8 possibile fare che vanno oltre le offerte dell’Editor del sito:<\/p>\n\ncustomFontSize<\/code> \u00e8 attivo per impostazione predefinita e consente agli utenti di inserire dimensioni personalizzate dei caratteri, ma \u00e8 possibile disabilitarlo se volete controllare in modo pi\u00f9 stretto le opzioni disponibili.<\/li>\ndropCap<\/code> \u00e8 attivo per impostazione predefinita, ma se lo attivate, l’utente ha la possibilit\u00e0 di abilitare il maiuscolo per la lettera iniziale di qualsiasi blocco di paragrafi.<\/li>\ntextColumns<\/code> abilita l’opzione “colonne” per qualsiasi testo all’interno di un blocco, opzione che \u00e8 disattivata per impostazione predefinita.<\/li>\nwritingMode<\/code> abilita le opzioni per cambiare l’orientamento del testo nell’Editor del sito. \u00e8 possibile dare agli utenti la possibilit\u00e0 di scegliere tra testo orizzontale e verticale.<\/li>\n<\/ul>\nL’ambito di applicazione di theme.json<\/code> 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.<\/p>\nCome implementare la tipografia utilizzando theme.json: un esempio pratico<\/h2>\n
Il FSE rende la progettazione e lo sviluppo con WordPress pi\u00f9 facile che mai. Inoltre, alcuni dei processi generali di selezione e implementazione dei caratteri tipografici sono pi\u00f9 semplici. In parte ci\u00f2 \u00e8 dovuto alle tendenze del design, ma gli strumenti esistono per colmare le lacune in cui non avete a disposizione un grafico.<\/p>\n
Possiamo iniziare con la selezione dei caratteri principali.<\/p>\n
<\/div><\/kinsta-auto-toc>\n1. Abbinare caratteri tipografici complementari<\/h3>\n
C’\u00e8 un motivo per cui si scrive tanto su come scegliere i font<\/a> e i caratteri tipografici. Perch\u00e9 pu\u00f2 essere un compito difficile. Ad esempio, dovete considerare il branding del sito, il suo scopo e ci\u00f2 che volete trasmettere.<\/p>\nTuttavia, grazie alle attuali tendenze del design, il lavoro da fare \u00e8 molto meno. Infatti il testo del corpo pu\u00f2 utilizzare i font di sistema, in particolare il carattere principale del sistema operativo (OS). L’unico compito che dovrete svolgere \u00e8 quello di scegliere un carattere che funzioni al suo fianco.<\/p>\n
Questo non \u00e8 un tutorial sull’abbinamento dei caratteri tipografici, ma abbiamo alcuni consigli da darvi:<\/p>\n
\n- 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.<\/li>\n
- Mantenete le cose semplici e prendete in considerazione l’idea di utilizzare il font OS solo se funziona con il design.<\/li>\n
- Provate diverse combinazioni per capire quali caratteri funzionano insieme (e quali no).<\/li>\n<\/ul>\n
Un buon abbinamento per uno stack di font di sistema \u00e8 Playfair Display<\/a>, un font serif di Google<\/a>:<\/p>\n![\"Il](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/playfair-display.png\")
La pagina di esempio di Google Fonts per Playfair Display.<\/figcaption><\/figure>\nCon una coppia di font, dovete considerare le loro dimensioni, non solo sulla pagina ma anche in relazione l’una all’altra.<\/p>\n
2. Trovare la giusta dimensione assoluta e relativa<\/h3>\n
Anche la scelta della dimensione dei font \u00e8 fondamentale, perch\u00e9 le dimensioni assolute sbagliate possono rovinare la tua UX\/UI. \u00c8 anche un’area in cui potreste volervi attenere ai valori predefiniti. Tuttavia, vi invitiamo a sperimentare, perch\u00e9 ogni abbinamento avr\u00e0 il suo “spazio” per i caratteri.<\/p>\n
Typescale<\/a> \u00e8 uno strumento eccellente che pu\u00f2 aiutarvi a creare la giusta tipografia per WordPress, qualunque sia la vostra esigenza:<\/p>\n![\"L'interfaccia](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/typescale-site.png\")
Il sito web di Typescale.<\/figcaption><\/figure>\nUno degli aspetti migliori di questo strumento \u00e8 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:<\/p>\n![](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/font-sizing-scale.png\")
Le opzioni di scala dei font all’interno di Typeface.<\/figcaption><\/figure>\nNel pannello centrale vedrete le dimensioni risultanti per ogni titolo e paragrafo e potrete scegliere tra diverse unit\u00e0 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<\/code>.<\/p>\n3. Applicare i valori predefiniti nel file theme.json<\/h3>\n
Una volta scelti i caratteri e le dimensioni giuste, \u00e8 possibile implementarli all’interno del vostro file theme.json<\/code>. Ecco un esempio di come si presenta un tipico file theme.json<\/code>:<\/p>\n{\n \"version\": 3,\n \"settings\": {\n \"typography\": {\n \"fontFamilies\": [\n {\n \"fontFamily\": \"-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif\",\n \"slug\": \"ubuntu-sans\",\n \"name\": \"Ubuntu Sans\"\n },\n {\n \"fontFamily\": \"\"Playfair Display\", serif\",\n \"slug\": \"playfair\",\n \"name\": \"Playfair Display\"\n }\n ],\n \"fontSizes\": [\n {\n \"slug\": \"small\",\n \"size\": \"13px\",\n \"name\": \"Small\"\n },\n {\n \"slug\": \"medium\",\n \"size\": \"16px\",\n \"name\": \"Medium\"\n },\n {\n \"slug\": \"large\",\n \"size\": \"20px\",\n \"name\": \"Large\"\n },\n {\n \"slug\": \"x-large\",\n \"size\": \"25px\",\n \"name\": \"Extra Large\"\n },\n {\n \"slug\": \"huge\",\n \"size\": \"31px\",\n \"name\": \"Huge\"\n }\n ]\n }\n },\n \"styles\": {\n \"typography\": {\n \"fontFamily\": \"var(--wp--preset--font-family--system)\",\n \"fontSize\": \"var(--wp--preset--font-size--medium)\",\n \"lineHeight\": \"1.8\"\n },\n \"blocks\": {\n \"core\/paragraph\": {\n \"typography\": {\n \"fontSize\": \"var(--wp--preset--font-size--medium)\"\n }\n },\n \"core\/heading\": {\n \"typography\": {\n \"fontFamily\": \"var(--wp--preset--font-family--playfair)\",\n \"fontWeight\": \"700\"\n }\n },\n \"core\/post-title\": {\n \"typography\": {\n \"fontSize\": \"var(--wp--preset--font-size--huge)\"\n }\n }\n }\n }\n}<\/code><\/pre>\n\u00c8 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\u00e0 un aspetto coeso in tutto il vostro sito, mentre l’Editor del sito offrir\u00e0 una maggiore flessibilit\u00e0 e personalizzazione.<\/p>\n
Il ruolo di Kinsta nel flusso di lavoro per lo sviluppo di un tema WordPress<\/h2>\n
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<\/a>, un ambiente di sviluppo locale che funziona su container Docker<\/a>.<\/p>\n![\"Illustrazione](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/devkinsta-home.png\")
Il logo DevKinsta.<\/figcaption><\/figure>\n\u00c8 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<\/a> sar\u00e0 una funzione che utilizzerete spesso. Questo permette di inviare file e cartelle specifiche, qualsiasi risorsa vogliate, anzich\u00e9 che tutto in una volta.<\/p>\n![\"L'interfaccia](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/selective-push.png\")
Lo strumento di push selettivo di Kinsta.<\/figcaption><\/figure>\n