Proprietà font-size

La proprietà font-size imposta la dimensione del carattere del testo. I valori della proprietà sono qualsiasi unità per le dimensioni (di solito, sono px, em o rem) o parole chiave speciali (usate molto raramente).

Sintassi

selettore {
	font-size: valore;
}

Valori sotto forma di parole chiave

Valore	Descrizione
`xx-small`	Il più piccolo. Esempio: Lorem ipsum dolor sit amet.
`x-small`	Molto piccolo. Esempio: Lorem ipsum dolor sit amet.
`small`	Piccolo. Esempio: Lorem ipsum dolor sit amet.
`medium`	Medio. Esempio: Lorem ipsum dolor sit amet.
`large`	Grande. Esempio: Lorem ipsum dolor sit amet.
`x-large`	Molto grande. Esempio: Lorem ipsum dolor sit amet.
`xx-large`	Il più grande. Esempio: Lorem ipsum dolor sit amet.
`larger`	Più grande del carattere del genitore di un certo valore.
`smaller`	Più piccolo del carattere del genitore di un certo valore.

Valore predefinito: medium.

Esempio

Impostiamo la dimensione del carattere dei paragrafi a 20px:

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-size: 20px;
}

Esempio

In questo esempio, per il paragrafo è impostata una dimensione di 16px, e per lo span al suo interno - 150%. In questo caso la dimensione del carattere per lo span sarà il 150% del suo genitore, cioè del paragrafo, e la sua dimensione reale sarà 16px * 150% = 24px:

<p>
	Lorem <span>ipsum dolor</span> sit amet.
</p>

p {
	font-size: 16px;
}
span {
	font-size: 150%;
}

Esempio

In questo esempio, per il paragrafo è impostata una dimensione di 16px, e per il span al suo interno - larger. In questo caso la dimensione del carattere per il span sarà più grande di quella del suo genitore (il paragrafo):

<p>
	Lorem <span>ipsum dolor</span> sit amet.
</p>

p {
	font-size: 16px;
}
span {
	font-size: larger;
}

Esempio

Fare attenzione al fatto che caratteri con diversa font-family e stesso font-size visivamente possono essere di dimensioni completamente diverse (per risolvere questo problema vedere la proprietà font-size-adjust).

Nell'esempio seguente ad entrambi i paragrafi è impostato font-size a 16px, ma diversa font-family:

<p id="elem1">
	Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
	Lorem ipsum dolor sit amet.
</p>

#elem1 {
	font-size: 16px;
	font-family: Arial;
}
#elem2 {
	font-size: 16px;
	font-family: "Times New Roman";
}