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.

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%).

Approndimenti font CSS

Questo sito ospita una sezione dedicata al CSS e al Web Development.

Ecco alcuni articoli che potrebbero interessarti:

• Come fare una chiamata AJAX ( GET / POST )
• Position Sticky CSS: guida ed esempi pratici
• RxJS: Subject vs BehaviorSubject
• Query WordPress: come accedere al database

font CSS: conclusioni

In questo articolo hai appreso come stabilire delle regole per determinare il rendering della tipografia di una pagina web.