Systemschriften

TL;DR

Systemschriften sind vorinstallierte Fonts wie Arial oder San Francisco. Ihre Nutzung spart HTTP-Requests komplett und reduziert Ladezeit auf nahezu null – ohne Kompromisse bei der Lesbarkeit.

Was sind Systemschriften?

Systemschriften (System Fonts) sind Schriftarten, die bereits auf dem Betriebssystem des Nutzers installiert sind. Sie müssen nicht heruntergeladen werden – null Bytes Datentransfer, sofortige Darstellung.

Der System Font Stack

Ein typischer System Font Stack:

  • -apple-system: San Francisco (macOS/iOS)
  • BlinkMacSystemFont: Chrome auf Mac
  • Segoe UI: Windows
  • Roboto: Android
  • Ubuntu: Ubuntu Linux
  • sans-serif: Fallback

Vorteile von Systemschriften

  • Null HTTP-Requests: Keine Fonts laden
  • Sofortige Darstellung: Kein FOUT (Flash of Unstyled Text)
  • Native Look: Passt zum Betriebssystem
  • Maximale Performance: Bester LCP möglich

Nachteile

  • Weniger Kontrolle über Branding
  • Unterschiedliches Aussehen auf verschiedenen Systemen
  • Eingeschränkte typografische Möglichkeiten

Wann Systemschriften sinnvoll sind

  • Content-fokussierte Websites
  • Dokumentation und Tools
  • Performance-kritische Anwendungen
  • Websites mit strengem Nachhaltigkeitsfokus

Systemschriften und Nachhaltigkeit

Aus Nachhaltigkeitssicht sind Systemschriften ideal:

  • Null Datentransfer für Fonts
  • Keine Server-Last
  • Schnellstmöglicher Seitenaufbau

Fazit

Systemschriften sind die nachhaltigste Option für Web-Typografie. Sie opfern etwas Markenidentität für maximale Performance. Für viele Projekte ist das der richtige Trade-off.

Mehr aus dem Glossar

Geändert am:
15.12.2025

Typografie

Schriftauswahl und -anordnung. Systemfonts oder Variable Fonts minimieren HTTP-Requests und verbessern Ladezeit.
Typografie
Geändert am:
15.12.2025

Variable Fonts

Mehrere Schriftschnitte in einer Datei. Spart Requests und oft 50–70% Font-Bytes bei mehr typografischer Flexibilität.
Variable Fonts
Mein Beitrag
für die Umwelt

Mein Beitrag für nachhaltiges Webdesign – Erfahre mehr darüber, wie meine digitalen Angeboteumweltfreundlich gestaltet sind und welche nachhaltigen Praktiken ich umsetzte.

Meine nachhaltigen Praktiken