Dare stile al testo con CSS

Dare stile al testo con CSS è una delle prime attività che si tendono a fare quando si crea un foglio di stile. Il testo è importantissimo, perché se dovesse risultare poco leggibile, impegnativo dal punto di vista cognitivo, difficile da scansionare, perderemmo in pochissimo tempo l’attenzione dell’utente, che già di attenzione ce ne da poca.

Quando si parla di stili del testo si fa riferimento a due macro categorie di proprietà:

• Quelle che modificano l’aspetto dei caratteri, la dimensione, il peso e lo stile
• Quelle che modificano lo spazio tra le lettere o le linee, come il testo si allinea rispetto al contenitore e altre caratteristiche di impaginazione.

Ricorda sempre che il testo viene gestito come unica entità, quindi se si volessero applicare degli stili ad una specifica parola, bisognerà intervenire con dei tag come ad esempio <span> per avere un “aggancio” da poter sfruttare con il selettore più opportuno.

Partiamo quindi con la prima categoria di proprietà e in particolar modo con il colore

Come cambiare colore del testo con CSS

Nelle lezioni precedenti abbiamo già visto in azione la proprietà color. Questa proprietà ci permette infatti di cambiare colore del testo con un qualsiasi colore valido supportato da CSS.

Ricorda sempre che la scelta del colore è un’attività da svolgere attentamente. Una palette colori sbagliata può invalidare pesantemente l’accessibilità del tuo sito web, quindi fai molta attenzione e usa strumenti come contrast checker o Stark per fare gli opportuni controlli.

1p {
2   color: green;
3}

Famiglie di caratteri

Una proprietà che userai spessissimo nei tuoi fogli di stile, non tanto per ripetitività, ma per il semplice fatto che sarà quasi sempre presente sarà font-family. Questa proprietà ti permette di modificare il font utilizzato dal browser per renderizzare il testo.

Il browser mostrerà solo i font che sono disponibili sul dispositivo che sta visualizzando la pagina web. Quindi occhio ad usare font installati solo sul tuo computer, perché è molto probabile che altri utenti che ne sono sprovvisti vedranno il font di default.

Il font di default che viene mostrato può essere uno dei web safe fonts una collezione di font facenti parte di categorie diverse presenti in quasi tutti i sistemi operativi.

I font potranno cambiare in futuro, ma ad oggi quelli disponibili sono:

• Arial, Trebuchet MS e Verdana (sans-serif)
• Times New Roman e Georgia (serif)
• Courier New (monospace)

Se hai intenzione di usare font diversi da questi puoi sempre dare un’occhiata a cssfontstack.com che tiene una lista aggiornata di font con relative percentuali di utilizzo sui due principali sistemi operativi (Windows e Mac, sorry Linux user)

CSS tra le altre cose supporta cinque nomi generici per le famiglie di caratteri:

• [serif](https://it.wikipedia.org/wiki/Caratteri_tipografici_con_grazie)
• [sans-serif](https://it.wikipedia.org/wiki/Caratteri_tipografici_senza_grazie)
• monospace (larghezza fissa)
• cursive (che simulano la scrittura a mano)
• fantasy (decorativi)

L’output di questi nomi generici è abbastanza prevedibile per i primi tre, mentre lo è decisamente meno per gli ultimi due quindi usa cursive e fantasy con estrema cautela.

1html {
2   font-family: Helvetica, Arial, sans-serif
3}

Se il nome del font può essere frainteso (presenza di spazi, identico ad una parola riservata di CSS, ecc.) deve essere posto tra virgolette.

1html {
2   font-family: ”Trebuchet MS”, serif
3}

Personalizzare il testo

Quando si tratta di dare stile al testo, oltre a colore a famiglia di caratteri CSS mette a disposizione molte proprietà le più usate sono:

• font-size: permette di modificare la dimensione del carattere usando unità di misura come px, em e rem
• font-style: permette di modificare il testo da normal a italic e viceversa. Esiste anche il valore oblique che simula il corsivo deformando il font normale qualora un font corsivo non sia stato fornito.
• font-weight: permette di modificare il livello di grassetto usando parole come normal o bold, oppure lighter o bolder i quali fanno riferimento al genitore e quindi il font sarà di un livello più leggero o più grassetto e infine valori da 100 a 900 per indicare il grado di grassetto.
• text-transform: trasforma il testo in tutto maiuscolo uppercase, tutto minuscolo lowercase e solo le prime lettere di ogni parola maiuscole capitalize.
• text-decoration: shorthand di text-decoration-line, text-decoration-style e text-decoration-color permette di renderizzare una sottolineatura underline, una sopralineatura overline o una barratura line-through. Lo stile della decorazione può essere solid, double, dotted, dashed o wavy.
• text-shadow: permette di renderizzare un ombra che segua la forma dei caratteri del testo. La proprietà accetta quattro valori:
  • offset orizzontale
  • offset verticale
  • raggio della sfocatura
  • colore dell’ombra

1h1 {
2   font–size: 64px;
3   font-style: italic;
4   font-weight: 900;
5   text-transform: uppercase;
6   text-decoration: underline overline;
7   text-shadow: 4px 4px 0px green;
8}

Allineare il testo

Per quanto riguarda invece la seconda categoria di proprietà, utili ad allineare il testo e a modificarne spaziature abbiamo le seguenti proprieta:

• text-align: i valori possono essere left, right, center e justify (quest’ultimo evitalo come la peste perché a volte allinea veramente male il testo, soprattutto in presenza di parole molto lunghe)
• line-height: spazio tra le righe di testo. Scegli sempre un valore che garantisca un buon respiro del testo senza esagerare. Il valore può avere un’unità di misura, come anche può non averla, in questo secondo caso il numero inserito agirà da moltiplicatore il che solitamente è la scelta più comoda e sensata.
• letter-spacing: spazio tra le singole lettere.
• word-spacing: spazio tra le parole.

Tornando ai font

Oltre ai web safe fonts, CSS da la possibilità di specificare un font personalizzato con l’uso della at-rule @font-face.

1@font-face {
2  font-family: "mio-font";
3  src: url("mio-font.woff2");
4}

Il formato più diffuso e supportato è il WOFF e WOFF2, ma si può usare anche TTF, EOT e SVG.

Prima di usare un font consultate sempre la licenza per vedere se può essere usato per il web.

Se non avete la licenza e volete usare dei font che sicuramente possono essere usati sul web puoi sempre appoggiarti a Google Font, servizio gratuito di Google.

Per ragioni legate alle performance e al tracciamento l’opzione migliore sarebbe quella di scaricare il font da Google Fonts e caricarlo da file system con l’uso di @font-face.

1@font-face {
2  font-family: 'Roboto';
3  font-style: normal;
4  font-weight: 400;
5  font-display: swap;
6  src: url(./fonts/roboto.ttf) format(‘ttf’)
7}

Questa dichiarazione deve essere fatta per ogni font-style e font-weight scaricato e che si vuole rendere disponibile.