Impostazioni dei font

Link in evidenza

1. Documentazione di Company XYZ sulle impostazioni dei font
2. Documentazione di Company XYZ sulle impostazioni dei font
3. Documentazione Shopify sull’editor del tema

Video utili

Video di Shopify Academy: personalizzare il tuo negozio

Video di Shopify Academy: personalizzare il tuo negozio

Queste impostazioni controllano la tipografia usata in tutto il tema, dal testo del corpo e dai pulsanti alle didascalie, ai titoli delle schede e ai livelli delle intestazioni. Poiché si applicano in molti punti contemporaneamente, anche una piccola modifica del font può influire in modo evidente su leggibilità, gerarchia e percezione del brand.

Puoi usare i font integrati per una configurazione rapida oppure aggiungere font personalizzati quando ti serve un’identità visiva più specifica. Per i dettagli di configurazione, consulta la riferimento delle impostazioni dei font e la documentazione Shopify sull’editor del tema

Controlli font principali

I controlli principali coprono gli stili di testo che la maggior parte dei clienti vede ripetutamente in tutto il tema.

1. Body font imposta il font di lettura principale usato in tutto il sito, incluso il testo di supporto, le sottovoci e i badge delle schede. Inizia da qui, perché è quello che ha il maggiore impatto su comfort e chiarezza.
2. Button font si applica al testo delle azioni in tutto il tema. Una tipografia più marcata può rendere i pulsanti più evidenti, ma i font decorativi possono rendere più difficile la lettura delle etichette brevi.
3. Caption font viene usato per il testo più piccolo in stile etichetta, come il testo sopra le intestazioni di sezione. È un buon punto per introdurre un accento tipografico secondario senza interrompere la lettura di testi più lunghi.
4. Text transforms per ogni ruolo ti consentono di controllare globalmente lo stile delle maiuscole e minuscole. Queste impostazioni sono utili per definire il tono, ma possono anche rendere il testo più incisivo o più denso.

Le trasformazioni in maiuscolo e a larghezza intera funzionano meglio su etichette e intestazioni brevi. Nel testo del corpo o nelle didascalie piccole, possono ridurre rapidamente la leggibilità.

Font delle intestazioni

Questo sottoinsieme ti consente di controllare separatamente i titoli delle schede dai livelli di intestazione da H1 a H6. Usalo per creare una gerarchia visiva più chiara tra pagine, schede e contenuti strutturati.

1. Card heading font influisce sui titoli nei contenuti ripetuti, come schede e anteprime. Scegli un font che resti leggibile a dimensioni più piccole e in layout più stretti.
2. H1 font è in genere lo stile di intestazione più evidente, spesso usato per i titoli di pagina e le aree dei titoli principali. Dovrebbe essere distintivo senza entrare in conflitto con il resto della tipografia.
3. H2 to H6 fonts aiutano a definire sottotitoli e struttura dei contenuti. Nella maggior parte dei casi, mantenere questi livelli visivamente correlati crea un risultato più pulito rispetto al rendere ogni livello unico.
4. Heading text transforms possono aggiungere enfasi, soprattutto per i titoli brevi delle schede o le intestazioni in stile display. Se troppi livelli di intestazione usano trasformazioni aggressive, le pagine possono iniziare a sembrare visivamente rumorose.

Consiglio

Spesso funziona meglio una combinazione semplice: un font del corpo leggibile, un font delle intestazioni contrastante e un uso minimo delle trasformazioni del testo.

Font personalizzati

Se le opzioni integrate non corrispondono al tuo brand, puoi aggiungere font da un provider oppure usare file font ospitati da te. Questo ti offre più flessibilità, ma rende anche più importante la precisione.

1. Provider-based fonts ti consentono di caricare un carattere tipografico da un servizio font usando il codice fornito.
2. Hosted fonts ti consentono di usare i tuoi file .woff o .woff2. Fornire entrambi i formati può migliorare la compatibilità.
3. Hosted font naming è importante perché le assegnazioni dei font personalizzati in seguito in questo gruppo dipendono dal nome esatto della famiglia che definisci.

Per i metodi di font personalizzati supportati e i dettagli di configurazione, consulta custom fonts.

Usa solo font correttamente concessi in licenza e verifica con attenzione eventuali codici provider o URL dei file ospitati. Se un font personalizzato non viene caricato correttamente, il tema potrebbe passare a un altro font e creare una tipografia incoerente.

Assegnazioni dei font personalizzati

Dopo aver aggiunto una sorgente di font personalizzati, puoi assegnarla a specifici ruoli tipografici in tutto il tema. Sono disponibili controlli personalizzati separati per il testo del corpo, i pulsanti, le didascalie, le intestazioni delle schede e ciascun livello di intestazione.

1. Font family deve corrispondere al valore esatto fornito dalla tua sorgente di font. È ciò che collega il font caricato al ruolo che vuoi stilizzare.
2. Font weight deve corrispondere alla versione prevista del carattere tipografico. Se il peso non è corretto, il font può apparire più sottile, più pesante o meno rifinito del previsto.
3. Font style ti consente di usare lo stile normale o corsivo dove appropriato. I corsivi possono aggiungere carattere, ma in genere sono meglio riservati a usi più ampi o più intenzionali.
4. Per-role custom settings rendono facile usare in modo selettivo un singolo carattere tipografico personalizzato, ad esempio solo per le intestazioni H1 o per i pulsanti, invece di sostituire ogni font nel tema.

Un approccio pratico consiste nell’aggiungere prima un solo font personalizzato, testarlo nel ruolo più importante e poi estenderne l’uso solo se resta equilibrato tra template e dimensioni del testo diverse.

Note sull’uso

1. Inizia dal testo di lettura. Imposta prima il font del corpo, perché influisce sulla maggior parte dei contenuti e definisce il tono generale del tema.
2. Costruisci la gerarchia con attenzione. Usa i font delle intestazioni e lo stile dei titoli delle schede per separare chiaramente i livelli di contenuto senza far competere ogni ruolo testuale per l’attenzione.
3. Limita le trasformazioni del maiuscolo/minuscolo. Applica sovrascritture in maiuscolo, minuscolo o lo stile a larghezza intera soprattutto al testo breve, dove il trattamento visivo resta leggibile con chiarezza.
4. Testa i contenuti ripetuti. Controlla i font su schede, pulsanti, didascalie e titoli di pagina per individuare problemi di spaziatura o leggibilità nei punti che i clienti vedono più spesso.
5. Verifica la configurazione dei font personalizzati. Conferma con attenzione i valori font-family, il codice sorgente e gli URL dei file ospitati per mantenere coerente la tipografia in tutto il tema.
6. Controlla il testo dei moduli e delle azioni nel contesto. Assicurati che pulsanti, etichette e messaggi di convalida restino leggibili negli stati vuoto, inviato ed errore.
7. Rivedi i template ricchi di contenuti. Confronta la tipografia nei layout di prodotto, carrello, ricerca, blog e articolo per verificare che intestazioni e testo del corpo restino equilibrati quando i contenuti cambiano o i risultati sono limitati.