Proprietà CSS font-size

La proprietà CSS font-size definisce la dimensione del testo. È una delle proprietà tipografiche più utilizzate e, poiché unità come em, ex e % vengono calcolate in relazione ad essa, il valore scelto influisce anche sulla dimensione di altri elementi che dipendono da essa.

Questa pagina illustra tutti i modi per specificare una dimensione del carattere — parole chiave, lunghezze e percentuali — spiega come vengono calcolate le unità relative (em, rem, ex, vw/vh) e mostra quale approccio utilizzare nei diversi casi.

Modi per impostare la dimensione del carattere

È possibile impostare font-size in quattro modi principali:

absolute-size — una parola chiave fissa da una scala predefinita dal browser.
relative-size — una parola chiave che aumenta o diminuisce la dimensione ereditata.
length — un numero esplicito accompagnato da un'unità di misura.
percentage — un valore relativo alla dimensione del carattere dell'elemento padre.

Le parole chiave absolute-size corrispondono a una scala fissa definita dal browser:

xx-small
x-small
small
medium (il valore iniziale)
large
x-large
xx-large

Le parole chiave relative-size aumentano o diminuiscono la dimensione rispetto al valore ereditato:

smaller
larger

Le length possono essere relative (em, ex, rem, ch, vw, vh, px) o assolute (in, cm, mm, pt, pc). Una percentage imposta la dimensione del carattere in relazione a quella dell'elemento padre — 150% equivale a una volta e mezzo la dimensione del padre.

Quale scegliere?

Usa rem per la maggior parte del testo. Si adatta all'impostazione della dimensione del carattere del browser dell'utente (utile per l'accessibilità) ed è prevedibile, poiché è sempre relativo all'elemento radice e non al genitore.
Usa em quando vuoi che la spaziatura di un componente o il testo dei suoi figli si ridimensioni insieme alla dimensione del carattere del componente stesso.
Evita i valori in pixel (px) per il testo del corpo se l'accessibilità è importante: i pixel fissi ignorano la dimensione predefinita preferita dal lettore.

Valore iniziale	medium
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.fontSize = "15px";

Sintassi

Sintassi della proprietà CSS font-size

font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit;

Esempio della proprietà font-size:

Esempio della proprietà CSS font-size con valori px, em, pt, x-small e % (percentuale)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        font-size: 24pt;
      }
      h3 {
        font-size: 26px;
      }
      p {
        font-size: 1em;
      }
      a {
        font-size: 100%;
      }
      span {
        font-size: x-small;
      }
    </style>
  </head>
  <body>
    <span>This span is written with x-small value.</span>
    <p>This paragraph is written with 1em font-size.</p>
    <a href="https://www.w3docs.com/">This hyperlink is written with 100% font-size.</a>
    <h3>We used x-small font size for this heading.</h3>
    <h1>We set the font size 24pt  for this heading.</h1>
  </body>
</html>

Provalo tu stesso »

Risultato

Utilizzo dei valori percentuali

I valori percentuali sono relativi alla dimensione del carattere dell'elemento padre. Nell'esempio seguente, il titolo è impostato a 125%, quindi viene visualizzato a un quarto in più rispetto alla dimensione del carattere del corpo ereditata:

Esempio della proprietà font-size specificata in percentuale:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h3 {
        font-size: 125%;
      }
    </style>
  </head>
  <body>
    <h3>This heading is 125% of the body font size.</h3>
    <span>This span uses the default (inherited) size.</span>
    <p>This paragraph uses the default (inherited) size.</p>
  </body>
</html>

Utilizzo dell'unità em

L'unità em è considerata un'unità relativa. È basata sul valore calcolato della dimensione del carattere dell'elemento padre. Nel codice seguente, il paragrafo avrà una dimensione di 32px, poiché 2x16=32, e il titolo avrà una dimensione di 48px poiché 3x16=48px. Questo metodo è molto utile perché garantisce che tutti gli elementi figli siano sempre relativi gli uni agli altri.

Esempio della proprietà font-size con il valore "em":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        font-size: 16px;
      }
      p {
        font-size: 2em;
      }
      h2 {
        font-size: 3em;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>Here is the heading</h2>
      <p>Here is the text.</p>
    </div>
  </body>
</html>

Provalo tu stesso »

Utilizzo dell'unità rem

Con l'unità rem, la dimensione del carattere è sempre relativa all'elemento radice <html>, indipendentemente dalla profondità di annidamento dell'elemento. Nell'esempio seguente la radice è 16px, quindi il titolo è 1.5rem = 1,5 × 16 = 24px. Poiché ogni rem punta allo stesso valore radice, si evita il problema dell'accumulo che le unità em possono causare all'interno di elementi annidati.

Esempio della proprietà font-size con il valore "rem":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        font-size: 16px;
      }
      h2 {
        font-size: 1.5rem;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>Here is the heading</h2>
      <p>Here is the text.</p>
    </div>
  </body>
</html>

Provalo tu stesso »

Utilizzo dell'unità ex

Con l'unità ex, 1ex equivale all'altezza x — l'altezza della lettera minuscola "x" — del carattere attuale dell'elemento. Poiché l'altezza x varia da un carattere tipografico all'altro, una dimensione basata su ex dipende dal carattere in uso, il che la rende meno prevedibile rispetto a em o rem. Nell'esempio seguente il testo è dimensionato a 15 volte l'altezza x.

Proprietà CSS font-size

.exunit {
  font-size: 15ex;
}

Utilizzo delle unità viewport

Le unità viewport (vw e vh) vengono utilizzate per impostare la dimensione del carattere di un elemento, relativa alle dimensioni del viewport.

1vw = 1% della larghezza del viewport
1vh = 1% dell'altezza del viewport

Proprietà CSS font-size

.viewport {
  font-size: 120vh;
}

Esempio della proprietà font-size con il valore "length":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        color: green;
        font-size: 2vh;
      }
      p {
        color: red;
        font-size: 1em;
      }
      .length {
        color: orange;
        font-size: 30px;
      }
      h3 {
        color: lightblue;
        font-size: 3ex;
      }
      h1 {
        color: purple;
        font-size: 24pt;
      }
      a {
        color: blue;
        font-size: 120%;
      }
    </style>
  </head>
  <body>
    <h2>Font-size property</h2>
    <span>This text is written with 2vh font-size.</span>
    <p>This paragraph is written with 1em font-size.</p>
    <div class="length">Example with 30px font-size length </div>
    <h3>Example with 3ex font-size length.</h3>
    <h1>We set the font size 24pt  for this heading.</h1>
    <a href="https://www.w3docs.com/">This hyperlink is written with 100% font-size.</a>
  </body>
</html>

Provalo tu stesso »

Esempio della proprietà font-size con i valori absolute-size:

Esempio della proprietà font-size (absolute-size):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .font-xxsmall {
        color: grey;
        font-size: xx-small;
      }
      .font-xsmall {
        color: grey;
        font-size: x-small;
      }
      .font-small {
        color: grey;
        font-size: small;
      }
      .font-medium {
        color: grey;
        font-size: medium;
      }
      .font-large {
        color: grey;
        font-size: large;
      }
      .font-xlarge {
        color: grey;
        font-size: x-large;
      }
      .font-xxlarge {
        color: grey;
        font-size: xx-large;
      }
    </style>
  </head>
  <body>
    <h1>Font-size property</h1>
    <div class="font-xxsmall">Example with font-size xx-small property</div>
    <div class="font-xsmall">Example with font-size x-small property</div>
    <div class="font-small">Example with font-size small property</div>
    <div class="font-medium">Example with font-size medium property</div>
    <div class="font-large">Example with font-size large property</div>
    <div class="font-xlarge">Example with font-size x-large property</div>
    <div class="font-xxlarge">Example with font-size xx-large property</div>
  </body>
</html>

Provalo tu stesso »

Esempio della proprietà font-size con i valori "smaller" e "larger":

Esempio della proprietà font-size con i valori "smaller" e "larger":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .smaller {
        color: red;
        font-size: smaller;
      }
      .larger {
        color: red;
        font-size: larger;
      }
    </style>
  </head>
  <body>
    <h1>font-size property</h1>
    <div class="smaller">Example with font-size smaller property</div>
    <div class="larger">Example with font-size larger property</div>
  </body>
</html>

Provalo tu stesso »

Valori

Valore	Descrizione	Prova
medium	Imposta la dimensione del carattere su medium. Questo è il valore predefinito della proprietà.	Prova »
xx-small	Imposta la dimensione del carattere su xx-small.	Prova »
x-small	Imposta la dimensione del carattere su x-small.	Prova »
small	Imposta la dimensione del carattere su small.	Prova »
large	Imposta la dimensione del carattere su large.	Prova »
x-large	Imposta la dimensione del carattere su x-large.	Prova »
xx-large	Imposta la dimensione del carattere su xx-large.	Prova »
smaller	Riduce la dimensione del carattere.	Prova »
larger	Aumenta la dimensione del carattere.	Prova »
length	Specifica la dimensione del carattere tramite px, em ecc.	Prova »
%	Imposta la dimensione del carattere come percentuale della dimensione del carattere dell'elemento padre.	Prova »
initial	Imposta la proprietà al suo valore predefinito.	Prova »
inherit	Eredita la proprietà dall'elemento padre.

Proprietà correlate

Per controllare il resto della tipografia di un elemento, combina font-size con queste proprietà:

font-family — scegli il carattere tipografico.
font-weight — imposta il peso del testo.
font-style — applica lo stile corsivo o obliquo.
line-height — controlla la spaziatura verticale tra le righe.
font — la proprietà abbreviata che imposta più di queste contemporaneamente.

Esercitazione

Pratica

Quali unità possono essere usate per impostare la proprietà 'font-size' in CSS?