Proprietà CSS font-weight – Valori, Suggerimenti ed Esempi

La proprietà CSS font-weight imposta quanto grassetto o spesso appaiono i caratteri di un font. Puoi specificare il peso con una parola chiave (normal, bold), una parola chiave relativa (bolder, lighter) o un valore numerico da 100 a 900.

Un carattere tipografico di solito include diversi pesi distinti come file font separati. Il browser può renderizzare solo i pesi effettivamente forniti dal font. Molti font includono solo due pesi — normal (400) e bold (700) — quindi richiedere font-weight: 300 potrebbe adattarsi al peso disponibile più vicino invece di disegnare una vera variante leggera. I font variabili sono l'eccezione: incorporano un asse di peso continuo e possono renderizzare qualsiasi valore senza file separati.

Questa pagina tratta i valori per parole chiave e numerici, come vengono risolti bolder / lighter, l'animazione del peso e cosa aspettarsi quando un peso richiesto non è disponibile.

Valore iniziale	normal
Si applica a	Tutti gli elementi. Si applica anche a ::first-letter e ::first-line.
Ereditato	Sì.
Animabile	Sì.
Versione	CSS1
Sintassi DOM	`object.style.fontWeight = "bolder";`

Sintassi

font-weight: normal | bold | bolder | lighter | <number> | initial | inherit;

Valori

Valore	Descrizione
`normal`	Peso predefinito. Equivalente a `400`.
`bold`	Peso grassetto. Equivalente a `700`.
`bolder`	Un livello più pesante del peso calcolato dell'elemento padre (vedi tabella sotto).
`lighter`	Un livello più leggero del peso calcolato dell'elemento padre (vedi tabella sotto).
`100`–`900`	Peso numerico a passi di 100 — dal più sottile (100) al più pesante (900).
`initial`	Reimposta il valore iniziale della proprietà (`normal`).
`inherit`	Eredita il peso calcolato dall'elemento padre.

Esempio di base

L'esempio seguente applica bolder a un paragrafo in modo che appaia più pesante del testo del corpo circostante.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.bolder {
        font-weight: bolder;
      }
    </style>
  </head>
  <body>
    <h2>Font-weight property example</h2>
    <p class="bolder">We used a bolder text here.</p>
  </body>
</html>

Provalo tu stesso »

Risultato

Tutti i valori per parole chiave e numerici

L'esempio seguente mostra ogni valore principale fianco a fianco per consentire un confronto visivo.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.normal {
        font-weight: normal;
      }
      p.lighter {
        font-weight: lighter;
      }
      p.bold {
        font-weight: bold;
      }
      p.bolder {
        font-weight: bolder;
      }
      p.fweight {
        font-weight: 600;
      }
    </style>
  </head>
  <body>
    <h2>Font-weight property example</h2>
    <p class="normal">We used normal weight here.</p>
    <p class="lighter">This is a lighter weight.</p>
    <p class="bold">We used bold weight here.</p>
    <p class="bolder">We used a bolder text here.</p>
    <p class="fweight">We set font-weight 600 here.</p>
  </body>
</html>

Provalo tu stesso »

La scala di pesi numerici

I valori numerici vanno da 100 (il più sottile) a 900 (il più spesso) a passi di 100. Ogni passo ha un nome convenzionale usato dai progettisti tipografici:

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

normal corrisponde a 400 e bold corrisponde a 700, quindi quelle coppie parola chiave/numero sono sempre intercambiabili. Usa un valore numerico quando hai bisogno di un controllo più preciso — ad esempio font-weight: 500 produce un'intestazione "medium" più pesante del testo del corpo ma più leggera di un'intestazione completamente in grassetto.

Quando il font non dispone del peso richiesto

Se il font non fornisce il peso esatto richiesto, il browser ricorre al peso più vicino disponibile. Ecco perché font-weight: 100 e font-weight: 300 possono sembrare identici quando il font include solo 400 (Regular) e 700 (Bold). Carica o dichiara sempre i pesi specifici che il tuo design utilizza — consulta @font-face e font-display per farlo in modo efficiente.

Come vengono risolti bolder e lighter

bolder e lighter sono relativi al peso ereditato dell'elemento padre. Non aggiungono o sottraggono semplicemente 100. Il browser mappa invece il peso calcolato del padre su una scala più grossolana a tre livelli prima di applicare il passo:

Peso ereditato	`bolder` diventa	`lighter` diventa
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

Questo significa che annidare due elementi bolder non continua ad appesantirsi all'infinito — una volta raggiunto 900 rimane lì.

<!DOCTYPE html>
<html>
  <head>
    <title>bolder resolution example</title>
    <style>
      .parent {
        font-weight: 400; /* normal */
      }
      .child {
        font-weight: bolder; /* resolves to 700 */
      }
      .grandchild {
        font-weight: bolder; /* resolves to 900, then stops */
      }
    </style>
  </head>
  <body>
    <p class="parent">
      Parent at normal (400).
      <span class="child">
        Child becomes bold (700).
        <span class="grandchild">Grandchild becomes black (900).</span>
      </span>
    </p>
  </body>
</html>

Animare font-weight

font-weight è animabile, quindi puoi effettuare transizioni fluide tra pesi con le transizioni CSS o le animazioni. L'interpolazione fluida funziona solo con i font variabili, perché i font statici hanno solo file di peso discreti. Con un font statico il browser si adatta al peso disponibile più vicino al punto centrale della transizione.

.heading {
  font-weight: 400;
  transition: font-weight 0.3s ease;
}

.heading:hover {
  font-weight: 700;
}

Per cambiamenti di peso continui e fluidi — ad esempio un effetto hover che scorre dal sottile al grassetto — usa un font variabile con la proprietà font-variation-settings:

.heading {
  /* "wght" is the weight axis on variable fonts */
  font-variation-settings: "wght" 400;
  transition: font-variation-settings 0.3s ease;
}

.heading:hover {
  font-variation-settings: "wght" 700;
}

Suggerimenti e accessibilità

Carica i pesi che usi. Quando scarichi font da Google Fonts o un altro servizio, richiedi esplicitamente ogni peso nell'URL o nel descrittore @font-face. Se un peso non viene caricato, il browser sintetizza un grassetto artificiale che spesso è di qualità inferiore rispetto alla variante reale.
Non usare il peso da solo per trasmettere significato. Il testo in grassetto è solo un segnale visivo. Per il testo che deve avere importanza semantica, usa <strong> (che porta font-weight: bold per impostazione predefinita) in modo che le tecnologie assistive possano comunicare l'enfasi.
Attenzione al contrasto con pesi leggeri. I pesi 100–300 riducono lo spessore del tratto e possono scendere al di sotto delle soglie di contrasto WCAG, specialmente a dimensioni ridotte e su sfondi colorati. Controlla i rapporti di contrasto con lo strumento color picker e mantieni il testo del corpo a 400 o superiore.
Preferisci i valori numerici nei sistemi di design. Le parole chiave come bold sono grossolane. Usare 700 rende l'intenzione esplicita e più facile da verificare.

Proprietà correlate

font — abbreviazione che imposta font-weight insieme a stile, dimensione e famiglia in un'unica dichiarazione.
font-style — controlla le varianti corsivo e obliquo.
font-size — imposta la dimensione del testo.
font-family — sceglie il carattere tipografico da utilizzare.
@font-face — dichiara font personalizzati e i loro intervalli di peso disponibili.
font-display — controlla come il browser renderizza il testo durante il caricamento di un font personalizzato.

Esercitazione

Pratica

Cosa controlla la proprietà CSS 'font-weight'?

Specifica il peso o lo spessore del font.Specifica lo stile del font.Imposta come vengono disegnate le estremità delle linee quando i font sono delineati.Determina se il testo viene presentato in grassetto o in peso normale.Determina la larghezza delle tabulazioni nel testo.

Peso ereditato	`bolder` diventa	`lighter` diventa
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

Peso ereditato	`bolder` diventa	`lighter` diventa
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

Peso ereditato	`bolder` diventa	`lighter` diventa
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700