Guida CSS interattiva: Dimensione del font

Q: Come cambio la dimensione del font in CSS?

Imposta la proprietà font-size sull'elemento: p { font-size: 18px; }. Accetta lunghezze (px, rem, em), percentuali e parole chiave come large.

Q: Come cambio la dimensione del testo in HTML?

Con il CSS, in un foglio di stile o in un attributo style: . Il vecchio tag è obsoleto in HTML5 e non va usato.

Q: Meglio px, em o rem per la dimensione del font?

Usa rem per la maggior parte del testo: segue l'impostazione del font del browser dell'utente e non si moltiplica. Usa em quando una dimensione deve seguire il genitore, come un'icona dentro un pulsante. px non segue la dimensione predefinita che chi legge imposta nel browser, quindi evitalo per il testo normale.

Q: Perché la mia dimensione in em continua a crescere?

Perché em è relativo alla dimensione del font del genitore, quindi gli elementi annidati si moltiplicano: 1.2em dentro 1.2em è 1.44 volte la base. Passa a rem, che è sempre relativo all'elemento radice.

Come impostare la dimensione del font in CSS

La proprietà font-size imposta la dimensione del testo. Mettila su un elemento qualsiasi e ogni testo al suo interno eredita quella dimensione, a meno che un figlio non imposti la propria.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .small { font-size: 12px; }
    .normal { font-size: 16px; }
    .big { font-size: 1.5rem; }
    .huge { font-size: 48px; }
  </style>
</head>
<body>
  <p class="small">12px</p>
  <p class="normal">16px (the browser default)</p>
  <p class="big">1.5rem (24px)</p>
  <p class="huge">48px</p>
</body>
</html>

Per cambiare la dimensione del testo in HTML si usa comunque il CSS. Aggiungi un attributo style () o una regola in un foglio di stile. Il tag  degli anni '90 è obsoleto e non ha posto in una pagina moderna.

Le unità che accetta font-size

Valore	Esempio	Rispetto a cosa è relativo
`px`	`16px`	Niente: una dimensione fissa
`rem`	`1.25rem`	La dimensione del font dell'elemento radice `<html>` (16px per impostazione predefinita)
`em`	`1.2em`	La dimensione del font dell'elemento genitore
`%`	`120%`	La dimensione del font del genitore, come `em` (`120%` equivale a `1.2em`)
Parola chiave	`large`	Una scala predefinita attorno al valore predefinito `medium`
Parola chiave relativa	`smaller`, `larger`	Un passo rispetto alla dimensione del genitore
Viewport	`4vw`	La larghezza del viewport (il 4%)
Funzione	`clamp(1rem, 4vw, 2rem)`	Fluida tra un minimo e un massimo

Scrivi un valore e guarda la dimensione calcolata dal browser:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { border: 1px dashed #9ca3af; padding: 8px; margin: 12px 0; }
  </style>
</head>
<body>
  <label>font-size: <input id="val" value="1.5rem" size="20"></label>
  <p id="sample">The quick brown fox</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.fontSize = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).fontSize;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Prova 20px, 2em, 150%, x-large, smaller e 5vw. Un valore non valido, come big, viene ignorato e il testo mantiene l'ultima dimensione valida.

rem o em: la differenza che fa male

rem guarda sempre l'elemento radice, quindi 1.2rem ha la stessa dimensione ovunque compaia. em guarda il genitore, quindi le dimensioni si moltiplicano quando gli elementi sono annidati:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>em compounds</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .em { font-size: 1.2em; }
    .rem { font-size: 1.2rem; }
    div { border-inline-start: 3px solid #2563eb; padding-inline-start: 8px; }
  </style>
</head>
<body>
  <div class="em">1.2em
    <div class="em">1.2em inside
      <div class="em" id="deep-em">1.2em inside again</div>
    </div>
  </div>
  <div class="rem">1.2rem
    <div class="rem">1.2rem inside
      <div class="rem" id="deep-rem">1.2rem inside again</div>
    </div>
  </div>
</body>
</html>

Il box em più interno misura 16 × 1.2 × 1.2 × 1.2 = 27.648px. Il box rem più interno è ancora di 19.2px. Questa moltiplicazione è utile per un componente le cui parti devono scalare insieme, e una sorpresa ovunque altrove. La pagina sulle unità confronta tutte le unità di lunghezza.

Parole chiave: da xx-small a xx-large

Le parole chiave assolute corrispondono a una scala fissa attorno a medium, che equivale alla dimensione predefinita dell'utente (16px se non l'ha cambiata):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size keywords</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <p style="font-size: xx-small;">xx-small</p>
  <p style="font-size: x-small;">x-small</p>
  <p style="font-size: small;">small</p>
  <p style="font-size: medium;">medium</p>
  <p style="font-size: large;">large</p>
  <p style="font-size: x-large;">x-large</p>
  <p style="font-size: xx-large;">xx-large</p>
  <script>
    document.querySelectorAll('p').forEach((p) => {
      p.textContent += ': ' + getComputedStyle(p).fontSize;
    });
  </script>
</body>
</html>

Con i 16px predefiniti, small è 13px, large è 18px, x-large è 24px e xx-large è 32px. Le parole chiave vanno bene per un lavoro veloce, ma un design system di solito vuole una propria scala in rem.

Dimensione del font fluida con clamp()

Un titolo che deve crescere con lo schermo ma non diventare mai troppo piccolo o troppo grande è una sola chiamata a clamp(): il minimo, una dimensione preferita che scala e il massimo.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fluid heading</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 {
      /* never below 1.5rem, never above 3rem, 5vw in between */
      font-size: clamp(1.5rem, 5vw, 3rem);
      margin: 0;
    }
  </style>
</head>
<body>
  <h1 id="title">Fluid heading</h1>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'computed: ' + getComputedStyle(document.getElementById('title')).fontSize;
  </script>
</body>
</html>

In un'anteprima larga 800px, 5vw fa 40px, che sta tra 24px e 48px, quindi vince. La pagina su clamp approfondisce la tipografia fluida.

Impostare una dimensione di base per tutta la pagina

Imposta la dimensione una volta su body (o html) e dimensiona tutto il resto in relazione a quella:

html { font-size: 100%; }  /* respects the user's setting, usually 16px */
body { font-size: 1rem; }
h1   { font-size: 2.25rem; }
small, .caption { font-size: 0.875rem; }

Evita trucchi come html { font-size: 62.5%; } a meno che poi ogni dimensione della pagina non sia in rem, e non impostare mai una dimensione fissa in px su html: sovrascrive la dimensione del font che chi legge ha scelto nel browser, e alcune persone ne hanno bisogno per riuscire a leggere.

Note sull'accessibilità

Un testo di 16px o più è una buona soglia minima per leggere sullo schermo.
Le dimensioni in rem e em seguono l'impostazione predefinita del font dell'utente. Le dimensioni in px seguono lo zoom della pagina ma non quell'impostazione.
Su iPhone, Safari ingrandisce la pagina quando metti il focus su un input con un font sotto i 16px. Dai ai campi dei moduli font-size: 1rem o più per evitarlo.

Errori comuni

Usare il tag . È obsoleto. Usa la proprietà font-size.
Dimensioni em annidate che crescono o si riducono senza controllo. Usa rem, a meno che tu non voglia la moltiplicazione.
Una dimensione fissa in px su html. Sovrascrive l'impostazione del font di chi legge.
Dimenticare che i titoli hanno già una dimensione. <h1> è 2em per impostazione predefinita, quindi serve h1 { font-size: 1em; } se lo vuoi grande come il testo normale.
Solo unità del viewport. font-size: 3vw diventa illeggibile su un telefono ed enorme su un monitor largo. Racchiudilo in clamp().

Domande frequenti

Come cambio la dimensione del font in CSS?

Imposta la proprietà font-size sull'elemento: p { font-size: 18px; }. Accetta lunghezze (px, rem, em), percentuali e parole chiave come large.

Come cambio la dimensione del testo in HTML?

Con il CSS, in un foglio di stile o in un attributo style: . Il vecchio tag  è obsoleto in HTML5 e non va usato.

Qual è la dimensione predefinita del font nei browser?

16px per il testo normale, a meno che l'utente non l'abbia cambiata nelle impostazioni del browser. È il valore a cui equivalgono per impostazione predefinita 1rem e la parola chiave medium.

Meglio px, em o rem per la dimensione del font?

Usa rem per la maggior parte del testo: segue l'impostazione del font del browser dell'utente e non si moltiplica. Usa em quando una dimensione deve seguire il genitore, come un'icona dentro un pulsante. px non segue la dimensione predefinita che chi legge imposta nel browser, quindi evitalo per il testo normale.

Perché la mia dimensione in em continua a crescere?

Perché em è relativo alla dimensione del font del genitore, quindi gli elementi annidati si moltiplicano: 1.2em dentro 1.2em è 1.44 volte la base. Passa a rem, che è sempre relativo all'elemento radice.

Concetti correlati