Tipografia nei CSS

Font-weight

La proprietà CSS font-weight dichiara quanto devono essere spessi o sottili i caratteri di un testo.

Con questa proprietà si possono usare valori numerici per impostare lo spessore del testo. Il campo di scala numerica di questa proprietà va da 100 a 900 e accetta solo multipli di 100.

Il valore predefinito è normal, mentre il valore numerico predefinito è 400. Qualsiasi valore inferiore a 400 farà apparire il testo più leggero del valore di default mentre qualsiasi valore numerico maggiore di 400 apparirà più spesso.

p {
font-weight: 600;
}

Font-style

La proprietà CSS font-style determina lo stile del font con cui il testo apparirà.

Accetta italic come valore per impostare lo stile del carattere in corsivo.

.testo {
font-style: italic;
}

Regola CSS @font-face

La regola CSS @font-face permette di importare font esterni o file di font direttamente nei fogli di stile.

La posizione del file di font deve essere specificata nella regola CSS in modo che i file possano essere caricati da quella posizione.

Questa regola permette anche di aggiungere font salvati localmente utilizzando un percorso di file relativo invece di un URL web.

@font-face {
font-family: 'Montserrat Alternates';
src: url('../fonts/Montserrat-Alternates.ttf') format('truetype');
}

Font di riserva CSS

La proprietà CSS font-family può avere più font dichiarati in ordine di preferenza. In questo caso i font che seguono il font iniziale sono noti come font di riserva.

Se il valore iniziale della proprietà font-family non viene caricato sulla pagina web, vengono utilizzati i font di riserva.

p {
font-family: "Helvetica", "Arial";
}

Line-height

La proprietà CSS line-height dichiara la spaziatura verticale tra le linee di testo.

Accetta sia i numeri senza unità come rapporto (es. 2) che i numeri specificati dall'unità come valori (es. 12px), ma non accetta i numeri negativi.

Un numero senza unità è un valore assoluto, che calcolerà l'altezza della linea come rapporto alla dimensione del carattere e un numero di unità può essere qualsiasi unità CSS valida (es. pixel, percentuali, em, rem, ecc.).