CP Registry
Schulung

Layout & Lesbarkeit

Warum Inhalte nicht in voller Breite stehen, weshalb Weißraum kein verschwendeter Platz ist und wie das Auge eine Seite scannt. Mit interaktiven Beispielen, an denen du den Effekt selbst spürst.

  • Verstehe, warum Fließtext maximal 55–75 Zeichen pro Zeile hat
  • Setze Weißraum gezielt als gestalterisches Werkzeug ein
  • Erkenne visuelle Hierarchie und Lese-Pfade in einem Layout

Die optimale Zeilenlänge

Zwischen 55 und 75 Zeichen pro Zeile lesen die meisten Menschen am muehelosesten. Bei breiterem Text verliert das Auge den Anschluss zur nächsten Zeile, bei schmalerem unterbricht der Zeilenumbruch den Lesefluss.

Das Service-Paket für kleine und mittlere Unternehmen richtet sich an Betriebe, die ihre Online-Präsenz neu aufstellen und mindestens zwei Jahre betreiben wollen. Die Beratung umfasst Konzept, Design und technische Umsetzung und wird direkt nach Auftragserteilung koordiniert. Voraussetzung ist ein abgestimmtes Briefing sowie ein Ansprechpartner mit Entscheidungsbefugnis auf Kundenseite. Anfragen können ganzjährig gestellt werden.

Schätzung: ~70 Zeichen pro Zeile im Optimum
Im System: Die Klasse Standard (55rem) trifft das Optimum. .breakout (68.75rem) ist für Karten und Grids, nicht für Fließtext. Wenn ein Absatz in .breakout oder .wide-content liegt, sollten Redakteure die Breite per Inline-Style begrenzen.

Zu breit (~120 Zeichen)

Wer als KMU eine neue Landingpage beauftragt, erhält über das Agentur-Portal ein Angebot innerhalb von 5 Werktagen, sofern ein Briefing vorliegt und ein Entscheider auf Kundenseite benannt ist.

Bei voller Containerbreite entstehen Zeilen mit über 100 Zeichen. Das Auge muss nach jeder Zeile einen weiten Sprung machen.

Sinnvoll begrenzt (~60 Zeichen)

Service-Paket KMU: Landingpage Komplett.

Zielgruppe: Unternehmen mit Entscheider und Briefing.

Lieferzeit: 5 Werktage Angebot, 4 Wochen Umsetzung.

Bedingung: Briefing ausgefüllt, Ansprechpartner benannt.

Anfrage stellen: agentur.de/kontakt

Begrenzte Breite plus strukturierter Inhalt - die Kernaussagen bleiben hängen.

Wann NICHT

Bei Tabellen, Code-Blöcken oder kurzen Listen spielt die 55-75-Zeichen-Regel keine Rolle - die Zeilen brechen sich selbst. Gleiches gilt für Hero-Claims, Slogans und Pull-Quotes: Wirkung geht vor Messbarkeit.

Regel auf einen Blick

  • Problem: Zu breite Zeilen verursachen Sprungfehler beim Augen-Ruecklauf — der Leser verliert die nächste Zeile.
  • Lösung: Fließtext in der Standard-Breite (55 rem) belassen. Schieberegler zeigt den Effekt direkt.
  • Beispiel: Service-Page mit Intro-Text in Standard — optimal, ohne Zutun lesbar.
  • Gegenbeispiel: Artikel-Absatz in .breakout oder .full-width — mehr als 100 Zeichen pro Zeile.
  • Wann nicht: Tabellen, Code-Blöcke, Pull-Quotes — die brechen sich selbst oder erfordern Breite.

Warum dieses Grid?

Das CP-Grid hat 5 Breitenstufen. Jede ist für einen bestimmten Inhaltstyp gedacht. Wer die Stufen versteht, trifft Layout-Entscheidungen, die ohne Nachdenken funktionieren.

Standard 55rem

Wofür: Fließtext, Artikel, Absätze, Listen.

Warum: Trifft die 55–75-Zeichen-Regel — die optimale Lesebreite.

.breakout 69rem

Wofür: Karten-Grids, Formulare, Tabellen.

Warum: Mehr Platz für Karten in 2–4 Spalten, ohne sich zur "Wand" zu verbreitern.

.wide-content 83rem

Wofür: Navigation, breite Galerien, Dashboards.

Warum: Sichtbar mehr Atem für Layouts, die viel zeigen müssen.

.full-width 100%

Wofür: Hero-Bilder, Banner, durchgehende Hintergründe.

Warum: Visuelles Impact braucht keine Begrenzung. Inhalte darin nutzen wieder das Grid.

Faustregel: Wenn der Block Text zum Lesen enthält → Standard. Wenn er Inhalt zum Scannen enthält (Karten, Tabelle, Galerie) → breakout oder wide-content. Wenn er visuelles Impact ist (Hero, Banner) → full-width.

Wann NICHT

Dashboards und Auswertungsansichten brauchen oft .wide-content oder .full-width - nicht weil Fließtext darin steht, sondern weil Tabellen, Charts und Status-Kacheln Breite benötigen. Nicht jede Ansicht ist eine Lese-Seite.

Regel auf einen Blick

  • Problem: Falsches Grid macht Fließtext unlesbar oder quetscht Karten-Grids auf halbe Breite.
  • Lösung: Text zum Lesen → Standard. Inhalt zum Scannen → breakout. Visuelles Impact → full-width.
  • Beispiel: Blog-Artikel in Standard (55 rem), Karten-Grid in .breakout (69 rem), Hero-Bild in .full-width.
  • Gegenbeispiel: Artikeltext in .wide-content — Zeilen werden zu lang, Lesefluss bricht.
  • Wann nicht: Dashboards, Auswertungsansichten — die brauchen oft .wide-content, weil Tabellen und Charts Breite benötigen.

Weißraum ist kein verschwendeter Platz

Abstände sind nicht "leer". Sie gruppieren, trennen und führen das Auge. Das Naehegesetz der Gestaltpsychologie sagt: was nahe beieinander steht, gehört zusammen.

Eng & verwirrend

Leistungen

Konzept, Design, Entwicklung, Pflege.

Projektstatus

Briefing, Konzept, Design, Umsetzung, Live.

Kontakt

Beratung, Anfrage, Vor-Ort-Termin.

Alles gleicher Abstand. Das Auge erkennt nicht, was zu welchem Block gehört. Es muss arbeiten, um die Struktur zu finden.

Strukturiert

Leistungen

Konzept, Design, Entwicklung, Pflege.

Projektstatus

Briefing, Konzept, Design, Umsetzung, Live.

Kontakt

Beratung, Anfrage, Vor-Ort-Termin.

Eng zwischen Heading und Absatz. Weiter zwischen den drei Blöcken. Die Gruppen erkennt man sofort.

Drei Abstands-Stufen

eng

Innerhalb einer Gruppe. Überschrift + Absatz, Icon + Label, Teaser-Bild + Teaser-Text.

mittel

Verwandte Blöcke. Karten in einer Reihe, Listenpunkte, FAQ-Items.

weit

Themen-Wechsel. Zwischen Sections wie "Über uns" und "Kontakt", vor dem Footer.

Wann NICHT

Dichte Information-Panels (Antragsstatus, Messwert-Uebersichten, Karten-Overlays) brauchen bewusst weniger Weissraum - zu viel Abstand reisst zusammengehörende Datenpunkte auseinander. Weissraum als Werkzeug, nicht als Dogma.

Regel auf einen Blick

  • Problem: Gleiche Abstände über alles hinweg — das Auge findet keine Gruppen, liest alles als Wand.
  • Lösung: Drei Abstands-Stufen: eng (innerhalb einer Gruppe), mittel (verwandte Blöcke), weit (Themen-Wechsel).
  • Beispiel: Heading + Absatz eng, Absatz + nächster Heading weit — Gruppen sind sofort erkennbar.
  • Gegenbeispiel: Alle Abstände auf "normal" gesetzt — Heading und Absatz wirken wie gleichwertige Blöcke.
  • Wann nicht: Dichte Information-Panels (Status-Uebersichten, Karten-Overlays) brauchen bewusst weniger Weissraum.

Visuelle Hierarchie

Auf einer Seite kaempfen viele Elemente um Aufmerksamkeit. Hierarchie regelt, was zuerst gelesen wird, was als nächstes, was am Ende.

1. Größe

Wichtigstes Wichtig Standard Detail

Größe ist das einfachste Mittel. Aber: nicht alles kann gross sein. Sonst ist nichts wichtig.

2. Gewicht

Bold Semibold Regular Light

Bei gleicher Größe trennt das Gewicht. Headlines bold, Fließtext regular.

3. Farbe / Kontrast

Hauptaussage Sekundär Hintergrund-Info Aktion

Kontrast steuert Aufmerksamkeit. Aktionen brauchen Farbe.

4. Position

Oben links: zuerst gesehen Unten: zuletzt

Westliche Leser scannen oben links zuerst. Wichtige Inhalte oben platzieren.

Alles gleich gewichtet

Projekt-Anfrage Webseite

Anfrage #2026-4471

Eingereicht am 14.03.2026

Status: In Prüfung

Unterlagen hochladen

Gleiche Schriftgröße und Gewicht - der Nutzer muss alles lesen, um die nächste Aktion zu finden.

Mit Hierarchie

Projekt-Anfrage Webseite

In Prüfung

Anfrage #2026-4471 — eingereicht 14.03.2026

Größe + Gewicht + Farbe + Position - die nächste Aktion ist sofort erkennbar.

Wann NICHT

Auf reinen Bestätigungs- oder Fehlerseiten ('Antrag eingegangen', '404') gibt es oft nur eine Aussage - da braucht es keine Hierarchie-Ebenen. Und in Karten-Grids können alle Karten gleich gewichtet sein, wenn die Inhalte gleichwertig sind.

Regel auf einen Blick

  • Problem: Wenn alles gleich gross und gleich gewichtet ist, liest der Nutzer alles — und findet die Aktion trotzdem nicht.
  • Lösung: Kombiniere mindestens zwei Mittel: Größe + Gewicht, Farbe + Position. Nie nur eins allein.
  • Beispiel: Anfrage-Status-Seite: große Headline + Status-Tag + kleines Meta + Primary-Button. Aktion sofort erkennbar.
  • Gegenbeispiel: Fünf Zeilen, alle 1rem, alle Regular — der Nutzer muss alles lesen, um die nächste Aktion zu finden.
  • Wann nicht: Auf Bestätigungs- oder Fehlerseiten mit nur einer Aussage braucht es keine Hierarchie-Ebenen.

Wie Augen eine Seite scannen

Niemand liest Webseiten. Sie werden gescannt. Eye-Tracking-Studien zeigen wiederkehrende Muster: das F-Pattern bei Textseiten, das Z-Pattern bei Landingpages.

F-Pattern

Tritt bei: Artikeln, Blog-Posts, Suchergebnissen — alles mit viel Text.

Was Redakteure tun: Wichtigste Aussagen in die ersten Wörter jeder Headline. Listen statt Fließtext, wo möglich.

Z-Pattern

Tritt bei: Landingpages, Hero-Bereichen — alles mit Call-to-Action.

Was Redakteure tun: Logo oben links, CTA oben rechts oder unten zentral. Hauptaussage in der Mitte. Action-Button am Ende des Z.

F-Pattern ignoriert: Action versinkt in der Mitte

Anfrage-Status-Seite. Beginnt mit einem Fliess-Absatz über Bearbeitungszeiten in voller Breite. Darunter ein großes Statusbild mittig. Der "Unterlagen hochladen"-Button steht in der Mitte der Seite unter dem Bild — nicht am linken Rand, nicht am Seitenende. Beim F-Pattern liest das Auge links entlang — die Mitte der zweiten und dritten Zeile wird nicht erreicht. Der Button verschwindet im toten Bereich des Scan-Pfads.

Der Nutzer scannt die linke Seite entlang und springt zum nächsten Heading. Der Button in der Bildmitte liegt außerhalb des F-Pfads.

F-Pattern beachtet: Action am linken Ankerpunkt

Dieselbe Anfrage-Status-Seite, umgebaut. Beginnt mit der Status-Headline links oben ("Deine Anfrage: In Prüfung"). Direkt darunter, buendig links: der "Unterlagen hochladen"-Button als Primary-Action. Danach erst der erklärende Text — als zweite horizontale Lesespur (zweiter Balken des F). Wer nur scannt, sieht: Status und Aktion. Wer lesen will, findet die Details darunter.

Die wichtigste Aktion liegt am Startpunkt jeder F-Spur — sie wird gescannt, nicht verpasst.

Wann NICHT

Interaktive Tools (Rechner, Konfiguratoren, Formulare) folgen keinem F- oder Z-Pattern - der Nutzer bewegt sich aufgabengesteuert, nicht scannend. Hier zählt Schritt-Logik, nicht Scan-Optimierung.

Regel auf einen Blick

  • Problem: Wer nicht weiß, wie das Auge scannt, platziert Aktionen dort, wo sie niemand erreicht.
  • Lösung: F-Pattern (Textsseiten): wichtigstes oben links, wichtige Aktionen am linken Rand. Z-Pattern (Landingpages): Logo oben links, CTA oben rechts oder unten zentral.
  • Beispiel: Anfrage-Status-Seite mit Status-Headline und Primary-Action links oben — gescannte Nutzer sehen beides, ohne zu scrollen.
  • Gegenbeispiel: Aktion mittig unter einem Bild — außerhalb des F-Pfads, wird beim Scannen übersprungen.
  • Wann nicht: Interaktive Tools (Rechner, Konfiguratoren) folgen keinem Scan-Pattern. Da zählt Schritt-Logik, nicht Scan-Optimierung.

Hier übst du das

Theorie sitzt — jetzt praktisch anwenden.

Sieben Sätze, die du dir merken solltest

  1. 1
    Niemand liest, alle scannen — daraus folgt alles andere auf dieser Liste. Schreib so, dass auch beim Ueberfliegen die Hauptaussage hängen bleibt.
  2. 2
    Fließtext: 55–75 Zeichen pro Zeile. Daher die Standard-Breite. Breiter wird unbequem zu lesen.
  3. 3
    Breite ergibt sich aus dem Inhalt. Lesen → schmal. Scannen (Karten, Listen) → breit. Bilder/Banner → voll.
  4. 4
    Weissraum gruppiert. Eng = zusammen, weit = getrennt. Ohne Abstands-Stufen wird alles zur Wand.
  5. 5
    Hierarchie ist Pflicht. Größe, Gewicht, Farbe, Position — kombiniere mindestens zwei.
  6. 6
    Wichtigstes oben links. Westliche Leser lesen so. Du musst nicht dagegen kaempfen.
  7. 7
    Standard als Ausgangspunkt. Wenn keine klare Anforderung vorliegt — Standard-Breite und mittlerer Abstand sind selten verkehrt.