Font CSS: tutte le proprietà per gestire la tipografia

La tipografia è un elemento fondamentale della progettazione web e la gestione dei font con CSS è una parte cruciale di essa.

E’ infatti possibile controllare molti aspetti della tipografia, come il tipo di carattere, la dimensione, il colore e molto altro.

In questo articolo, esploreremo tutte le proprietà CSS disponibili per gestire la tipografia in una pagina web.

Indice

Tipografia CSS: una premessa importante

In questo articolo si assume che tu abbia confidenza con i selettori CSS.

Se così non fosse, puoi approfondire questi concetti nell’articolo Selettori CSS: una guida pratica con esempi.

font-family CSS: impostare il carattere tipografico

La scelta del carattere tipografico può avere un impatto significativo sull’esperienza utente di un sito web.

Un carattere leggibile e ben scelto può aiutare a migliorare la comprensione del contenuto e rendere il sito più accattivante.

I caratteri tipografici più noti sono Arial e Times New Roman.

.serif {
  font-family: Times, "Times New Roman", Georgia, serif;
}
.sans-serif {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

Nel codice posto qui sopra definisce due classi, .serif e .sans-serif.

La prima imposta una famiglia di classe con grazie (appunto, serif), mentre la seconda senza grazie (sans-serif).

Noterai che font-weight è caratterizzato da più valori. Il browser applicherà il primo valore se la font-family è disponibile (nella pagina o nel sistema operativo), altrimenti proverà con il secondo e così via, fino all’ultimo.

L’ultimo valore (serif) istruisce il browser ad utilizzare un qualunque carattere tipografico con grazie, come Times New Roman.

font-size CSS: impostare lo spessore del carattere

La proprietà CSS font-size consente di istruire il browser riguardo alla dimensione del carattere.

.a-selector {
  font-size: 15rem;
}

I valori che possono essere impostati per font-size sono:

xx-small
x-small
small
medium
large
x-large
xx-large
xxx-large
smaller
larger
"un valore numerico"

font-weight CSS: impostare lo spessore del carattere

La proprietà CSS font-weight permette di impostare lo “spessore” del carattere di un testo.

Viene impiegata quando, ad esempio, si vuole fare in modo che il testo compaia in grassetto.

.a-selector {
  font-weight: bold;
}

I valori impostabili possono essere numerici o testuali, ad esempio:

bold
lighter
bolder
100
200
300
400
500
600
700
800
900

Puoi trovare ulteriori informazioni relativamente a questa proprietà su MDN.

Impostare il colore del testo con CSS

Per impostare il colore del testo in un elemento puoi far uso della proprietà CSS color

.a-selector {
  color: red;
}

Il valore di color può essere espresso come:

nome del colore (ad esempio red). Qui puoi trovare la lista dei nomi di colori disponibili.
colore espresso come notazione esadecimali (anche detti hex-color). Il valore esadecimale corrispondente a red è #ff0000
colore espresso utilizzando la notazione rgb. Il valore corrispondente a red è rgb(255, 0, 0).
colore espresso utilizzando la notazione hsl. Il valore corrispondente a red è hsl(0, 1, 0.5).
colore espresso utilizzando la notazione hwb. Il valore corrispondente a red è hwb(0, 0%, 0%).