CSS Grundlagen: Font-Size richtig einstellen – In einfachen Schritten die ideale Schriftgröße festlegen

English

CSS Eigenschaft Font-Size – Schriftgröße festlegen

Mit der CSS-Eigenschaft font-size wird die Schriftgröße definiert. Um die Schriftgröße zu definieren, stehen verschiedene absolute und relative CSS-Einheiten zur Verfügung. Außer px spielen absolute Maßeinheiten aber im Web-Design keine Rolle. Sie sind nur zum Drucken sinnvoll.

CSS-Eigenschaft: Font-Size
Beschreibung mögliche Werte Standardwert Kategorie
Schriftgröße absolute oder relative Schriftgröße
Schriftgröße in Prozent

weitere Keywords für font-size
xx-small
x-small
small
medium
large
x-large
xx-large
larger
smaller
initial
inherit		 medium Schriften
Fonts

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

Beachte:

  1. Die Standardangabe der Schriftgröße ist eine Zahl mit angehängter Maßeinheit (z.B. 15px, 0.95em, 11pt) oder in Prozent (z.B. 95%).

  2. Alternativ zu der numerischen Angabe der Schriftgröße sind auch Schlüsselwörter für eine absolute oder relative Schriftgröße möglich.

    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.

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