Egenskapen font-size

Egenskapen font-size setter skriftstørrelsen på teksten. Verdien til egenskapen er enhver enhet for størrelser (som regel px, em eller rem) eller spesielle nøkkelord (brukes svært sjelden).

Syntaks

velger {
	font-size: verdi;
}

Verdier i form av nøkkelord

Verdi	Beskrivelse
`xx-small`	Den aller minste. Eksempel: Lorem ipsum dolor sit amet.
`x-small`	Den minste. Eksempel: Lorem ipsum dolor sit amet.
`small`	Liten. Eksempel: Lorem ipsum dolor sit amet.
`medium`	Middels. Eksempel: Lorem ipsum dolor sit amet.
`large`	Stor. Eksempel: Lorem ipsum dolor sit amet.
`x-large`	Veldig stor. Eksempel: Lorem ipsum dolor sit amet.
`xx-large`	Den største. Eksempel: Lorem ipsum dolor sit amet.
`larger`	Større enn forelderens skriftstørrelse med en viss verdi.
`smaller`	Mindre enn forelderens skriftstørrelse med en viss verdi.

Standardverdi: medium.

Eksempel

La oss sette skriftstørrelsen for avsnitt til 20px:

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

p {
	font-size: 20px;
}

Eksempel

I dette eksemplet er størrelsen for avsnittet satt til 16px, og for span inni det - 150%. I dette tilfellet vil skriftstørrelsen for span være 150% av sin forelder, dvs. avsnittet, og dens faktiske størrelse vil være 16px * 150% = 24px:

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

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

Eksempel

I dette eksemplet er størrelsen for avsnittet satt til 16px, og for span inni det - larger. I dette tilfellet vil skriftstørrelsen for span være større enn forelderens (avsnittet):

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

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

Eksempel

Vær oppmerksom på at skrifter med forskjellig font-family og samme font-size visuelt kan være helt forskjellige i størrelse (for å løse dette problemet, se egenskapen font-size-adjust).

I eksemplet nedenfor er font-size satt til 16px for begge avsnitt, men forskjellig 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";
}