Categorie
CSS Web development

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:

font CSS: conclusioni

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