Schriftgröße in CSS mit font-size festlegen

Auf Websites zählen Texte zu den am meisten verwendeten Inhalten, die mit unterschiedlichen Schriftgrößen versehen werden können. Falls keine Schriftgröße festgelegt wurde, gelten die Standardgrößen des Browsers. Die Schwierigkeit hierbei besteht darin, dass es unterschiedliche Display-Größen und Auflösungen gibt. Durch die Verbreitung von internetfähigen Mobilgeräten wurde die Vielfalt sogar erhöht. Daher gilt generell, dass man absolute Längenangaben eher vermeiden und auf relative Längenangaben setzen sollte.

Die Schriftgröße beschreibt die Höhe eines Buchstabens. Die Zeilenhöhe zählt nicht zur Schriftgröße und kann separat mit line-height angegeben werden. Sie hat jedoch einen Einfluss auf die Abstände zwischen den Zeilen. Auf der folgenden Abbildung sind die einzelnen Bestandteile einer Schrift dargestellt.

Schriftgröße und andere Schriftbestandteile

Um den Texten eine Schriftgröße zuzuweisen, wird in CSS die Eigenschaft font-size verwendet. Auf dem folgenden Bild ist ein Beispiel, bei dem die Schriftgröße auf 16px gesetzt wird.

CSS-Code mit font-size

Werte für font-size

Bei der Angabe von Werten hat man viele Möglichkeiten. Auf jeden Fall sollte man die Einstellung auf verschiedenen Monitoren mit verschiedenen Auflösungen testen. Bei den Entwicklern werden tendenziell relative Angaben wie px, em oder rem favorisiert, um den unterschiedlichen Geräten und Auflösungen gerecht zu werden.

Numerische Werte mit Einheit

  • <Zahl>px (Pixel)
  • <Zahl>% (Prozentuale Angabe, bezieht sich auf die Schriftgröße des Elternelement)
  • <Zahl>em (relative Schriftgröße des Elternelements, beginnend vom Standard des Geräts)
  • <Zahl>rem (1rem entspricht der Größe, die für das Wurzelelement html gilt)
  • <Zahl>ex (1ex entspricht der Größe des Kleinbuchstabens x, falls es definiert wurde, ansonsten 0.5em)
  • <Zahl>ch (1ch entspricht der Breite der Ziffer 0, falls es definiert wurde, ansonsten Durchschnittsbreite aller Zeichen)
  • <Zahl>vw (1vw entspricht 1% der Anzeigebreite)
  • <Zahl>vh (1vh entspricht 1% der Anzeigehöhe)
  • <Zahl>vmin (der kleinere Wert von vw oder vh)
  • <Zahl>vmax (der größere Wert von vw oder vh)
  • <Zahl>pt (Punkt)
  • <Zahl>pc (Pica)
  • <Zahl>in (Inch)
  • <Zahl>mm (Millimeter)
  • <Zahl>cm (Zentimeter)

Keyword-Werte

  • medium
  • small
  • x-small
  • xx-small
  • large
  • x-large
  • xx-large
  • smaller
  • larger
  • initial
  • inherit

Nachfolgend ist ein Beispielcode sowie die Abbildung von der Darstellung im Browser.

.selektor1 {
font-size: 14px;
}

.selektor2 {
font-size: 100%;
}

.selektor3 {
font-size: 1em;
}

.selektor4 {
font-size: 1rem;
}

.selektor5 {
font-size: 2ex;
}

.selektor6 {
font-size: 2vw;
}

.selektor7 {
font-size: 2vh;
}

.selektor8 {
font-size: 2vmin;
}

.selektor9 {
font-size: 2vmax;
}

.selektor10 {
font-size: 12pt;
}

.selektor11 {
font-size: 1pc;
}

.selektor12 {
font-size: 0.2in;
}

.selektor13 {
font-size: 5mm;
}

.selektor14 {
font-size: 0.5cm;
}

p {
margin: 2px;
padding: 5px;
width: 300px;
height: 50px;
line-height: 50px;
border: 1px solid #001055;
}
<p>Text in Normalschrift</p>
<p class="selektor1">Text mit font-size: 14px;</p>
<p class="selektor2">Text mit font-size: 100%;</p>
<p class="selektor3">Text mit font-size: 1em;</p>
<p class="selektor4">Text mit font-size: 1rem;</p>
<p class="selektor5">Text mit font-size: 2ex;</p>
<p class="selektor6">Text mit font-size: 2vw;</p>
<p class="selektor7">Text mit font-size: 2vh;</p>
<p class="selektor8">Text mit font-size: 2vmin;</p>
<p class="selektor9">Text mit font-size: 2vmax;</p>
<p class="selektor10">Text mit font-size: 12pt;</p>
<p class="selektor11">Text mit font-size: 1pc;</p>
<p class="selektor12">Text mit font-size: 0.2in;</p>
<p class="selektor13">Text mit font-size: 5mm;</p>
<p class="selektor14">Text mit font-size: 0.5cm;</p>
Beispiel mit verschiedenen Schriftgrößen

Die Darstellung kann unter anderen Bedingungen davon abweichen.