Cambiare dimensione e colore del testo.
Ingrandisci una frase di apertura, imposta una citazione nel colore del tuo brand, o rendi bianco un titolo su una foto scura. Con Dimensione del carattere e Colore del carattere nel pannello Stile, cambi tutto il testo di un elemento. Per parte di un testo, usa invece la barra dell’editor di testo. Per dimensioni e colori condivisi da tutte le pagine, usa il tuo tema.
Il video segue l’esempio pratico qui sotto: trasforma una frase in apertura con dimensione maggiore e colore brand.
Prima di iniziare
- Apri la pagina in DXPR Builder; puntando a un elemento si mostra la sua barra di controllo con Altro. Nuovo del builder? Vedi La tua prima pagina.
- Salva nella finestra conserva una modifica nell’editor. Salva nella barra del builder sopra il contenuto conserva la pagina e mostra “Campo salvato”.
- Usa il pannello Stile per un elemento: un paragrafo di apertura, una citazione, un titolo su una foto.
- Usa l’editor di testo per parte di un testo e per la struttura. Rendi un titolo un vero titolo con Intestazione 2 o Intestazione 3, non una riga Normale più grande. Screen reader e motori di ricerca leggono il livello, non la dimensione.
- Usa l’elenco Stili dell’editor per gli stili di testo brand. Il tuo webmaster li imposta sotto Impostazioni generali > Editor di testo > Stili personalizzati (
/admin/dxpr_studio/dxpr_builder/settings). - Usa il tuo tema per il font del corpo, le dimensioni dei titoli e i colori dei link.
Esempio pratico: una frase di apertura nel colore del tuo brand
- Aggiungi un elemento Testo e digita una o due frasi come testo Normale.
- Passaci sopra, fai clic su Altro, poi su Impostazioni.
- Apri il pannello Stile e trascina Dimensione del carattere a 20. Il testo cresce mentre trascini.
- Apri Colore del carattere e scegli il colore del tuo brand dai campioni, oppure digita il suo codice, come #1a4d8f, nel campo colore.
- Fai clic su Salva nella finestra. A 20 px la frase conta come testo normale, quindi serve un contrasto di 4,5 a 1. Inserisci il tuo codice colore e il colore di sfondo in un verificatore di contrasto; una pagina bianca è #ffffff.
- Fai clic su Salva nella barra.
Cosa vedi
La frase cresce a 20 px e diventa del colore del tuo brand. Titoli e link dentro lo stesso elemento Testo prendono anch’essi quel colore, ma i titoli conservano la loro dimensione.
Come funzionano le impostazioni
Dimensione del carattere
Dimensione del carattere va da 0 a 100 px, e 0 conserva la dimensione del tuo tema. Il valore è uguale su ogni dimensione schermo: una riga da 48 px su un desktop è 48 px anche su un telefono.
La dimensione va sull’elemento, e il testo che ha una sua dimensione la conserva. I titoli di solito sì, perché Bootstrap li dimensiona dalla dimensione base della pagina. Anche il testo dimensionato con lo strumento dimensione carattere dell’editor conserva la sua.
Colore del carattere
Il selettore mostra la tavolozza del tuo tema come campioni, quando il tuo sito ne ha una. Ha anche un cursore di opacità e un campo dove digiti un codice colore, come #1a4d8f. Azzera nel selettore riporta il testo al colore del tema.
Su un elemento di contenuto come Testo, Scheda o Avviso, il colore raggiunge tutto ciò che sta dentro, titoli e link inclusi. Su una Sezione raggiunge solo il testo senza un suo colore. Titoli e link colorati dal tuo tema conservano lì il loro colore.
Le classi di colore Bootstrap sono marcate !important, quindi battono Colore del carattere. Un esempio è il chip Colore testo primario sotto Classi HTML. Un altro è uno stile dell’editor come Testo brand primario su parte del testo.
Su un Pulsante, il colore va sul pulsante stesso e sostituisce il colore hover del tema. Imposta Colore del carattere anche in Stile hover.
Hover
Il pannello Stile hover ha un suo Colore del carattere e una sua Dimensione del carattere. Una dimensione maggiore all’hover sposta il contenuto intorno, quindi un cambio di colore è di solito la scelta più calma.
Contrasto
Per un testo leggibile dalla maggior parte delle persone, le regole WCAG 2 al livello AA chiedono questo contrasto:
| Testo | Contrasto con il suo sfondo |
|---|---|
| Testo normale | almeno 4,5 a 1 |
| Testo grande: 24 px (18 pt) o più, o 19 px (14 pt) o più in grassetto | almeno 3 a 1 |
Su una foto, misura sulla parte più chiara dietro il testo. Prova la tua coppia di colori con un verificatore di contrasto, come il verificatore di contrasto WebAIM.
Se non lo vedi
- Il titolo dentro il testo non è cresciuto. Il titolo ha una sua dimensione dal tuo tema. Scegli un altro livello di titolo nell’editor di testo, oppure usa il suo strumento dimensione carattere.
- Link e titoli conservano il loro colore. Su una Sezione, il testo con un suo colore del tema lo conserva. Imposta invece Colore del carattere sull’elemento Testo.
- Colore del carattere non fa proprio niente. Vince una classe di colore come Colore testo primario o Testo bianco sotto Classi HTML. Rimuovi il suo chip.
- Parte del testo conserva un altro colore. Vince uno stile dell’editor su quella parte, come Testo brand primario. Rimuovi lo stile nell’editor di testo.
- Dimensione del carattere non fa niente su un contatore. Contatore circolare e Contatore numerico hanno una loro Dimensione del carattere. Usa quella.
- Un colore campione non corrisponde più al brand. Un campione copia il colore quando lo scegli. Dopo un cambio di tavolozza, scegli di nuovo il campione.
- Il colore brand non supera il controllo di contrasto. Scegli una sua tonalità più scura. Oppure porta il testo ad almeno 24 px, così vale l’obiettivo 3 a 1.
- Il testo si legge male su una foto. Il contrasto è troppo basso. Scurisci la foto con una sfumatura, come mostrato nella pagina Sfondi.
- Il pulsante ha perso il colore di testo hover. Il tuo Colore del carattere sostituisce il colore hover del tema. Imposta Colore del carattere anche in Stile hover.
Passi successivi
- ID e classi HTML: riusa uno stile di testo tramite una classe invece di impostarlo su ogni elemento.