Schritt 1: So legst du deine Basis Website Schriftgröße fest
Basis Schriftgröße ist dein Fließtext, in der Fachsprache ist es p, das steht für Paragraph. Jetzt weißt du in Zukunft auch was mit p gemeint ist ;-)
Schritt 1 ist also, dass du die Schriftgröße für deinen Fließtext p festlegst. Als Standard gilt hier für Desktop eine Größe zwischen 16px und 18px. Auf mobilen Geräten kannst du zum Beispiel 16px Pixeln wählen. Zu klein sollte es auf Mobile auch nicht werden, ich denke 15px wären noch ok aber kleiner würde ich nicht empfehlen.
Als nächstes wählst du jeweils für Desktop und Mobile einen Skaling Faktor aus.
Hier gibt es verschiedene Skaling Faktoren: Eine Website die ich dir empfehlen kann, um deinen perfekten Skaling Faktor zu finden ist Typescale. Dort kannst du verschiedene Faktoren einstellen und siehst direkt, wie es in einem Blogbeitrag oder auf einer Landingpage aussehen würde.
Typescale Website: Links oben kann man den Skalierungsfaktor ändern. In der Mitte sieht man eine Vorschau für alle Schriftgrößen mit der Skalierung. Und auf der rechten Seite eine Vorschau wie die Website Schriftgrößen auf einer Blogseite oder Landingpage aussehen würden. Spiele hier ein bischen herum und finde deine perfekten Schriftgrößen für jedes Gerät.
Bevor du deine Skalierung festlegst, überlege dir am besten auch, bis in welche Hierarchie du deine Überschriften verwenden willst. Brauchst du eine H5 und eine H6? Oft werden diese gar nicht benötigt, dann kannnst du diese auch weglassen und deine nächsthöhere Schriftgröße ist dann nach p direkt H4 und nicht H6 so wie du es auf Typescale siehst oder es in vielen anderen Beiträgen beschrieben ist.
Ich finde persönlich für Desktop einen Skalingfaktor von 1,25 optimal und für mobile 1,2. Notiere jetzt für deinen Fließtext und deine Überschriften H6 bis H1 oder H4 bis H1 die Größen. Diese kannst du auch direkt aus Typescale übernehmen. Damit hast du schon einen großen Teil geschafft!
Fazit: Die empfohlenen Schriftgröße für deine Website – Desktop und Mobile
Die empfohlene Schriftgröße für deine Website für Fließtext liegt bei 18px für Desktop und 16px für mobile Geräte. Überschriften werden mit einem festen Faktor größer oder kleiner skaliert.
Tipp: Teste deine Website regelmäßig auf verschiedenen Geräten und hole dir Feedback von echten Nutzern. So findest du die perfekte Schriftgröße für deine Website-Besucher und sorgst für eine konsistente, professionelle Darstellung.
Beispiele für Fließtext Schriftgrößen:
Dieser Text hat 14 Pixel Schriftgröße.
Dieser Text hat 16 Pixel Schriftgröße.
Dieser Text hat 18 Pixel Schriftgröße.
Dieser Text hat 20 Pixel Schriftgröße.
Schritt 2: Der Zeilenabstand im Zusammenhang mit der Website Schriftgröße
So legst du den richtigen Zeilenabstand für deinen Fließtext p fest
Für den Fließtext gilt: Je größer dein Text, umso größer sollte dein Zeilenabstand sein. Vergleiche selbst das folgende Beispiel: Welcher Zeilenabstand ist für die Lesbarkeit besser? Der ideale Zeilenabstand (line-height) Faktor für Fließtext mit 16 Pixel Schriftgröße liegt bei etwa 1.5 bis 1.7.
Warum genau dieser Abstand?
Beispiel:
* Faktor 1.5 bei einem Fließtext von 16px (entspricht ca. 24px): Der absolute Klassiker und ein guter Ausgangswert, der für eine entspannte Lesbarkeit sorgt.
Das ist ein Beispielabsatz mit Schriftgröße 16px und engem Zeilenabstand (1.2). Wie du siehst, wirkt der Text dicht gedrängt und könnte auf Dauer anstrengend zum Lesen sein. Besonders bei längeren Texten ist dieser Abstand nicht empfehlenswert.
* Faktor 1.6 bis 1.7 bei einem Fließtext von 16px: Noch etwas großzügiger und ideal für längere Texte, da es die Augen weniger anstrengt und mehr „Luft“ zwischen die Zeilen bringt.
Das ist ein Beispielabsatz mit Schriftgröße 16px und optimalem Zeilenabstand (1.6). Wie du merkst, lässt sich der Text viel angenehmer lesen, da die Zeilen genug Abstand voneinander haben. Gerade für längere Texte und Blogartikel sorgt das für eine angenehmere User Experience.
Mein persönlicher Favorit liegt meistens bei 1.6, weil er genau die goldene Mitte trifft:
angenehm, übersichtlich und super lesbar.
Berechnung: Pixel-Wert für line-height = Faktor × Schriftgröße in Pixel
So legst du den Zeilenabstand für deine Überschriften fest
Beim Zeilenabstand deiner Überschriften gilt das Motto: Weniger ist mehr! Während ein großzügiger Zeilenabstand bei Fließtexten für entspannte Lesbarkeit sorgt, wirken Überschriften mit einem kleineren Abstand deutlich prägnanter und professioneller. Überschriften sollen kompakt sein und auf den ersten Blick erfassbar. Ein idealer Zeilenabstand für Überschriften liegt deshalb meistens zwischen 1.1 und 1.3. Ist der Zeilenabstand zu groß, sieht deine Überschrift auseinandergezogen und weniger attraktiv aus. Die Folge: Dein Text wirkt unübersichtlich und verliert an Aussagekraft. Nutze daher für Überschriften immer einen kleineren Zeilenabstand als im normalen Fließtext.
Überschrift mit zu großem Zeilenabstand (1.6)
So wirkt die Überschrift auseinandergezogen und weniger ansprechend.
Überschrift mit optimalem Zeilenabstand (1.2)
So wirkt die Überschrift kompakt, klar und professionell.
Für deine Festlegung der richtigen Website Schriftgröße bedeutet das:
TIPP: Notiere dir deine definierten Schriftgrößen für Desktop und Mobile und die passenden Zeilengrößen dafür. Am besten erstmal in Pixeln. (In Schritt 3 kommt dann der entscheidenend Schritt, aber vorher noch ein kleiner Exkurs zu den Schriftgrößeneinheiten)
Exkurs: Was ist besser: Feste Pixelgrößen oder flexible Schriftgrößen (em/rem/clamp)?
Wenn du gerade deine Website gestaltest, stehst du vielleicht vor der Frage:
Welche Größeneinheit nehme ich? Soll ich feste Pixelgrößen verwenden oder lieber auf flexible Einheiten wie em, rem oder sogar clamp() setzen?
Spoiler: Flexibel gewinnt. Aber lass uns kurz die Unterschiede anschauen!
Feste Pixelgrößen (px) Vorteile und Nachteile:
Pixel sind die Oldschool-Variante im Webdesign:
16px bleiben 16px – egal, auf welchem Gerät. Das macht die Gestaltung vorhersehbar und einfach umzusetzen. Aber…
Der große Nachteil: Pixelgrößen sind null flexibel.
Sie reagieren nicht auf Browser-Einstellungen, wenn jemand eine größere Schrift für bessere Lesbarkeit braucht.
Auf kleinen Bildschirmen wirken sie oft gequetscht und passen sich auch nicht automatisch verschiedenen Viewport-Größen an.
Heißt im Klartext:
Menschen mit Sehbehinderung oder besonderen Bedürfnissen haben es schwerer, deine Inhalte zu lesen – und auch Google findet das nicht gerade sexy.
Flexible Schriftgrößen (em, rem, clamp)Vorteile und Anwendung:
em: Die Schriftgröße orientiert sich am Elternelement. Cool, aber bei vielen verschachtelten Containern kann’s kompliziert werden.
rem: Hier orientiert sich alles an der Basis-Schriftgröße des Dokuments (html-Tag). Mega für eine konsistente Typografie ohne Rechenakrobatik.
clamp(): Der absolute Gamechanger!
Mit clamp() kannst du eine Schriftgröße flexibel zwischen einem Minimal- und Maximalwert skalieren – je nachdem, wie breit der Bildschirm ist. Und das ganz ohne nervige Media Queries!
Beispiel für clamp():
font-size: clamp(1rem, 0.827rem + 0.769vw, 1.75rem);
Was bedeutet das?
Die Schriftgröße passt sich automatisch zwischen ca. 16px und 28px an – je nachdem, wie groß der Viewport ist.
Stufenlos. Easy. Einfach schöner. In meinem Clamp Rechner gibst du die Größe in px ein bekommst als Ergebnis ein Clamp mit flexibler Größe ausgespuckt. Praktisch oder?
Vergleich: Feste Pixelgrößen vs. Flexible Schriftgrößen
Fazit: Was ist besser?
Kurze Antwort:
Willst du eine moderne, responsive und barrierefreie Website, dann setze auf flexible Schriftgrößen mit rem oder noch besser mit clamp().
- Deine Website bleibt auf allen Geräten top lesbar.
- Nutzer*innen können ihre Browser-Einstellungen anpassen.
- Du punktest bei Google mit besserer User Experience (und damit besserem SEO-Ranking!)
Pixelgrößen solltest du nur noch in Ausnahmefällen verwenden – z.B. für sehr kleine Designelemente wie Icons oder Buttons, die immer gleich aussehen sollen.
Extra-Tipp für deine Schriftgrößen-Planung:
Willst du ganz easy deine eigenen clamp()-Werte erstellen?
Dann schau mal bei meinem praktischen Clamp-Rechner vorbei!
Damit bastelst du dir perfekte, fließende Schriftgrößen für jede Bildschirmgröße – in wenigen Sekunden!
Schau dir gerne auch noch mein Youtube Video dafür an. Dann weiß du auch gleich wie du den Generator verwenden kannst.
