Egenskapen font-size

Egenskapen font-size ställer in storleken på textens teckensnitt. Värdet på egenskapen är vilka enheter för storlekar som helst (vanligtvis är det px, em eller rem) eller speciella nyckelord (används extremt sällan).

Syntax

selektor {
	font-size: värde;
}

Värden i form av nyckelord

Värde	Beskrivning
`xx-small`	Allra allra minst. Exempel: Lorem ipsum dolor sit amet.
`x-small`	Allra minst. Exempel: Lorem ipsum dolor sit amet.
`small`	Liten. Exempel: Lorem ipsum dolor sit amet.
`medium`	Mellan. Exempel: Lorem ipsum dolor sit amet.
`large`	Stor. Exempel: Lorem ipsum dolor sit amet.
`x-large`	Väldigt stor. Exempel: Lorem ipsum dolor sit amet.
`xx-large`	Allra störst. Exempel: Lorem ipsum dolor sit amet.
`larger`	Större än förälderns teckenstorlek med ett visst värde.
`smaller`	Mindre än förälderns teckenstorlek med ett visst värde.

Standardvärde: medium.

Exempel

Låt oss ställa in styckens teckenstorlek till 20px:

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

p {
	font-size: 20px;
}

Exempel

I detta exempel har stycket en storlek på 16px, och för span inuti det - 150%. I detta fall kommer teckenstorleken för span att vara 150% av sin förälder, dvs. stycket, och dess faktiska storlek kommer att vara 16px * 150% = 24px:

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

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

Exempel

I detta exempel har stycket en storlek på 16px, och för span inuti det - larger. I detta fall kommer teckenstorleken för span att vara större än för dess förälder (stycket):

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

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

Exempel

Var uppmärksam på att teckensnitt med olika font-family och samma font-size visuellt kan vara av helt olika storlek (för att lösa detta problem, se egenskapen font-size-adjust).

I exemplet nedan har båda styckena font-size satt till 16px, men olika 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";
}