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: Runde auf ganze Pixelwerte wie 18, 20 oder 22 Pixel – das sieht sauberer aus und lässt sich leichter umsetzen.
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! Die WCAG-Richtlinien sind sozusagen die „Spielregeln für barrierefreies Internet“ – internationale Standards, die sicherstellen, dass Websites für alle Menschen nutzbar sind, auch für Personen mit Einschränkungen. Dazu gehören klare Mindestanforderungen an Kontrast, Schriftgröße und Navigation.
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 Zahl wie 16px bleibt auf allen Geräten gleich – einfach, direkt und meistens völlig ausreichend.
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!
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?
Möchtest du mehr solche praxisnahen Tipps für deine Website & dein Branding? Dann abonniere gleich meinen Newsletter!
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?