Eigenschap font-size

De eigenschap font-size stelt de grootte van het lettertype in. De waarde van de eigenschap zijn alle eenheden voor afmetingen (meestal zijn dit px, em of rem) of speciale sleutelwoorden (worden zeer zelden gebruikt).

Syntaxis

selector {
	font-size: waarde;
}

Waarden als sleutelwoorden

Waarde	Beschrijving
`xx-small`	Heel heel klein. Voorbeeld: Lorem ipsum dolor sit amet.
`x-small`	Heel klein. Voorbeeld: Lorem ipsum dolor sit amet.
`small`	Klein. Voorbeeld: Lorem ipsum dolor sit amet.
`medium`	Gemiddeld. Voorbeeld: Lorem ipsum dolor sit amet.
`large`	Groot. Voorbeeld: Lorem ipsum dolor sit amet.
`x-large`	Zeer groot. Voorbeeld: Lorem ipsum dolor sit amet.
`xx-large`	Heel groot. Voorbeeld: Lorem ipsum dolor sit amet.
`larger`	Groter dan het lettertype van de ouder met een bepaalde waarde.
`smaller`	Kleiner dan het lettertype van de ouder met een bepaalde waarde.

Standaardwaarde: medium.

Voorbeeld

Laten we de lettergrootte voor alinea's instellen op 20px:

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

p {
	font-size: 20px;
}

Voorbeeld

In dit voorbeeld is voor de alinea een grootte van 16px ingesteld, en voor de span erin - 150%. In dit geval zal de lettergrootte voor de span 150% van zijn ouder zijn, d.w.z. de alinea, en de werkelijke grootte zal 16px * 150% = 24px zijn:

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

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

Voorbeeld

In dit voorbeeld is voor de alinea een grootte van 16px ingesteld, en voor de span erin - larger. In dit geval zal de lettergrootte voor de span groter zijn dan die van zijn ouder (de alinea):

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

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

Voorbeeld

Let op het feit dat lettertypen met een andere font-family en dezelfde font-size visueel helemaal niet even groot kunnen zijn (voor de oplossing van dit probleem, zie de eigenschap font-size-adjust).

In het onderstaande voorbeeld is voor beide alinea's een font-size van 16px ingesteld, maar verschillende 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";
}