Gestione dei caratteri e delle dimensioni dei caratteri con Divi 5

Fonts e tipografia danno il tono per il tuo sito. Ottenere bene può aiutare il tuo marchio e migliorare la leggibilità. Divi 5 rende il lavoro con i caratteri veloci e facili. Con le nuove funzionalità di Divi, come le variabili di design e i preset del gruppo di opzioni, la configurazione dei caratteri diventa facile.

Questo post ti insegna come gestire i caratteri e le dimensioni dei caratteri in Divi 5, creando una tipografia reattiva che si ridimensiona magnificamente sui dispositivi.

Divi 5 è pronto per le build del nuovo sito Web, ma stiamo dando gli ultimi ritocchi sul sistema di compatibilità all'indietro. Nel frattempo, tieni premuto i siti di aggiornamento basati su D4. Ti faremo sapere quando accade quel cambiamento.

Considerazioni quando si pensa attraverso i caratteri per un nuovo sito Web

Quando si avvia un nuovo sito, le scelte di carattere modellano la prima impressione dell'utente. Considera questi punti per garantire che la tua tipografia supporti i tuoi contenuti:

• Leggibilità : scegli caratteri chiari, specialmente per il testo del corpo.
• Coerenza : limita i caratteri: due o tre funzionano meglio, con almeno uno per le intestazioni e uno per il testo del corpo.
• Reattività : assicurarsi che i caratteri si adattino a diverse dimensioni dello schermo (idealmente da 320px a 1440px).
• Compatibilità : optare per Web-Safe o Font popolari per evitare problemi di visualizzazione.

Come gestire i caratteri e le dimensioni dei caratteri in Divi 5

Usiamo un layout premade dalla biblioteca di Divi. Sceglieremo il layout della pagina di destinazione dal pacchetto "Business CV" e rinnoveremo la tipografia utilizzando le nuove funzionalità di Divi 5. Se hai un sito Divi 5 esistente ma si desidera migliorare la sua tipografia, puoi seguire questi stessi passaggi senza usare questo layout.

Passaggio 1: scegliere gli abbinamenti di caratteri

Buoni fonti Abbinamenti Miscela stile e leggibilità. Google Fonts è anche una scommessa sicura poiché sono integrati in Divi e facili da usare.

Negli esempi seguenti, rimarremo con l'uso di papaveri da parte del layout per le intestazioni e il testo del corpo. Puoi provare ad abbinare anche Lora e Roboto.

Passaggio 2: impostazione dei caratteri per l'intestazione e il corpo primari

Ora che hai scelto i caratteri, possiamo aggiungerli al sito Web usando Divi. Nell'editor visivo, apri il gestore variabile in alto a sinistra. Le variabili di progettazione di Divi ti consentono di controllare a livello globale i caratteri sul tuo sito web.

Esistono due variabili di carattere predefinite per i caratteri di intestazione e corpo primari. Vai alla sezione Fonts e imposta " Poppins " come carattere intestazione e " roboto " come carattere del corpo.

Imposta i tuoi caratteri su qualunque cosa corrisponda al tuo design e ai requisiti del marchio

A questo punto, potrebbe anche essere una buona idea assicurarsi che anche i colori del tuo marchio siano impostati come variabili di design, soprattutto se si prevede di utilizzare alcuni di quei colori nel testo.

Assicurati di salvare le tue variabili quando è finito di inserirle

Passaggio 3: creazione di dimensioni dei caratteri

Ora per la parte più coinvolta. È meglio pensare a come rendere la tua tipografia su ogni dimensione del dispositivo. Con Divi 5, hai due opzioni. L'opzione prima e preferita è quella di utilizzare il morsetto () e il secondo è impostare il carattere più volte in vari punti di interruzione.

Il modo in cui costruisci il dimensionamento del carattere per ogni livello di intestazione, testo del corpo e altre situazioni di testo dipende interamente da te.

Fluido tipografo con morsetto ()

Clamp () consente di impostare un valore minimo, un valore preferito e un valore massimo. In un altro post, approfondiamo il morsetto () e forniamo un modo semplice per capire tali valori. Ma ecco un esempio:

Questo layout ha una dimensione H1 predefinita e una dimensione H1 unica (e più grande) per il nome della persona nella prima sezione. Abbiamo trasportato lo stesso principio nella tabella di dimensionamento sopra e abbiamo aggiunto una variazione di carattere del corpo più piccolo.

Puoi testare il dimensionamento del carattere in un semplice documento HTML per vedere le cose in isolamento (questo può essere fatto anche all'interno di Divi). Ecco come appare il dimensionamento del carattere sopra con l'accoppiamento del carattere.

Una volta che ti senti a tuo agio con le dimensioni del carattere, puoi aggiungerle come variabili di design. Dai a ciascuno un nome riconoscibile e incolla il valore a destra.

Unità fisse con punti di interruzione

Clamp () è l'opzione più versatile per il dimensionamento dei caratteri, ma molti utenti usano ancora valori fissi come pixel o REM. Puoi usarli insieme ai punti di interruzione personalizzabili di Divi per ridimensionare il carattere su e giù secondo necessità.

Poiché il tuo numero di valori per un effetto simile triplica quando lo usi in questo modo (anziché 10 valori di clind () sopra, questo sarebbe 30 valori individuali). Non è necessariamente consigliato di riempire il gestore variabile con questi valori, ma puoi se si desidera,

Puoi costruire la tua struttura di dimensionamento per ogni punto di interruzione e trasportarla al passaggio successivo. Invece di posizionarli come variabili di progettazione, è possibile applicarle direttamente ai gruppi di opzioni e ai preset di elementi.

Passaggio 5: aggiunta di dimensioni dei caratteri da variabile manager ai preimpostazioni

Con le variabili numeriche impostate (o almeno formulate), è tempo di applicarle ai preimpostazioni. Uno dei migliori casi d'uso per i preimpostazioni del gruppo di opzioni è la tipografia. È possibile creare sette (7) preimpostazioni del gruppo di opzioni di intestazione/titolo che è possibile utilizzare per qualsiasi modulo che utilizza il campo di intestazione/titolo (come la testa, il blurb, la fisarmonica e i moduli di persona, ad esempio).

Lo stesso vale per il gruppo di opzioni di testo. Posso impostare due (2) preset (uno per il mio normale e uno per il mio piccolo testo del corpo) e qualsiasi modulo che utilizza il gruppo di opzioni di testo può usare quegli stili. Per gli stili di intestazione e di testo, questo è molto più efficiente rispetto all'applicazione di quegli stili come preset di elementi a tutti i vari moduli che potresti usare in tutto il tuo sito Web.

Assegnazione di valori fissi ai punti di interruzione

Il video seguente mostra i passaggi di base se si è optato per i valori fissi in più punti di interruzione. Fai clic su un modulo di testo, vai alla scheda Design , passa sopra il gruppo di opzioni di testo, fai clic sull'icona OG , crea un nuovo preimpostazione e applica i tuoi stili ad ogni punto di interruzione. Scorri fino alla parte inferiore della barra laterale destra e salva il preset ( molto importante ). Ripeti le variazioni di testo che hai inventato (come opzioni piccole, regolari e di grandi dimensioni).

Assegna il preimpostazione OG che ti aspetti di utilizzare di più come predefinito predefinito per quel gruppo di opzioni. Se vedi una stella accanto ad essa, questo è il tuo valore predefinito attuale (questo si applicherà sul tuo sito, supponendo che nessun altro modulo o preset di elementi vengano applicati in tutto).

Assegnazione di funzioni di clamp () (più semplice)

Il processo è simile quando si utilizza la variabile di progettazione con la funzione di plegamento (), ma molto più facile. Nel video di esempio seguente, abbiamo impostato due dimensioni dell'intestazione a livello di gruppo di opzioni. L'unica differenza rispetto a quanto sopra è che non stiamo incollando i valori ma usando le variabili che abbiamo impostato in precedenza. Durante l'impostazione dei preset OG, assicurarsi che i caratteri predefiniti siano scelti e imposta i colori come desideri. Ad alcune persone piace invece impostare i colori a livello del modulo, ma dipende da te.

Impostarai ogni livello di intestazioni H1-H6 come nuovo preimpostazione del gruppo di opzioni personalizzate .

Applicare questi preset sulle intestazioni del layout utilizzando i preimpostazioni del gruppo di opzioni creato. La bellezza dei preimpostazioni del gruppo di opzioni è che funzionano attraverso i moduli all'interno di quel gruppo di opzioni, come i moduli di testo, blurb e intestazione.

Le migliori pratiche per i caratteri in Divi 5

Per massimizzare la tipografia, tieni a mente questi suggerimenti:

• Imposta sempre le variabili di carattere globale in anticipo.
• Usa spaziatura e dimensioni coerenti (sì, è possibile impostare la spaziatura delle lettere e l'altezza della linea anche come variabili di design).
• Anteprima regolarmente viste reattive tra le dimensioni dello schermo.
• Evita troppi caratteri o pesi di carattere.

La tipografia in Divi 5 è una boccata d'aria fresca

Ora possiedi un sistema tipografico completo grazie alle più recenti funzionalità di Divi.

I caratteri vivono come variabili di design. Lo stesso con le dimensioni dei caratteri quando usi un morsetto (). O se vuoi esercitare tutti e sette questi punti di interruzione personalizzabili, puoi anche prendere quella strada.

I preset del gruppo di opzioni applicano tali scelte senza sforzo in tutto il tuo sito. La modifica delle dimensioni dei caratteri in una build è molto semplice poiché sono impostate come variabili di design. Non importa cosa, i tuoi design rimarranno affilati e il tuo tempo di costruzione si restringerà.

Divi 5 ha lanciato molte nuove funzionalità che aggiornano il sistema di progettazione. Inizia oggi a costruire nuovi siti in Divi 5 per sfruttare tutte le ultime funzionalità. Ti consigliamo di aspettare un po 'di più per migrare i siti Web esistenti a Divi 5.