Guida CSS interattiva: Font-weight

Q: Come metto il testo in grassetto in CSS?

Usa font-weight: bold; o il numero equivalente font-weight: 700; sull'elemento. Per togliere il grassetto da un titolo o da uno , imposta font-weight: normal; (400).

Q: font-weight bold è uguale a 700?

Sì. bold corrisponde a 700 e normal a 400, quindi le due forme vengono rese in modo identico.

Q: Meglio font-weight in CSS o il tag ?

Usa quando le parole sono importanti, per un testo che ha solo uno stile diverso, e font-weight per il design visivo come pulsanti, etichette e titoli. I tag portano un significato; la proprietà è solo aspetto.

Come mettere il testo in grassetto in CSS

font-weight imposta lo spessore delle lettere. bold (uguale a 700) mette il testo in grassetto, e normal (uguale a 400) è il testo normale.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font weight</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    p { margin: 6px 0; }
    .normal { font-weight: normal; }
    .bold { font-weight: bold; }
    .heavy { font-weight: 900; }
    h2.plain { font-weight: normal; }
  </style>
</head>
<body>
  <p class="normal">font-weight: normal (400)</p>
  <p class="bold">font-weight: bold (700)</p>
  <p class="heavy">font-weight: 900</p>
  <h2 class="plain">A heading with font-weight: normal</h2>
</body>
</html>

I titoli, <th>,  e  sono in grassetto per impostazione predefinita a causa del foglio di stile del browser, quindi font-weight: normal è il modo per togliere il grassetto. Per capire quando usare  o  nell'HTML stesso, vedi grassetto in HTML.

La scala numerica: da 100 a 900

I numeri hanno nomi standard che le famiglie di font seguono:

Valore	Nome comune
`100`	Thin
`200`	Extra Light
`300`	Light
`400`	Normal (Regular)
`500`	Medium
`600`	Semi Bold
`700`	Bold
`800`	Extra Bold
`900`	Black (Heavy)

Qualsiasi numero da 1 a 1000 è valido, quindi sono ammessi anche 450 e 650. Se vedi o no una differenza dipende dal font: il browser può disegnare solo i pesi che il font ha davvero.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Weight scale</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <p style="font-weight: 100;">100 Thin</p>
  <p style="font-weight: 200;">200 Extra Light</p>
  <p style="font-weight: 300;">300 Light</p>
  <p style="font-weight: 400;">400 Normal</p>
  <p style="font-weight: 500;">500 Medium</p>
  <p style="font-weight: 600;">600 Semi Bold</p>
  <p style="font-weight: 700;">700 Bold</p>
  <p style="font-weight: 800;">800 Extra Bold</p>
  <p style="font-weight: 900;">900 Black</p>
</body>
</html>

system-ui è il font dell'interfaccia del sistema operativo, che di solito include molti pesi. Se tutte le righe qui sopra sembrano avere solo due pesi, il font del tuo sistema ha solo regular e bold.

Perché un peso non cambia nulla

Un font è un insieme di file, spesso uno per peso. Quando manca il peso esatto, il browser sceglie il più vicino che ha:

Per 500, prova 500, poi i pesi più leggeri, poi quelli più pesanti.
Per 600 e oltre, prova prima i pesi più pesanti, poi quelli più leggeri.
Se non c'è proprio un file bold, la maggior parte dei browser ne simula uno ispessendo le lettere normali (grassetto sintetico).

Confronta un font con molti pesi con serif, che nella maggior parte dei sistemi ha solo regular e bold:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Missing weights</title>
  <style>
    body { font-size: 22px; color: #111827; }
    .col { display: inline-block; vertical-align: top; margin-inline-end: 32px; }
    .sans { font-family: system-ui, sans-serif; }
    .serif { font-family: Georgia, serif; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <div class="col sans">
    <p style="font-weight: 300;">300 sans</p>
    <p style="font-weight: 500;">500 sans</p>
    <p style="font-weight: 600;">600 sans</p>
  </div>
  <div class="col serif">
    <p style="font-weight: 300;">300 serif</p>
    <p style="font-weight: 500;">500 serif</p>
    <p style="font-weight: 600;">600 serif</p>
  </div>
</body>
</html>

Nella colonna serif, 300 e 500 di solito ripiegano sulla versione regular e 600 su quella bold. È la risposta alla maggior parte delle domande del tipo "font-weight non funziona": il CSS va bene, è il font che non ha quel peso. Un font variabile (un solo file con un asse del peso) disegna in modo continuo ogni valore all'interno del suo intervallo di pesi.

bolder e lighter

bolder e lighter sono relativi al peso che l'elemento eredita. Passano al gruppo di pesi successivo invece di aggiungere una quantità fissa:

Peso del genitore	`bolder` dà	`lighter` dà
da 100 a 349	400	100
da 350 a 549	700	100
da 550 a 749	900	400
da 750 a 900	900	700

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>bolder and lighter</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; color: #111827; }
    .bolder { font-weight: bolder; }
    .lighter { font-weight: lighter; }
  </style>
</head>
<body>
  <p style="font-weight: 400;">400 with <span class="bolder" id="a">bolder</span> and <span class="lighter" id="b">lighter</span></p>
  <p style="font-weight: 700;">700 with <span class="bolder" id="c">bolder</span> and <span class="lighter" id="d">lighter</span></p>
  <p id="out"></p>
  <script>
    const w = (id) => getComputedStyle(document.getElementById(id)).fontWeight;
    document.getElementById('out').textContent =
      'computed: ' + w('a') + ', ' + w('b') + ', ' + w('c') + ', ' + w('d');
  </script>
</body>
</html>

Uno schema reale: una scala di pesi nelle variabili

Scegli tre o quattro pesi per tutto il sito e dagli un nome, invece di spargere numeri ovunque:

:root {
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
}
body   { font-weight: var(--weight-regular); }
button { font-weight: var(--weight-medium); }
h1, h2 { font-weight: var(--weight-bold); }

Errori comuni

Aspettarsi che ogni numero abbia un aspetto diverso. Solo i pesi contenuti nel font vengono resi in modo distinto.
Usare  per l'etichetta di un pulsante. Dai stile al pulsante con font-weight; tieni  e  per il testo.
Mettere il numero tra virgolette. font-weight: "700" non è valido e viene ignorato. Scrivi font-weight: 700.
Grassetto per dare enfasi ovunque. Quando tutto è in grassetto, niente risalta. Tieni il testo normale a 400.
Pesi sottili per il testo piccolo. Da 100 a 300 a dimensioni ridotte è difficile da leggere, soprattutto su sfondi a basso contrasto.

Domande frequenti

Come metto il testo in grassetto in CSS?

Usa font-weight: bold; o il numero equivalente font-weight: 700; sull'elemento. Per togliere il grassetto da un titolo o da uno , imposta font-weight: normal; (400).

Quali sono i valori di font-weight?

Numeri da 1 a 1000, di solito scritti in centinaia: 100 thin, 200 extra light, 300 light, 400 normal, 500 medium, 600 semibold, 700 bold, 800 extra bold, 900 black. Le parole chiave normal e bold valgono 400 e 700, e bolder e lighter sono relative al genitore.

font-weight bold è uguale a 700?

Sì. bold corrisponde a 700 e normal a 400, quindi le due forme vengono rese in modo identico.

Perché font-weight 500 o 600 sembra uguale a normal o bold?

Il font non ha quel peso. Quando un font include solo 400 e 700, il browser sceglie il file disponibile più vicino, quindi 500 appare come 400 e 600 come 700. Carica un font con più pesi o un font variabile.

Meglio font-weight in CSS o il tag ?

Usa  quando le parole sono importanti,  per un testo che ha solo uno stile diverso, e font-weight per il design visivo come pulsanti, etichette e titoli. I tag portano un significato; la proprietà è solo aspetto.

Concetti correlati