Du sitzt an deiner Website. Alles passt eigentlich.
Farben? Check. Layout? Steht.
Und trotzdem denkst du: Irgendwie sieht das noch nicht nach mir aus.
Oft liegt das an einer überraschend einfachen Sache: der Schriftgröße.
Wenn deine Schriftgröße nicht passt, wirkt deine Website schnell unruhig, anstrengend oder unfertig – selbst wenn eigentlich alles stimmt.
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.
Also, dann lass uns einen Blick auf die Grundlagen der Bildschirmtypografie werfen.
Noch kurz vorweg: 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.
So, los geht es. Schon mal 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, während eine zu große Schrift manchmal 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 vor allem dafür, dass deine Texte angenehm zu lesen sind – auf dem großen Bildschirm genauso wie auf dem Smartphone.
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.
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: Viele Maßnahmen, die deine Website zugänglicher machen, helfen auch bei Nutzerfreundlichkeit und SEO.
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 es 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 – 1 rem bleibt immer gleich.
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 genug?
Halte es einfach und denke an die Lesbarkeit. Das macht deine Website angenehmer zu lesen und sorgt dafür, dass sie insgesamt klarer, professioneller und einladender wirkt.
Vielleicht hast du jetzt deine Schriftgrößen angepasst und schaust trotzdem auf deine Website und denkst: Irgendwas stimmt hier noch nicht.
Dann musst du nicht unbedingt weiter an einzelnen Details herumschrauben. Manchmal hilft es mehr, einmal gemeinsam draufzuschauen: Was passt schon? Was macht den Auftritt gerade unruhig? Und wo lohnt es sich überhaupt, etwas zu verändern?
Genau dafür gibt es mein DesignKonfetti Pünktchen: eine Klarheits-Session für deinen bestehenden Auftritt. Wir sortieren gemeinsam, was du schon hast, und finden heraus, was dein sinnvollster nächster Schritt ist.
🟣 Mehr über das DesignKonfetti Pünktchen erfahren
Titelbild/Mockup: MOYO Studio (bearbeitet)
Du weißt, dass dein Design besser gehen könnte.
Aber irgendwo zwischen Ideen, Tools und Alltag bleibt’s liegen.
In meinem Newsletter räumen wir das auf.
Mit Klartext, ehrlichen Gedanken – und ja, auch mal mit Zitronenfaltern oder einer Tasche ohne Henkel.
Alle zwei Wochen ein bisschen Konfetti.
Und ziemlich viel Klarheit.
© 2026 Annika Lind