← Alle Beiträge

Anleitungen

Schriftgröße und Abstand für angenehmes Lesen anpassen

17 Mai 2026 · von JustZix Team

Viele Seiten quetschen winzigen Text in randlose Spalten. Sie zu lesen ist ermüdend. Mit JustZix können Sie eine CSS-Regel anhängen, die Text vergrößert, den Zeilenabstand öffnet und die Spaltenbreite begrenzt — was jede Textwand in etwas Erholsames verwandelt.

Die Basis-Schriftgröße anheben

Browser berechnen jede relative Größe aus der Wurzel-Schriftgröße. Heben Sie diesen einen Wert an, und der Großteil der Seite skaliert mit.

html {
  font-size: 18px !important;
}

Wenn eine Seite überall feste Pixelgrößen verwendet, erreicht der Wurzel-Trick sie nicht. Dann visieren Sie den Fließtext direkt an.

p, li, span, div, td, article, .content {
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
}

Den Zeilen Raum zum Atmen geben

Die Zeilenhöhe ist der größte einzelne Komfortfaktor. Die meisten Seiten setzen sie zu eng. Ein Wert zwischen 1,6 und 1,8 ist der ideale Punkt für Fließtext.

body, p, li {
  line-height: 1.75 !important;
}
h1, h2, h3 {
  line-height: 1.3 !important;
  margin-top: 1.6em !important;
  margin-bottom: 0.5em !important;
}

Die Spaltenbreite begrenzen

Zeilen, die sich über einen breiten Monitor erstrecken, sind anstrengend zu überfliegen. Das ideale Maß ist ungefähr 65 bis 75 Zeichen. Begrenzen Sie den Hauptinhalt und zentrieren Sie ihn.

article, .post, .content, main, .entry-content {
  max-width: 70ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

Die Einheit ch misst die Breite in Zeichenbreiten, sodass die Spalte sich an die jeweils verwendete Schrift anpasst. Kombinieren Sie dies mit einem Schriftaustausch, und die Seite verwandelt sich.

Buchstaben- und Absatzabstand lockern

Ein Hauch zusätzlicher Abstand zwischen Absätzen und ein Quäntchen Buchstabenabstand lässt dichten Text ruhiger wirken.

p {
  margin-bottom: 1.1em !important;
  letter-spacing: 0.01em !important;
}
ul, ol {
  margin-bottom: 1.1em !important;
}
li {
  margin-bottom: 0.4em !important;
}

Ein Skalierungsregler mit JavaScript

Wollen Sie die Größe live verändern, statt CSS zu bearbeiten? Eine winzige JavaScript-Regel fügt Tastatur-Zoom nur für Text hinzu.

document.addEventListener('keydown', function (e) {
  if (!e.altKey) return;
  var html = document.documentElement;
  var size = parseFloat(getComputedStyle(html).fontSize);
  if (e.key === '=') html.style.fontSize = (size + 1) + 'px';
  if (e.key === '-') html.style.fontSize = (size - 1) + 'px';
});

Halten Sie Alt und tippen Sie die Plus- oder Minustaste, um die Größe zu ändern. JustZix führt dieses Skript auf den von Ihnen gewählten Seiten aus, sodass das Tastenkürzel nur dort existiert, wo Sie es wollen.

Checkliste

• Beginnen Sie mit der Wurzel-Schriftgröße; greifen Sie auf direkte Selektoren zurück, wenn die Seite feste Pixel verwendet.
• Streben Sie eine Zeilenhöhe von 1,6–1,8 und eine Spalte um 70ch an.
• Übertreiben Sie den Abstand nicht — zu viel Buchstabenabstand schadet der Lesbarkeit ebenso wie zu wenig.
• Kombinieren Sie es mit einem Schriftaustausch für die größte Verbesserung.

Fahren Sie fort mit unserem Beitrag zum Austauschen von Website-Schriften, durchstöbern Sie fertige Beispiele für sofortige Rezepte oder laden Sie JustZix herunter, um Ihre erste Leseregel heute anzuwenden.