font-size

La proprietà font-size specifica la dimensione, o altezza, del font. font-size influenza non solo il font a cui è applicato, ma è anche usato per calcolare il valore delle unità di lunghezza em, rem, ed ex.

p { font-size: 20px;}

font-size può accettare come valori parole chiave, unità di lunghezza o percentuali. È importante notare però che quando è dichiarato come parte della proprietà stenografica fontfont-size è un valore obbligatorio. Se non è incluso nella stenografia, l’intera linea viene ignorata.

I valori di lunghezza (es. px, em, rem, ex, ecc.) che sono applicati a font-size non possono essere negativi.

Parole chiave e valori assoluti

.element { font-size: small;}

Accetta i seguenti valori assoluti di parole chiave:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

Questi valori assoluti sono mappati a specifiche dimensioni di carattere come calcolate dal browser. Ma potete anche usare due valori chiave che sono relativi alla dimensione del carattere dell’elemento padre.

Altri valori assoluti includono mm (millimetri), cm (centimetri), in (pollici), pt (punti) e pc (picas). Un punto è uguale a 1/72 di pollice mentre un pica è uguale a 12 punti – questi valori sono tipicamente usati per i documenti stampati.

Parole chiave relative

.element { font-size: larger;}

• larger
• smaller

Per esempio, se l’elemento padre ha una dimensione del carattere di small, un elemento figlio con una dimensione relativa definita di larger renderà la dimensione del carattere uguale a medium per l’elemento figlio.

Valori percentuali

.element { font-size: 110%;}

I valori percentuali, come l’impostazione di un font-size del 110%, sono anche relativi alla dimensione del font dell’elemento padre come mostrato nella demo qui sotto:

Vedi il Pen qdbELL di CSS-Tricks (@css-tricks) su CodePen.

L’unità em

.element { font-size: 2em;}

L’unità em è un’unità relativa basata sul valore calcolato della dimensione del carattere dell’elemento padre. Questo significa che gli elementi figli dipendono sempre dal loro genitore per impostare la loro dimensione del carattere. Per esempio:

<div class="container"> <h2>This is a heading</h2> <p>This is some text.</p></div>

.container { font-size: 16px;}p { font-size: 1em;}h2 { font-size: 2em;}

Nell’esempio precedente, il paragrafo avrà una dimensione del carattere di 16px perché 1 x 16 = 16px mentre il titolo sarà 32px perché 2 x 16 = 32px. Ci sono molti vantaggi nel ridimensionare il tipo a seconda della dimensione del carattere dell’elemento genitore, cioè possiamo avvolgere gli elementi all’interno di un contenitore e sapere che tutti i figli saranno sempre relativi gli uni agli altri:

Vedi la penna Figuring out how the em unit works di CSS-Tricks (@css-tricks) su CodePen.

L’unità rem

Nel caso delle unità rem, tuttavia, la dimensione del carattere dipende dal valore dell’elemento root (o dell’elemento html).

html { font-size: 16px;}p { font-size: 1.5rem;}

Nell’esempio precedente, l’unità rem è uguale a 16px (perché è ereditata dall’elemento html/root) e quindi la dimensione del carattere per tutti gli elementi del paragrafo sarà calcolata a 24px (1.5 x 16 = 24). A differenza delle unità em, il paragrafo ignorerà lo stile di tutti i suoi genitori oltre alla radice.

Questa unità è supportata dai seguenti browser:

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Lavoro	Lavoro	Lavoro	Lavoro	10+	Lavoro	Lavoro

L’unità ex

.element { font-size: 20ex;}

Per le unità ex, 1ex sarebbe uguale all’altezza calcolata della lettera minuscola x dell’elemento radice. Così nell’esempio qui sotto l’elemento html è impostato su 20px e tutte le altre dimensioni del carattere sono determinate dall’altezza x di quel particolare carattere.

Vedi la penna Figuring out how the ex unit works di CSS-Tricks (@css-tricks) su CodePen.

Sperimentate con la demo qui sopra sostituendo il font-family sull’elemento html per vedere come cambiano le altre dimensioni del carattere.

Unità di viewport

.element-one { font-size: 100vh;}.element-two { font-size: 100vw;}

Le unità di viewport, come vw e vh, impostano la dimensione del carattere di un elemento rispetto alle dimensioni della viewport:

• 1vw = 1% della larghezza del viewport
• 1vh = 1% dell’altezza del viewport

Quindi se prendiamo il seguente esempio:

.element { font-size: 100vh;}

Quindi questo stabilirà che il font-size dell’elemento dovrebbe essere sempre il 100% dell’altezza del viewport in ogni momento (50vh sarebbe il 50%, 15vh sarebbe il 15% e così via). Nella demo qui sotto provate a ridimensionare l’altezza dell’esempio per vedere il tipo allungarsi:

Vedi il tipo Pen Sizing con unità vh di CSS-Tricks (@css-tricks) su CodePen.

vw Le unità sono diverse in quanto impostano l’altezza delle forme delle lettere per la larghezza della finestra, quindi nella demo qui sotto dovrete ridimensionare la finestra del browser orizzontalmente per vedere questi cambiamenti:

Vedi il tipo Pen Sizing con unità vw da CSS-Tricks (@css-tricks) su CodePen.

Queste unità sono supportate dai seguenti browser:

Chrome	Safari	Firefox	Opera	IE	Android	iOS
31+	7+	31+	27+	9+	4.4+	7.1+

È importante notare che ci sono altre due unità viewport: vmin e vmax. Il primo troverà i valori di vh e vw e imposterà il font-size come il più piccolo dei due mentre vmax imposta il font-size sul più grande di questi due valori.

L’unità ch

.element { font-size: 24ch;}

L’unità ch è simile all’unità ex in quanto imposta la dimensione del carattere di un elemento in relazione alla larghezza del glifo 0 (zero) del font:

Vedi il tipo Pen Sizing con unità ch di CSS-Tricks (@css-tricks) su CodePen.

Questa unità è supportata da:

Chrome	Safari	Firefox	Opera	IE	Android	iOS
27+	Lavoro	10+	Lavoro	9+	Lavoro	Lavoro

Proprietà correlate

• font
• font-famiglia
• font-stretch
• font-style
• font-variant
• font-weight