Die perfekte Schriftgröße für deine Website – so machst du deinen Text richtig lesbar

Die perfekte Schriftgröße für deine Website – so machst du deinen Text richtig lesbar

Annika Lind
von Annika Lind

Du sitzt an deinem Schreibtisch, der Kaffee dampft vor dir, und deine Business-Website wartet darauf, endlich mit Leben gefüllt zu werden. Sie soll nicht nur professionell aussehen, sondern auch richtig gut lesbar sein. Aber irgendwie sieht der Text noch nicht so professionell aus wie erhofft? Eine häufige Ursache: die falsche Schriftgröße! Aber: Welche Größe ist denn eigentlich die passende?

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.

Warum ist die richtige Schriftgröße so wichtig?

Die richtige Schriftgröße entscheidet darüber, ob deine Besucher deinen Content gerne lesen oder schnell wieder wegklicken. Zu kleine Schrift strengt die Augen an und lässt den Leser schnell ermüden, während eine zu große Schrift unübersichtlich wirkt und weniger professionell aussieht.

Bedenke auch: Mehr als die Hälfte aller Website-Besucher 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 easy zu lesen sind – du gibst deiner Website auch den perfekten, professionellen Look, der Vertrauen schafft und deine Besucher länger auf der Seite hält.

Einfache Tipps zur Wahl der Schriftgröße

1. Leg die Basisgröße fest

Start with the basics! 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 ein super Ausgangspunkt, mit dem du selten daneben liegst.

2. Schaff eine klare Hierarchie bei den Überschriften

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.

Beispiel für Desktop und Tablet (1,3-Regel):

P = 18 px (Fließtext)
H4 = 23 px
H3 = 30 px
H2 = 39 px
H1 = 51 px

Beispiel für Mobilgeräte (1,2-Regel):

P = 16 px
H4 = 19 px
H3 = 23 px
H2 = 28 px
H1 = 34 px

Diese einfachen Richtlinien helfen dir dabei, eine klare und harmonische Struktur auf deiner Website zu schaffen. Und das Beste: Du musst nicht selbst rechnen! Tools wie der Type Scale Calculator erledigen das für dich.

Tipp für die Praxis: Rund am besten auf ganze Pixelwerte wie 18, 20, 22px – das wirkt sauberer und ist leichter umzusetzen.

3. Kontrast und Lesbarkeit beachten

Ein oft übersehener Punkt: Der Kontrast zwischen Text und Hintergrund muss stark genug sein. Dunkler Text auf hellem Hintergrund ist am besten lesbar – klassisches Schwarz auf Weiß hat seinen guten Ruf nicht ohne Grund.

Wenn du farbigen Text oder Hintergründe verwenden möchtest, prüf unbedingt den Kontrast. Das Farbkontrast-Analyse-Tool von Adobe hilft dir dabei herauszufinden, ob deine Farbkombination barrierefrei ist und den aktuellen WCAG-Richtlinien entspricht.

Wichtig: Gute Barrierefreiheit ist nicht nur fair gegenüber allen Nutzern, sondern wird zunehmend auch gesetzlich gefordert!

Zeilenabstand – Luft für die Augen

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.

5. Mach deine Website responsiv

Deine Seite soll auf allen Geräten gut aussehen – vom riesigen Monitor bis zum Mini-Screen. Deshalb: Denk flexibel! Du kannst auch Einheiten wie „em“ oder „rem“ verwenden, statt nur mit festen Pixelwerten zu arbeiten.

Was bedeuten eigentlich „px“, „em“ und „rem“?

px (Pixel): Stell dir px wie fest eingestellte Zahlen vor. Wenn du 16px angibst, bleibt das überall 16 – egal ob auf Handy, Tablet oder Desktop. Einfach, aber nicht besonders flexibel.

em: Das ist eine relative Einheit. Sie richtet sich nach der Größe des Bereichs, in dem du gerade bist. Wenn du in einem Kasten arbeitest, der 20px groß ist, und du schreibst „1em“, wird dein Text auch 20px groß. Sagst du „2em“, wird er doppelt so groß – also 40px. Klingt praktisch, kann aber tricky werden, wenn viele Kästen ineinander liegen.

rem: Auch rem ist relativ – aber viel übersichtlicher. Alles richtet sich hier nach einer einzigen, festgelegten Größe (meistens die vom Anfang deiner Website). Egal, wo du bist – 1rem bleibt immer gleich. Das macht’s schön planbar.

Mein Tipp für Anfänger: Starte mit px, das ist am einfachsten. Und wenn du dich sicherer fühlst, nimm rem – das ist flexibel und zuverlässig. rem ist besonders praktisch für responsive Websites, weil du nur die Basis-Größe ändern musst, und schon passen sich alle Elemente automatisch an verschiedene Bildschirmgrößen an.

Typografie-Tricks für die Praxis

Der Sofa-Test

Lehn dich zurück oder check deine Seite am Handy. Musst du zoomen oder die Augen zusammenkneifen? Dann ist die Schrift zu klein.

Spiel mit Schriftarten und Stilen

Manchmal reicht Fett oder Halb-Fett statt riesengroß. Zwei bis drei Schriftarten reichen völlig – weniger ist hier mehr.

Lass dich inspirieren

Achte beim Surfen bewusst auf Typografie. Was liest sich gut? Was gefällt dir? Davon kannst du dich inspirieren lassen – aber nicht 1:1 übernehmen, klaro? 😉

Typografie-Checkliste für deine Website

  • Ist mein Fließtext zwischen 16–20px?
  • Gibt’s 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?

Fazit: Keep it simple!

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, sondern steigert auch die Nutzererfahrung und letztendlich den Erfolg deiner Website.

Wie sieht’s bei dir aus? Welche Schriftgröße nutzt du auf deiner Website?

Stockfotos/Mockups (bearbeitet) von Moyo Studio – www.moyo-studio.com

Diese Blog-Beiträge könnten dich interessieren:

Annika Lind
Annika Lind
Hey, ich bin Annika – deine Kreativpartnerin für ein Brand Design, das dich auf den ersten Blick widerspiegelt. Ich helfe dir, ein Branding zu entwickeln, das nicht nur professionell aussieht, sondern sich auch richtig gut anfühlt – weil es wirklich deins ist. Kein Schema F, sondern ein Design, das zu dir, deiner Vision und deiner Persönlichkeit passt. Und ich zeige dir, wie du es easy in deinen Alltag integrierst. Ein bisschen Konfetti darf natürlich auch nicht fehlen – genau wie meine Ohrringe!

DesignKonfetti Brief

Hol dir magisches DesignKonfetti direkt in deinen Posteingang! Alle zwei Wochen bekommst du:
Brief-Zeichnung
Annika Lind am Laptop, fotografiert von Mette Vasterling
Kreative Tipps & Tricks für dein Brand Design
Spannende Einblicke & Inspiration aus der Designwelt
Exklusive Angebote für dein Design-Abenteuer

Kurz, knackig und immer mit dem Ziel, dein Branding klarer und einzigartiger zu machen. Bereit?

Du kannst jederzeit entscheiden, keine E-Mails mehr von mir zu erhalten. Klicke einfach auf den Link ‚Abmelden‘ am Ende jeder E-Mail oder kontaktiere mich über die Informationen im Impressum. Deine Privatsphäre ist mir wichtig und wird gemäß meiner Datenschutzerklärung behandelt.
..