Impostazioni font

Famiglia di font

Punto chiave: Imposta il font da utilizzare. Influisce direttamente sull'impressione del pulsante e sulla coerenza del brand.

Cosa cambia con questa impostazione: Anche con lo stesso testo, il carattere tipografico cambia la percezione di affidabilità e familiarità.

Suggerimento per la regolazione: Se il font si discosta troppo da quello del corpo del testo, genera una sensazione di incoerenza. È più sicuro partire con un font della stessa famiglia utilizzata nel sito.

Voci di impostazione

• Elenco font (Predefinito / System / Font del tema): Seleziona il font da utilizzare, regolando il tono del brand e la leggibilità.
• Peso (100-900): Imposta lo spessore del font, regolando la priorità delle informazioni. Supporta la Responsivo, consentendo di specificare un peso diverso per ogni dispositivo.
• Modifica font: Apre la schermata delle impostazioni del font per regolazioni tipografiche dettagliate.

È possibile impostare individualmente anche Famiglia di font e Peso per lo stato hover. Se sono necessarie modifiche per dispositivo, attivate la Responsivo.

Limitazione del layout shift all'hover: Modificare il Font Peso all'hover può causare variazioni nella larghezza del testo, alterando le dimensioni del pulsante o il ritorno a capo del testo (layout shift). Per prevenirlo, fissate Larghezza / Altezza del pulsante oppure limitate la variazione del peso (es.: da 400 a 500).

Dimensione font

Punto chiave: Imposta la dimensione del testo. È un'impostazione fondamentale che influisce direttamente sulla leggibilità e sul tasso di clic.

Cosa cambia con questa impostazione: Soprattutto su mobile, se il testo è troppo piccolo, il messaggio desiderato non viene trasmesso.

Suggerimento per la regolazione: Dopo aver ottimizzato per desktop, aumentate di un livello su mobile oppure regolate il numero di righe insieme per evitare problemi di layout.

Voci di impostazione

• Selezione preset (Predefinito / Tema / Personalizzato): Seleziona un preset di dimensione per applicare rapidamente un valore iniziale.
• Dimensione personalizzata: Specifica direttamente la dimensione del testo tramite valore numerico per regolazioni precise.
• Unità (px / em / rem / vw): Seleziona l'unità di misura, determinando il comportamento fisso/variabile.
• Responsivo: Attiva le impostazioni individuali per dispositivo, prevenendo problemi di visualizzazione.
• Modifica dimensione font: Modifica le impostazioni della dimensione, ottimizzando l'aspetto per ciascun dispositivo.

Utilizzando em / rem, la dimensione è relativa alla dimensione base del testo del browser o del tema. Con vw la dimensione del testo varia in base alla larghezza del viewport, il che è utile per il design responsive, ma poiché può diventare estremamente grande o piccola, si consiglia di verificare i valori minimi e massimi. È possibile impostare individualmente anche la dimensione del font per lo stato hover.

Altezza riga

Punto chiave: Imposta l'interlinea per la visualizzazione su più righe. Regola l'equilibrio tra leggibilità e densità.

Cosa cambia con questa impostazione: Un'interlinea troppo stretta rallenta la velocità di lettura, mentre una troppo ampia indebolisce la coesione visiva.

Suggerimento per la regolazione: Partite da un valore base tra 1.2 e 1.6, aumentando leggermente l'interlinea al crescere del testo per un risultato stabile.

Voci di impostazione

• Selezione preset (Predefinito / Tight / Normal / Loose ecc.): Seleziona un preset di interlinea per regolare rapidamente la leggibilità.
• Altezza riga personalizzata: Specifica l'interlinea tramite valore numerico, ottimizzando la leggibilità per testi di due o più righe.
• Unità (nessuna / px / em / rem / %): Specifica l'unità dell'interlinea, scegliendo tra rapporto proporzionale o valore fisso.
• Responsivo: Attiva le impostazioni individuali per dispositivo, prevenendo problemi di visualizzazione.

Specificando un valore senza unità (es.: 1.5), il calcolo avviene come moltiplicatore rispetto alla dimensione del font. Poiché il rapporto si mantiene anche al variare della dimensione del font, nel design responsive è consigliato specificare un valore senza unità. Il valore predefinito è 1.2. È possibile impostare individualmente anche l'interlinea per lo stato hover.

Controllo tramite variabili CSS: Altezza riga e Spaziatura lettere sono internamente controllati esclusivamente tramite variabili CSS (–line-height-pc / –letter-spacing-pc ecc.). Essendo ereditati tramite variabili CSS anziché stili inline, non interferiscono con le impostazioni del font degli elementi interni come micro-testo e sotto-testo.

Spaziatura lettere

Punto chiave: Imposta la spaziatura tra i caratteri. Utilizzata per regolare sfumature di stile titolo, eleganza e leggibilità.

Cosa cambia con questa impostazione: L'impatto visivo è significativo, ma un'impostazione eccessiva può compromettere la leggibilità.

Suggerimento per la regolazione: Per il testo italiano, evitate spaziature eccessive e partite da piccole regolazioni tra 0 e 0.5px equivalenti.

Voci di impostazione

• Selezione preset (Tight / Normal / Wide ecc.): Seleziona un preset di spaziatura per regolare l'impressione della densità dei caratteri.
• Valore personalizzato: Specifica la spaziatura personalizzata, regolando finemente leggibilità e design.
• Unità (px / em / rem / %): Seleziona l'unità della spaziatura, determinando il metodo di regolazione fisso/relativo. L'unità predefinita è em.
• Responsivo: Attiva le impostazioni individuali per dispositivo, prevenendo problemi di visualizzazione.

Con l'unità em, la spaziatura è determinata come rapporto rispetto alla dimensione del font. Es.: 0.05em corrisponde al 5% della dimensione del font. È possibile specificare valori negativi per ridurre la spaziatura, ma fate attenzione al calo di leggibilità. È possibile impostare individualmente anche la spaziatura per lo stato hover.