CSS Grundlagen: Font-Size für Einsteiger – Entdecke die Grundlagen und werde zum Experten

Schriftgröße festlegen: CSS Eigenschaft Font-Size

Die CSS-Eigenschaft font-size wird verwendet, um die Größe der Schrift zu definieren. Zur Definition der Schriftgröße stehen verschiedene absolute und relative CSS-Einheiten zur Verfügung. Abgesehen von px spielen absolute Einheiten im Web-Design keine Rolle. Sie sind nur fürs Drucken relevant.

Die Angabe in oranger Schrift ist die Standardanwendung der CSS-Eigenschaft font-size.

1. Standardmäßig wird die Schriftgröße als Zahl mit angehängter Einheit (ohne Leerzeichen) oder in Prozent angegeben, z.B. 15px, 1em oder 95%. Zahlen mit Dezimalstellen müssen mit dem englischen Dezimalpunkt angegeben werden, z.B. 0.9em.

2. Alternativ zur numerischen Angabe der Schriftgröße können auch Schlüsselwörter für eine absolute oder relative Schriftgröße verwendet werden:

   absolute Schriftgröße
   xx-small	winzig	9px
   x-small	sehr klein	10px
   small	klein	13px
   medium	mittel	16px
   large	groß	19px
   x-large	sehr groß	24px
   xx-large	riesig	32px
   relative Schriftgröße
   larger	größer als im Eltern-Element
   smalle	kleiner als im Eltern-Element

   Die Schriftgräße font-size: medium ist der Standard.

   Bei font-size: larger gilt:
   Hat das übergeodnete Element z.B. die Schriftgröße medium, dann bekommt das aktuelle Element die Schriftgröße large.

   Und bei font-size: smaller gilt:
   Hat das übergeodnete Element z.B. die Schriftgröße medium, dann bekommt das aktuelle Element die Schriftgröße small.

3. Die Grundeinstellung der Standard-Schriftgröße bei den meisten Browsern ist 16px, was 1em entspricht. Diese Einstellung kann in den Browser-Einstellungen individuell angepasst werden. Der dort eingestellte Wert entspricht immer 1em.

4. Für barrierefreie Webseiten ist eine skalierbare Schriftgröße notwendig. Die Schriftgröße in em oder Prozent ist skalierbar. Die Schriftgröße in px sollte man deshalb vermeiden.

5. Die Schriftgröße (font-size) wird vererbt. Bei einer relativen Angabe für ein konkretes HTML-Element multiplizieren sich die Werte, wenn gleiche Elemente ineinander geschachtelt werden.

6. initial erzwingt die Wiederherstellung der ursprünglichen Schriftgröße, d.h. der Wert initial stellt für die Eigenschaft font-size die Standard Schriftgröße ein.

7. inherit erzwingt die Vererbung der Schriftgröße vom Elternelement.

8. Die Eigenschaft font-size wird vererbt.

body {
  /* Schrift 10% größer als Standard */
  font-size: 1.1em;
}