TYPOGRAFIE, WEBSITE

Basic Guide: Responsive Typografie im Webdesign

Ein zerknittertes schwarzes Papier mit Typografie auf hellblauem Hintergrund.
September 15, 2021
Max. Lesedauer: 5 Minuten

Die Typografie ist ein Hauptbestandteil deiner Website. Über Texte erfahren Leser wichtige Informationen und Fakten zu deinem Unternehmen. Neben der Auswahl der richtigen Schriftart, sollte auch die Schriftgröße für jedes Gerät passend optimiert sein. Dadurch hilft man Nutzern, die Inhalte bestmöglich aufzunehmen.

Die Auswahl der richtigen Schriftart

Die richtige Schriftart kann als eigenes Stilelement funktionieren und deiner Website eine professionelle Ästhetik verleihen. Ebenso kann eine gut ausgewählte Schriftart die Lesbarkeit deiner Website verbessern und so zu einer positiven User-Experience beitragen. 

Bei der Suche nach der passenden Schrift sollte die Lesbarkeit im Fokus stehen. Dadurch garantiert man eine optimale Darstellung auf unterschiedlichsten Geräten wie z.B. Laptops, Tablets, Smartphones oder Smartwatches. 

Folgende Faktoren sollten bei der Wahl der Schriftart beachtet werden:

  • Lesbarkeit der Schrift
  • Zielmedium Web oder Print
  • Schrift als Stilelement des Branding
  • Skalierbarkeit der Schrift
Comparison of two font choices.

Schriftgrößen im Webdesign

Um die richtige Größe für seine Schrift zu wählen, sollte man zunächst wissen, mit welchen Maßeinheiten die Größe festgelegt werden kann. Grundsätzlich gibt es 2 Unterscheidungen: Absolute und relative Maßeinheiten.

Absolute Maßeinheiten:

  • Pixel (px)
  • Punkt (pt)
  • Zentimeter (cm)
  • Millimeter (mm)

Relative Maßeinheiten: 

  • em: Die Schriftgröße ist relativ zur Schriftgröße des übergeordneten Containers.
  • rem: Die Schriftgröße ist relativ zur Schriftgröße des höchsten Elements (root Element).
  • Prozentsatz (%)
  • vw oder vh: Breite oder Höhe des Viewports

Wie der Name schon sagt, verhalten sich absolute Maßeinheiten immer gleich, egal was um sie herum passiert. Was aber gleichzeitig auch ihr Nachteil ist. Bei den absoluten Maßeinheiten sind Pixel die gängige Praxis, da die meisten Webbrowser für die Verwendung von Pixel ausgelegt sind. Es ist allerdings eine sehr einfach zu verwendende Maßeinheit und viele Designteams entwerfen ihre Layouts in Pixel. 

Der Vorteil von relativen Maßeinheiten ist, dass sie sich immer entsprechend der Bildschirmgröße passend skalieren. Ebenso können User die Standardschriftgröße ihres Browsers ändern und die Schriften würden sich automatisch mit anpassen. Allerdings muss man bei der Umrechnung etwas mitdenken. 

Beispiel Umrechnung von Pixel zu em

Optimale Schriftgrößen für Desktop

Im Webdesign gibt es keine exakte Regeln für Schriftgrößen. Allerdings gibt es so etwas wie etablierte Standards, an denen man sich orientieren kann.   

Fließtext:
Bei den meisten Browsern hat sich für Fließtexte eine Größe von 16px etabliert. Viele Websiten gehen sogar bis 18px oder 21px um eine gute Lesbarkeit zu garantieren. Unter 16px sollte die Schriftgröße aber nie liegen. 

Zwischenüberschriften:
Diese sollten etwas größer als der Fließtext sein um einen Kontrast zu erzeugen. Oft beginnen diese bei 21px. Manchmal wird für Zwischenüberschriften auch nur ein anderer Schriftschnitt verwendet, um sich vom Fließtext abzuheben.

Überschriften:
Grundsätzlich sollten Überschriften 1,96-mal größer sein als der Fließtext um sich deutlich abzuheben. Bei einer Schriftgröße von 16px wäre das beispielsweise eine Überschriftgröße von 31px. Im typischen Einsatz auf Websiten von H1 (größte Überschrift) bis H6 (kleinste Überschrift) können Überschriften ganz unterschiedliche Größen annehmen.  

Example font sizes for desktop designs.

Optimale Schriftgrößen für Smartphones

Da man auf Smartphones weniger Platz zur Verfügung hat, ist die Schrift in der Regel kleiner als auf dem Desktop. 

Fließtext:
Obwohl die Schriftgröße bei Smartphones kleiner ist, sollte der Fließtext auch hier mindestens eine Größe von 16px haben. Bei besonders großlaufenden Schriftarten oder in einigen Ausnahmen könnte man noch auf 14px Größe runtergehen. Weniger ist aber nicht zu empfehlen.

Zwischenüberschriften:
Oft werden Zwischenüberschriften auf mobilen Geräten soweit verkleinert, dass sie so groß wie der Fließtext sind. In diesem Fall verwendet man oft Schriftformatierungen um einen visuellen Unterschied zu erreichen. Bei einer Fließtext Größe von 16px könnten Zwischenüberschriften also Beispielsweise eine Größe von 16px oder 18px annehmen. 

Überschriften:
Diese sollten auf Smartphones etwa etwa 1,3-mal größer sein als der Fließtext. Bei einer Schriftgröße von 16px bräuchte man also mindestens 21px um einen ausreichenden Unterschied zu erzeugen. Nach oben sind theoretisch keine Grenzen gesetzt, allerdings sieht es merkwürdig aus wenn eine einzige Überschrift den kompletten Bereich des Viewports einnimmt. 

Example font sizes for smartphone designs.

Weitere Tipps für Typografie im Webdesign

Ausrichtung und Ausreichende Abstände

Eine linksbündige Ausrichtung der Texte ist immer eine gute Wahl, da es der natürlichen Leserichtung entspricht und für den Nutzer am einfachsten zu erfassen ist. Eine zentrierte oder rechtsbündige Ausrichtung ist möglich, wenn es zum Layout passt und dieses dadurch visuell verstärkt. 

Ausreichender Weißraum und Abstände sind ebenso wichtig für die Lesbarkeit von Texten. Bei den meisten Desktops und Laptops hat man die Möglichkeit die Seitenränder großzügiger zu gestalten, während man bei schmaleren Bildschirmen wie Smartphones die Seitenränder natürlich kleiner gestalten muss.

Desktop and smartphone web design distance comparison.

Zeichenlänge

Die Zeichenlänge von Texten sollte allgemein nicht zu weit laufen, da das menschliche Auge sonst Probleme hat, den Anfang der nächsten Textzeile zu fokussieren. Daher wird für alle Bildschirme eine maximale Zeichenlänge von ca. 70-80 Zeichen und eine minimale Zeichenlänge von ca. 35-45 Zeichen empfohlen.

Design example of font character lengths.

Achte auf einen ausreichenden Kontrast

Ein weiterer wichtiger Punkt der bei Typografie eine Rolle spielt ist der Kontrast. Achte immer darauf, dass der Farbkontrast von deinen Texten zum Hintergrund groß genug ist. Ein ausreichender Kontrast erhöht die Lesbarkeit der Texte, da es dem Auge leichter fällt das Gelesene zu erfassen. Dadurch erhöht sich die Chance, dass Nutzer mehr Inhalte auf deiner Website tatsächlich lesen. 

Contrast comparison of 2 fonts.

Halte die Anzahl der verwendeten Schriften möglichst gering

Durch den Einsatz von zu vielen verschiedenen Schriftarten wirkt eine Website sehr schnell unstrukturiert und umprofessionell. Daher sollte man die Grundregel beachten und nie mehr als 3 unterschiedliche Schriftarten auf einer Website verwenden. 

Eine Schriftart konsistent zu verwenden ist immer eine gute Idee. Oft ergänzen sich 2 verschiedene Schriftarten auch gegenseitig in ihrer Wirkung und verleihen einer Website einen besonderen Look. 

Hier findest du einen interessanten Artikel über "Einfache Tipps für den effektiven Einsatz von Bildern im Webdesign".

WEITERE
BLOGBEITRÄGE
Fashion Appereal Landingpage
Workout App Landingpage Design
Website Design von einer Drone mit verschiedenen Ansichten.
Verschiedene Personen mit Brillen.