Große Bildschirme verleiten dazu, jede Pixelreihe zu füllen. Doch ein Layout, das auf dem 4K-Monitor beeindruckt, kann genau dort an Lesbarkeit verlieren. Die Frage nach der „richtigen“ Breite hat keine einzige Antwort – sie hat drei.
Von 640 Pixeln zu 4K
In den 90ern und frühen 2000ern war die Sache einfach: Monitore lösten mit 640 × 480 oder später 800 × 600 Pixeln auf, und Websites wurden für genau diese feste Breite gebaut. Wer ein Layout entwarf, kannte den Rahmen auf den Pixel genau.
Heute ist dieser Rahmen verschwunden. Vom Smartphone bis zum Ultrawide-Monitor liegen Welten, und die Auflösungen sind enorm gewachsen. Daraus hat sich ein verbreiteter Reflex entwickelt: Moderne Websites sollen die verfügbare Breite voll ausnutzen. Großzügig wirken. Den Bildschirm füllen.
Der Reflex ist nachvollziehbar – und in einem entscheidenden Punkt falsch.
Layout-Breite ist nicht Textbreite
Der häufigste Denkfehler besteht darin, eine einzige „Website-Breite“ zu suchen. Tatsächlich gibt es drei Ebenen, die man sauber trennen muss: den äußeren Layout-Container, die Breite des Fließtextes und die visuellen Bereiche wie Bilder, Raster und Hero-Flächen.
Diese Ebenen folgen völlig unterschiedlichen Logiken. Ein breiter Container heißt eben nicht, dass der Text mitwachsen darf. Wird er über die gesamte Bildschirmbreite gezogen, leidet die Lesbarkeit – ganz gleich, wie modern der Monitor ist.
Breite Layouts sind erlaubt. Breiter Fließtext fast nie.
Text misst man in Zeichen, nicht in Pixeln
Für die Lesbarkeit ist nicht die Pixelbreite entscheidend, sondern die Anzahl der Zeichen pro Zeile. Der über Jahrzehnte stabile Konsens: etwa 50 bis 75 Zeichen pro Zeile, mit rund 66 Zeichen als dem am häufigsten genannten Optimum.
Diese Größenordnung ist gut belegt. Robert Bringhurst nennt in „The Elements of Typographic Style“ 45 bis 75 Zeichen, Emil Ruder kam auf 50 bis 60, und Eye-Tracking-Studien von Dyson und Haselgrove bestätigen rund 55 Zeichen als zuverlässigen Mittelwert. Das Baymard Institute kommt aus der E-Commerce-Praxis zum selben Bereich und nutzt für die eigenen Artikel eine 560 Pixel breite Spalte – bei 20 px Schrift entspricht das etwa 72 Zeichen pro Zeile.
Übersetzt in Pixel bedeutet das bei üblichen Web-Schriftgrößen von 16 bis 18 px eine Textbreite von rund 600 bis 780 px. Die Accessibility-Obergrenze nach WCAG liegt bei 80 Zeichen (bei CJK-Schriften 40) und sollte nicht überschritten werden.
Warum das so wichtig ist: Zu lange Zeilen erschweren den Sprung des Auges zum nächsten Zeilenanfang. Der Leser verrutscht, ermüdet schneller – und überspringt überlange Textblöcke im Zweifel ganz. Baymard beschreibt genau das als typisches Problem von Verkaufsseiten, deren Beschreibungen über die volle Breite laufen.
Visuelle Bereiche dürfen großzügig sein
Für Container, Karten-Raster, Bildergalerien und Hero-Flächen gelten andere Regeln. Hier geht es nicht um Zeilenlänge, sondern um Struktur, Hierarchie und Weißraum. Bewährt hat sich ein Hauptcontainer zwischen 1140 und 1440 px – ein Bereich, den auch verbreitete Frameworks wie Bootstrap (1140 / 1320 px) oder Tailwind (1280 px) abdecken.
Hero-Sektionen und große Bildflächen dürfen ruhig über die volle Viewport-Breite laufen. Entscheidend ist nur, dass der Text darin begrenzt bleibt. Die saubere Lösung ist deshalb fast immer dieselbe: ein großzügiger visueller Container mit einer darin zentrierten, schmaleren Textspalte. Großzügige Optik und lesbarer Text schließen sich nicht aus.
Unsere Empfehlung für moderne Websites
Aus diesen Prinzipien lässt sich ein klares, übertragbares Setup ableiten. Für Elbnetz.com nutzen wir:
| Bereich | Breite | Einsatz |
|---|---|---|
| Hauptcontainer | 1360 px | Sektionen, Grids, Karten, Referenzen |
| Fließtext | 760 px | Blogartikel, Leistungsseiten, längere Absätze |
| Intro- / Hero-Text | 900 px | Einstiegstexte, größere Subheadlines |
| Hero / Bildflächen | Full Width | Hintergründe, große Kompositionen |
1360 px ist breit genug, um auf großen Monitoren modern und großzügig zu wirken, bleibt aber gestalterisch kontrollierbar. 1200 px wirkt schnell etwas konservativ, 1440 px verlangt mehr Disziplin, und alles ab 1600 px gehört nur in bewusst inszenierte Bild- oder Dashboard-Flächen – nicht in den Standardcontainer.
Technisch behandelt man die Pixelbreite am besten als Ergebnis, nicht als Vorgabe: Die Textspalte steuert man über die Einheit ch (etwa max-width: 65ch), die automatisch mit der Schriftgröße skaliert, die Außenabstände über clamp() statt über starre Pixelwerte. Das erfüllt zugleich das WCAG-Reflow-Kriterium, nach dem Inhalte bei 320 CSS-Pixeln ohne horizontales Scrollen nutzbar bleiben müssen.
Gibt es also Regeln für gutes Webdesign?
Ja – nur andere, als der „Bildschirm voll ausnutzen“-Reflex vermuten lässt. Die feste Pixelbreite war ein Kind der Fixed-Layout-Ära. In responsivem Design steuert man die Zeichen pro Zeile und lässt die Pixel sich daraus ergeben. Wer Layout-Breite und Textbreite konsequent trennt, bekommt beides: ein Design, das auf großen Bildschirmen großzügig wirkt, und Inhalte, die man tatsächlich gerne liest.