Du sitzt an deiner Website und denkst:
Irgendwie sieht der Text noch nicht so professionell aus.
Die Farben passen, das Layout steht – und trotzdem wirkt alles ein bisschen… naja.
Oft liegt das an einer überraschend einfachen Sache: der Schriftgröße.
Vielleicht ist dir schon einmal aufgefallen, dass Texte auf dem Bildschirm anders aussehen als auf Papier. Oder du bist über Begriffe wie „rem“, „em“ und „px“ gestolpert und fragst dich, was davon wirklich wichtig ist. Keine Sorge – du bist nicht allein! In diesem Artikel werfen wir einen Blick auf die Grundlagen der Bildschirmtypografie und zeigen dir, wie du die richtige Schriftgröße für deine Website wählst, ohne dabei den Überblick zu verlieren.
Kurz gesagt:
Für die meisten Websites funktioniert eine Schriftgröße zwischen 16 und 20 px für Fließtext am besten.
18 px ist ein sehr guter Ausgangspunkt.
Die richtige Schriftgröße entscheidet darüber, ob deine Besucher:innen deinen Content gerne lesen oder schnell wieder wegklicken. Zu kleine Schrift strengt die Augen an und lässt Leser:innen schnell ermüden, während eine zu große Schrift unübersichtlich wirkt und weniger professionell aussieht.
Mehr als die Hälfte aller Website-Besucher:innen nutzen heute ihr Smartphone. Was auf deinem Laptop gut aussieht, kann auf dem kleinen Display völlig anders wirken.
Mit der richtigen Schriftgröße sorgst du nicht nur dafür, dass deine Texte leicht zu lesen sind – du gibst deiner Website auch den perfekten, professionellen Look, der Vertrauen schafft und die Menschen länger auf der Seite hält.
P = 18 px (Fließtext)
H4 = 23 px
H3 = 30 px
H2 = 39 px
H1 = 51 px
P = 16 px
H4 = 19 px
H3 = 23 px
H2 = 28 px
H1 = 34 px
Diese Werte funktionieren für die meisten modernen Websites sehr gut und sind ein sicherer Ausgangspunkt für gute Lesbarkeit auf Desktop und Smartphone.
Diese sechs Tipps helfen dir, die Typografie deiner Website Schritt für Schritt zu verbessern – auch ohne Designausbildung.
Dein Fließtext ist die Basis für alles Weitere. Für die meisten Websites ist eine Größe zwischen 16 und 20 Pixeln ideal – gut lesbar auf Desktop & Co.
Mein Tipp: Probier 18px für Desktop und 16px für Mobile aus. Das ist ein super Ausgangspunkt, mit dem du selten daneben liegst.
Deine Überschriften sollten deutlich größer als der Fließtext sein, um eine klare visuelle Struktur zu schaffen. Stell dir das wie eine Pyramide vor – oben die größte Überschrift (H1), dann stufenweise kleiner bis zum Fließtext.
Ein einfacher Trick: Für jede Ebene eine Größe wählen, die etwa 1,3-mal so groß ist wie die vorhergehende. Das nennt sich auch „Skalierungsfaktor“. Für Mobilgeräte kannst du einen etwas kleineren Faktor von 1,2 verwenden, damit die Überschriften nicht zu viel Platz einnehmen.
Das hilft dir dabei, eine klare und harmonische Struktur auf deiner Website zu schaffen. Und du musst das nicht mal selbst ausrechnen! Tools wie ein Type Scale Calculator erledigen das für dich.
Runde auf ganze Pixelwerte wie 18, 20 oder 22 Pixel – das sieht sauberer aus und lässt sich leichter umsetzen.
Kleiner Praxistest: Lehn dich zurück oder check deine Seite am Handy. Musst du zoomen oder die Augen zusammenkneifen? Dann ist die Schrift zu klein.
Wenn du dir unsicher bist, welche Fonts gut zusammenpassen, zeige ich dir hier Schritt für Schritt, wie du Google Fonts sinnvoll kombinierst.
Achte außerdem darauf, dass der Kontrast zwischen Text und Hintergrund stark genug ist.
Dunkler Text auf hellem Hintergrund ist am besten lesbar.
Wenn du dir unsicher bist, hilft dir der Farbkontrast-Checker von Adobe. Er zeigt dir, ob deine Farbkombinationen den aktuellen WCAG-Richtlinien für barrierefreie Websites entsprechen.
Apropos Farben: Wenn du gerade an deinem Branding oder deiner Website arbeitest und dir bei der Farbwahl noch unsicher bist, kannst du dir meine FarbFiesta für 0 € holen.
Damit findest du spielerisch harmonische Farbpaletten – ganz ohne Designvorkenntnisse.
Der Zeilenabstand (auch „Leading“ genannt) ist die Luft zwischen den Textzeilen. Zu eng? Wirkt gequetscht. Zu viel Abstand? Leser:innen verlieren den Faden.
Für Fließtext gilt: Ein Zeilenabstand, der etwa 1,5 bis 2-mal so groß ist wie die Schriftgröße, ist ideal. Bei 16px Schrift bedeutet das einen Zeilenabstand von 24 bis 32px.
Bei Überschriften kann der Zeilenabstand etwas geringer sein, etwa 1,2 bis 1,4-mal die Schriftgröße.
Wusstest du, dass viele Menschen ihre Standardschriftgröße im Browser selbst einstellen? Genau deshalb sind relative Einheiten wie „rem“ so wertvoll! Sie sorgen dafür, dass deine Website diese individuellen Einstellungen respektiert.
Wenn jemand in seinen Browsereinstellungen eine größere Basisschrift eingestellt hat, wächst deine gesamte Seite proportional mit. Vorausgesetzt, du verwendest rem statt fester Pixelwerte. Das ist nicht nur benutzerfreundlich, sondern auch ein wichtiger Aspekt der digitalen Barrierefreiheit.
Und ganz nebenbei: Websites, die für alle zugänglich sind, werden von Suchmaschinen besser bewertet!
Nicht nur Smartphone vs. Desktop ist wichtig – auch die Vielfalt an Bildschirmgrößen spielt heute eine Rolle! Von ultrabreiten Monitoren bis zu Mini-Tablets ist alles dabei. Teste deine Website nicht nur auf deinem eigenen Gerät, sondern simuliere in den Entwickler-Tools deines Browsers (Taste F12) verschiedene Bildschirmgrößen. So erkennst du schnell, wo’s noch hakt.
Besonders praktisch: Die meisten modernen Website-Baukästen bieten dir schon in der Oberfläche die Möglichkeit, für verschiedene Gerätetypen eigene Schriftgrößen einzustellen – zum Beispiel größer für Desktop und etwas kleiner für Mobile.
px (Pixel): Die meisten Website-Baukästen arbeiten standardmäßig mit Pixeln. Eine Angabe wie 16 px wirkt auf allen Geräten ungefähr gleich groß, weil moderne Browser Pixelwerte automatisch an unterschiedliche Displays anpassen.
em: Eine relative Einheit, die sich an der Schriftgröße des Elternelements orientiert. Flexibel, aber kann schnell unübersichtlich werden, wenn viele Elemente ineinander verschachtelt sind.
Wenn dein übergeordnetes Element eine Schriftgröße von 20px hat und du schreibst „1em“, wird dein Text auch 20px groß. Sagst du „2em“, wird er doppelt so groß – also 40px.
rem: Ebenfalls relativ – aber übersichtlicher. Orientiert sich an einer festen Basisgröße (meist ganz oben im Code festgelegt). Egal, wo du bist – 1rem bleibt immer gleich. Das macht’s schön planbar und skalierbar.
Mein Fazit für dich:
Starte ruhig mit Pixeln! Die sind in so gut wie allen Baukastensystemen der Standard – und absolut okay.
Wenn du später tiefer einsteigen willst oder mit einem Entwickler zusammenarbeitest, kannst du dich an rem herantasten.
Nicht die Einheit entscheidet, ob deine Website professionell wirkt – sondern, wie gut sie lesbar ist. Und da kommst du mit px schon sehr weit!
Die Schriftgröße ist nur ein Teil guter Webtypografie.
Ebenso wichtig ist die Wahl der passenden Schriftart.
In diesem Artikel zeige ich dir, wie du die richtigen Google Fonts für dein Branding findest.
🟣 Ist mein Fließtext zwischen 16–20px?
🟣 Gibt es eine klare Überschriften-Hierarchie?
🟣 Ist der Kontrast stark genug?
🟣 Hat der Text genug Luft (1,5–2x Zeilenabstand)?
🟣 Sieht alles auch auf dem Handy gut aus?
🟣 Habe ich max. 2–3 Schriftarten?
🟣 Sind die Absätze kurz & snackable?
Die richtige Schriftgröße für deine Website zu finden, muss nicht kompliziert sein. Halte es einfach, denke an die Lesbarkeit und experimentiere ruhig ein wenig, bis du die perfekte Balance gefunden hast.
Eine gut gewählte Schriftgröße verbessert nicht nur die Lesbarkeit. Sie macht deine Website angenehmer zu lesen und sorgt dafür, dass sie insgesamt klarer, professioneller und einladender wirkt.
Du willst mehr solche Tipps? Im Newsletter bekommst du regelmäßig praxisnahe Impulse zu Design, Typografie und Branding – direkt in dein Postfach. Jetzt anmelden →
Titelbild/Mockup: MOYO Studio (bearbeitet)
© 2026 Annika Lind