O tym narzędziu

Kalkulator interlinii podpowiada wysokość linii, odstępy między literami i idealną maksymalną szerokość akapitu dla danego rozmiaru czcionki i zastosowania — tekstu głównego, nagłówków, etykiet UI lub krojów display — z podglądem na żywo i gotowym CSS.

Jak używać

  1. Wpisz rozmiar czcionki w pikselach.
  2. Wybierz styl: body text, heading, UI label lub display.
  3. Sprawdź akapit w podglądzie i cztery zalecane wartości.
  4. Kliknij Copy CSS, aby przenieść wartości do arkusza stylów.

Warto wiedzieć

  • Tekst główny czyta się wygodnie przy interlinii około 1.5–1.6 rozmiaru czcionki.
  • Duże nagłówki i kroje display wyglądają lepiej z ciaśniejszą interlinią, około 1.05–1.2.
  • Czytelna długość linii to mniej więcej 45–75 znaków.
  • WCAG 1.4.12 wymaga, by treść nadal działała, gdy użytkownik ustawi interlinię na 1.5 i odstępy między literami na 0.12 em.
  • Wartości line-height bez jednostki (np. 1.6) skalują się z rozmiarem czcionki każdego elementu.

Działa w całości w przeglądarce — nic, co wpiszesz, nie jest wysyłane ani zapisywane.

Najczęściej zadawane pytania

Jaka interlinia jest dobra dla tekstu głównego?

Około 1.5–1.6 rozmiaru czcionki. Dla tekstu 16 px to mniej więcej 24–26 px.

Czy nagłówki powinny mieć mniejszą interlinię?

Tak. Duży tekst potrzebuje mniej względnego odstępu, więc nagłówki zwykle mają 1.1–1.3, a tekst display jeszcze mniej.

Jaka jest idealna długość linii do czytania?

Mniej więcej 45–75 znaków w linii; dla tekstu głównego często podaje się około 65 jako ideał.

Czy w CSS używać line-height bez jednostki?

Zwykle tak. Wartość bez jednostki, np. 1.6, jest dziedziczona jako proporcja, więc elementy potomne o innym rozmiarze czcionki zachowują proporcjonalne odstępy.