← Wszystkie wpisy

Poradniki

Idealna szerokość kolumny do czytania

17 maja 2026 · autor JustZix Team

Gdyby pojedyncza zmiana mogła poprawić każdy artykuł, który czytasz, byłaby nią szerokość kolumny. Typografowie nazywają ją miarą, a jej prawidłowe ustawienie to różnica między czytaniem bez wysiłku a ciągłym zmęczeniem oczu.

Reguła 66 znaków

Dekady praktyki typograficznej wskazują na mniej więcej 50 do 75 znaków na wiersz, z 66 jako złotym środkiem. Za krótko, a oczy skaczą nieustannie; za długo, a ruch powrotny od końca jednego wiersza do początku następnego staje się zawodny. Większość stron rozciąga tekst od krawędzi do krawędzi na szerokich monitorach, lądując znacznie powyżej 120 znaków — daleko poza wygodnym zakresem.

Pomiar w jednostkach ch

CSS daje ci jednostkę zbudowaną dokładnie do tego zadania. Jednostka ch równa się szerokości znaku 0 w bieżącej czcionce. max-width równe 66ch śledzi zatem automatycznie twój wybór czcionki:

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

Ponieważ ch jest względne wobec czcionki, ta sama reguła utrzymuje dobrą miarę niezależnie od tego, czy strona używa wąskiego bezszeryfowego, czy szerokiego szeryfowego.

Zachowaj szerokie elementy szerokimi

Ograniczenie kolumny artykułu nie powinno uwięzić twoich obrazów i kodu w jej środku. Pozwól konkretnym dzieciom wyłamać się do pełnej szerokości, podczas gdy tekst pozostaje wąski:

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

Ujemny margines wyśrodkowuje pełnoszerokie dziecko względem wąskiej kolumny tekstu. Dostrój liczby do gustu — celem są media, które oddychają, podczas gdy proza pozostaje zdyscyplinowana.

Responsywny padding

Na telefonie sztywny max-width jest nieistotny, ale padding przy krawędzi ma znaczenie. Połącz oba, by reguła działała wszędzie:

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

Funkcja clamp() daje małym ekranom wygodny margines, a dużym hojny, bez ani jednego zapytania media.

Łączenie szerokości z rytmem

Szerokość działa najlepiej obok hojnych pionowych odstępów. Wąska kolumna z ciasną interlinią nadal wydaje się ciasna. Dodaj ten towarzyszący blok:

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

Zastosuj to jako regułę JustZix

Utwórz regułę, ustaw szeroki wzorzec URL, np. *://*/*, jeśli chcesz jej wszędzie, lub ogranicz ją do konkretnej publikacji. Wklej bloki szerokości i rytmu do panelu CSS i zapisz. Odwiedź kilka artykułów i dostrajaj wartość ch, aż wiersze będą naturalne — większość ludzi osiada między 60ch a 72ch.

Prawidłowa miara jest niewidzialna: po prostu przestajesz zauważać układ, a zaczynasz wchłaniać słowa. Przejrzyj nasze gotowe przykłady, aby zdobyć dostrojone presety, przeczytaj towarzyszący przewodnik o budowaniu pełnego trybu czytnika i pobierz JustZix, aby zacząć mierzyć.