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.
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.
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.
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.
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 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.
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!
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.
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.
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.
Lehn dich zurück oder check deine Seite am Handy. Musst du zoomen oder die Augen zusammenkneifen? Dann ist die Schrift zu klein.
Manchmal reicht Fett oder Halb-Fett statt riesengroß. Zwei bis drei Schriftarten reichen völlig – weniger ist hier mehr.
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? 😉
Gibt’s eine klare Überschriften-Hierarchie?
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
Kurz, knackig und immer mit dem Ziel, dein Branding klarer und einzigartiger zu machen. Bereit?