Schriftgröße Webseite: Die richtigen Größen für Desktop und Mobil

Die kurze Antwort: Für den Fließtext einer Webseite sind 16 px das Minimum, auf dem Desktop oft 18 px. Auch auf dem Smartphone solltest du nicht unter 16 px gehen. Überschriften wählst du je nach Ebene deutlich größer, am besten mit einer festen Skala statt nach Gefühl. Die konkreten Werte findest du gleich in der Übersicht.

Egal ob auf Desktop oder deinem Smartphone – Responsive Typografie im Webdesign passt sich jeder Bildschirmgröße an und verbessert so die Lesbarkeit und Ästhetik von Webseiten. Typografie ist ein Hauptbestandteil jeder Website. Über Texte erfahren User wichtige Informationen über dein Unternehmen oder Produkt. In diesem Basic-Guide erfährst du, wie du die richtige Schriftart auswählst, welche Schriftgrößen für Desktop und Smartphone funktionieren und wie du Typografie in Webflow umsetzt.

‍

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

‍

Welche Schriftgröße-Einheit ist die richtige?

Im Webdesign gibt es verschiedene Einheiten, mit denen Schriftgrößen festgelegt werden. Die wichtigsten sind Pixel (px), em und rem. Auf den ersten Blick klingt das kompliziert. Dahinter steckt aber eine simple Frage: Soll die Schrift immer gleich groß sein, oder soll sie sich automatisch an den Browser und das Gerät des Nutzers anpassen?

Pixel (px) – die feste Einheit

Pixel ist die bekannteste Einheit. 16px sind immer 16px, egal auf welchem Gerät. Das klingt praktisch, hat aber einen Nachteil: Wer in seinem Browser eine größere Schriftgröße eingestellt hat, weil er schlechter sieht, bekommt trotzdem die festgelegte Pixelgröße. Für einfache Projekte und beim Designen in Tools wie Figma ist Pixel trotzdem die übliche Arbeitseinheit.

‍

rem – die flexible Einheit (empfohlen für Webprojekte)

rem steht für „Root em" und bedeutet: Die Schriftgröße richtet sich nach der Basisgröße des Browsers. Die meisten Browser haben eine Standardgröße von 16px. 1rem entspricht also 16px. 2rem entsprechen 32px. Der entscheidende Vorteil: Hat ein Nutzer in seinem Browser eine größere Schrift eingestellt, skaliert alles mit. Das macht Websites barrierefreier und nutzerfreundlicher. Für Webprojekte ist rem die empfohlene Einheit.

‍

em – die kontextabhängige Einheit

em verhält sich ähnlich wie rem, bezieht sich aber nicht auf den Browser, sondern auf das übergeordnete Element. Das kann praktisch sein, macht aber schnell Fehler, wenn Elemente verschachtelt sind, da sich die Größen gegenseitig multiplizieren. Für Einsteiger ist em weniger gut geeignet.

‍

‍

Empfohlene Schriftgrößen im Überblick

Diese Werte sind Orientierung und keine feste Norm. Sie funktionieren für die meisten Websites und lassen sich an deine Schrift anpassen:

• Fließtext: Desktop 16 bis 18 px (1 bis 1,125 rem), Smartphone 16 px (1 rem)
• Kleiner Text (Bildunterschriften, Hinweise): 14 px (0,875 rem) auf beiden Geräten
• H4 / kleine Zwischenüberschrift: Desktop 20 px (1,25 rem), Smartphone 18 px (1,125 rem)
• H3: Desktop 24 bis 28 px (1,5 bis 1,75 rem), Smartphone 20 bis 24 px (1,25 bis 1,5 rem)
• H2: Desktop 36 bis 40 px (2,25 bis 2,5 rem), Smartphone 28 bis 32 px (1,75 bis 2 rem)
• H1: Desktop 48 bis 64 px (3 bis 4 rem), Smartphone 32 bis 40 px (2 bis 2,5 rem)

Wie du auf diese Werte kommst und warum Fließtext nie unter 16 px liegen sollte, erkläre ich in den folgenden Abschnitten.

‍

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 Websites 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:
Überschriften sollten sich deutlich vom Fließtext abheben. Eine bewährte Methode ist eine feste Skala: Jede Überschriftenebene ist um denselben Faktor größer als die darunterliegende, zum Beispiel um den Faktor 1,25. Bei 16px Fließtext ergibt das etwa 20px, 25px, 31px und 39px für die Ebenen H4 bis H1. Im typischen Einsatz auf Websites von H1 (größte Überschrift) bis H6 (kleinste Überschrift) können Überschriften je nach Design auch deutlich größer ausfallen, wie die Übersicht oben zeigt.  

‍

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 mindestens 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. 

‍

Schriftgrößen in Webflow umsetzen

In Webflow legst du die Schriftgrößen im Style-Panel unter „Typography" fest. So gehst du am besten vor:

• Arbeite mit rem statt px, damit sich die Größen an die Browser-Einstellung der Nutzer anpassen.
• Lege die Größen für den Desktop fest und überschreibe sie für Tablet und Smartphone mit den Breakpoints.
• Für eine fließende Skalierung trägst du in das Größenfeld eine clamp()-Funktion ein, zum Beispiel clamp(1rem, 0.9rem + 0.5vw, 1.125rem) für den Fließtext oder clamp(2rem, 1.2rem + 3vw, 4rem) für die H1. Die Schrift wächst dann stufenlos von 16 auf 18 px beziehungsweise von 32 auf 64 px.
• Verwende Klassen für Überschriften und Texte, statt Größen an einzelnen Elementen zu überschreiben. So änderst du später alles an einer Stelle.

Die passenden clamp()-Werte kannst du dir mit einem Rechner wie Utopia berechnen lassen.

‍

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.

Zeilenlänge

Die Zeilenlänge, also die Anzahl der Zeichen pro Zeile, 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 Zeilenlänge von ca. 70 bis 80 Zeichen und eine minimale Zeilenlänge von ca. 35 bis 45 Zeichen empfohlen.

Zeilenabstand

Neben der Größe entscheidet der Zeilenabstand über die Lesbarkeit. Für Fließtext funktionieren Werte zwischen 1,4 und 1,6 gut, bei großen Überschriften darf er enger sein (etwa 1,1 bis 1,3). Auf dem Smartphone lohnt sich eher etwas mehr Luft, damit der Text nicht gedrängt wirkt.

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. 

Als Orientierung empfehlen die Web-Richtlinien (WCAG) ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für große Schrift. Zusätzlich sollte sich der Text im Browser auf 200 Prozent vergrößern lassen, ohne dass Inhalte verloren gehen. Mehr dazu findest du im Artikel zur barrierefreien Website.

Halte die Anzahl der verwendeten Schriften möglichst gering

Durch den Einsatz von zu vielen verschiedenen Schriftarten wirkt eine Website sehr schnell unstrukturiert und unprofessionell. 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. Ideen dazu findest du bei den Schriftkombinationen und den besten Google Fonts. Wenn du Google Fonts nutzt, solltest du sie lokal einbinden. 

‍

Du planst gerade eine neue Website und fragst dich, wie du Typografie für dein Projekt am besten umsetzt? Als Webdesign-Freelancer helfe ich dir dabei, von Anfang an die richtigen Entscheidungen zu treffen.