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