← Wszystkie wpisy

Poradniki

Dostosuj rozmiar czcionki i odstępy do wygodnego czytania

17 maja 2026 · autor JustZix Team

Sporo stron wciska maleńki tekst w kolumny od krawędzi do krawędzi. Czytanie ich jest męczące. Dzięki JustZix możesz przypiąć regułę CSS, która zmienia rozmiar tekstu, otwiera odstępy między wierszami i ogranicza szerokość kolumny — zamieniając każdą ścianę tekstu w coś spokojnego.

Zwiększ bazowy rozmiar czcionki

Przeglądarki obliczają każdy względny rozmiar z głównego rozmiaru czcionki. Podnieś tę jedną wartość, a większość strony skaluje się wraz z nią.

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

Jeśli strona używa wszędzie stałych rozmiarów w pikselach, sztuczka z głównym rozmiarem do niej nie dotrze. Wtedy namierz tekst body bezpośrednio.

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

Daj wierszom miejsce na oddech

Wysokość wiersza to pojedynczy największy czynnik komfortu. Większość stron ustawia ją zbyt ciasno. Wartość między 1,6 a 1,8 to złoty środek dla tekstu głównego.

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;
}

Ogranicz szerokość kolumny

Wiersze rozciągające się przez szeroki monitor są wyczerpujące do skanowania. Idealna miara to mniej więcej 65 do 75 znaków. Ogranicz główną treść i wyśrodkuj ją.

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;
}

Jednostka ch mierzy szerokość w szerokościach znaków, więc kolumna dostosowuje się do dowolnej używanej czcionki. Połącz to z podmianą czcionki, a strona się przeobrazi.

Poluzuj odstępy między literami i akapitami

Odrobina dodatkowego odstępu między akapitami i włos odstępu między literami sprawiają, że gęsty tekst wydaje się spokojniejszy.

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

Jeden suwak skalowania z JavaScriptem

Chcesz dostrajać rozmiar na żywo, zamiast edytować CSS? Maleńka reguła JavaScript dodaje powiększanie klawiaturą tylko dla tekstu.

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';
});

Przytrzymaj Alt i stuknij klawisz plus lub minus, aby zmienić rozmiar. JustZix uruchamia ten skrypt na wybranych przez ciebie stronach, więc skrót istnieje tylko tam, gdzie go chcesz.

Lista kontrolna

• Zacznij od głównego rozmiaru czcionki; cofnij się do bezpośrednich selektorów, jeśli strona używa stałych pikseli.
• Celuj w wysokość wiersza 1,6–1,8 i kolumnę około 70ch.
• Nie przesadzaj z odstępami — zbyt duży odstęp między literami szkodzi czytelności tak samo jak zbyt mały.
• Połącz z podmianą czcionki, by uzyskać największą poprawę.

Kontynuuj naszym wpisem o podmianie czcionek strony, przejrzyj gotowe przykłady, aby zdobyć natychmiastowe przepisy, lub pobierz JustZix, by zastosować swoją pierwszą regułę czytania już dziś.