← Alle Beiträge

Anleitungen

Die perfekte Spaltenbreite zum Lesen

17 Mai 2026 · von JustZix Team

Wenn eine einzige Änderung jeden Artikel verbessern könnte, den Sie lesen, wäre es die Spaltenbreite. Typografen nennen sie das Maß, und sie richtig hinzubekommen ist der Unterschied zwischen müheloser Lektüre und ständiger Augenermüdung.

Die 66-Zeichen-Regel

Jahrzehnte typografischer Praxis verweisen auf ungefähr 50 bis 75 Zeichen pro Zeile, mit 66 als idealem Punkt. Zu kurz, und Ihre Augen springen ständig; zu lang, und der Rücksprung vom Ende einer Zeile zum Anfang der nächsten wird unzuverlässig. Die meisten Websites strecken Text auf breiten Monitoren von Rand zu Rand und landen weit jenseits von 120 Zeichen — weit außerhalb des angenehmen Bereichs.

Messen in ch-Einheiten

CSS gibt Ihnen eine Einheit, die genau für diese Aufgabe gebaut ist. Die Einheit ch entspricht der Vorschubbreite des 0-Glyphs in der aktuellen Schrift. Eine max-width von 66ch folgt daher automatisch Ihrer Schriftwahl:

article,
.entry-content,
main .content {
  max-width: 66ch !important;
  margin-inline: auto !important;
}

Da ch schriftrelativ ist, hält dieselbe Regel ein gutes Maß, egal ob die Seite eine schmale serifenlose oder eine breite Serifenschrift verwendet.

Breite Elemente breit halten

Die Artikelspalte zu begrenzen sollte nicht Ihre Bilder und Code darin einsperren. Lassen Sie bestimmte Kinder auf volle Breite ausbrechen, während der Text schmal bleibt:

article {
  max-width: 66ch !important;
  margin-inline: auto !important;
}
article figure,
article pre,
article table {
  width: 90vw !important;
  max-width: 90vw !important;
  margin-left: calc(33ch - 45vw) !important;
}

Der negative Rand zentriert ein vollbreites Kind relativ zur schmalen Textspalte neu. Stimmen Sie die Zahlen nach Geschmack ab — das Ziel sind Medien, die atmen, während die Prosa diszipliniert bleibt.

Responsiver Innenabstand

Auf einem Telefon ist eine harte max-width irrelevant, aber der Randabstand zählt. Kombinieren Sie beides, damit die Regel überall funktioniert:

article {
  max-width: 66ch !important;
  margin-inline: auto !important;
  padding-inline: clamp(1rem, 4vw, 2.5rem) !important;
  box-sizing: border-box !important;
}

Das clamp() gibt kleinen Bildschirmen einen angenehmen Rand und großen Bildschirmen einen großzügigen, ohne eine einzige Media Query.

Breite mit Rhythmus paaren

Die Breite funktioniert am besten zusammen mit großzügigem vertikalem Abstand. Eine schmale Spalte mit engem Durchschuss fühlt sich immer noch beengt an. Fügen Sie diesen Begleitblock hinzu:

article p {
  line-height: 1.7 !important;
  margin-bottom: 1.5em !important;
  font-size: 1.15rem !important;
}

Es als JustZix-Regel anwenden

Erstellen Sie eine Regel, setzen Sie ein breites URL-Muster wie *://*/*, wenn Sie es überall wollen, oder beschränken Sie es auf eine bestimmte Publikation. Fügen Sie die Breiten- und Rhythmusblöcke in den CSS-Bereich ein und speichern Sie. Besuchen Sie ein paar Artikel und stupsen Sie den ch-Wert an, bis sich die Zeilen natürlich anfühlen — die meisten Menschen landen zwischen 60ch und 72ch.

Ein korrektes Maß ist unsichtbar: Sie hören einfach auf, das Layout zu bemerken, und beginnen, die Worte aufzunehmen. Erkunden Sie unsere fertigen Beispiele für abgestimmte Voreinstellungen, lesen Sie die Begleitanleitung zum Bauen eines vollständigen Lesemodus und laden Sie JustZix herunter, um mit dem Messen zu beginnen.