Kalkulator line-height CSS

Oblicz optymalną wartość line-height CSS dla danego rozmiaru fontu. Jednostki: unitless, em, px, %. Podgląd czytelności tekstu. Bezpłatnie.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia

Jednostka

Jednostka we fragmencie CSS

Tryb zaokrąglania

Rozmiar czcionki (px)

Wartość interlinii (line-height)

Rozmiar bazowy (root, px)

Zaokrąglij do siatki Opcja narzędzia

Siatka bazowa (px)

Wynik

Interlinia

24 px

line-height w pikselach dla podanej czcionki

Współczynnik

1,5

spełnia zalecenie WCAG 1.4.8 (≥ 1,5) dla tekstu głównego

1,5 em

równowartość w em

Rem

1,5 rem

przy rozmiarze bazowym root z formularza

Procent

150 %

równowartość w procentach

Po zaokrągleniu do siatki

24 px

siatka 4,00 px, do najbliższej

Kalkulator interlinii (line-height) – raport
==========================================
Rozmiar czcionki: 16px (1rem przy rozmiarze bazowym 16px)
Podana interlinia: 1,5 bez jednostki

Równoważne wartości:
  - 24px
  - 1.5 (bez jednostki)
  - 150%
  - 1.5em
  - 1.5rem

Po zaokrągleniu do siatki bazowej:
  - Siatka: 4px (do najbliższej)
  - 24px
  - 1.5 (bez jednostki)
  - 150%
  - 1.5em
  - 1.5rem

Fragment CSS (bez jednostki):
font-size: 16px;
line-height: 1.5;

Uwagi:
  - Ta interlinia mieści się w typowym zakresie czytelności dla interfejsu i tekstu podstawowego.
  - Wskazówka: line-height bez jednostki jest zwykle zalecany, bo skaluje się razem z font-size i nie powoduje niespodzianek przy dziedziczeniu.

Ściąga: typowe współczynniki interlinii (przy czcionce 16 px)

Przeliczenie jak w silniku: współczynnik × font-size — wpisz 1,5 przy 16 px, a kafelek pokaże 24 px
Współczynnik	Interlinia px	Typowe zastosowanie	Dostępność
1,0	16 px	nagłówki i duże napisy — ciasno, ale celowo	za mało dla tekstu głównego
1,2	19,2 px	ciało tekstu na szybkiej stronie — rozsądne minimum	na granicy czytelności
1,4	22,4 px	przyciski i elementy interfejsu (UI)	dobre dla krótkich etykiet, mało dla akapitów
1,5	24 px	tekst główny — czytelny standard	spełnia WCAG 1.4.8 (≥ 1,5)
1,8	28,8 px	długie artykuły, e-booki, dokumenty	luźno, ale wygodnie przy długich wierszach

Dla tekstu głównego (akapity) celuj w co najmniej 1,5 — to zalecenie kryteriów WCAG 1.4.8. Wartości poniżej 1,2 zostaw nagłówkom i krótkim etykietom, a powyżej 1,8 używaj świadomie, w długim tekście.

Ściąga: te same 24 px w każdej jednostce (font 16 px, root 16 px)

Wszystkie zapisy dają interlinię 24 px przy czcionce 16 px — różni je zachowanie przy dziedziczeniu
Jednostka	Zapis w CSS	Jak działa dziedziczenie
bez jednostki	line-height: 1.5;	× font-size — skaluje się razem z czcionką potomków
px	line-height: 24px;	stała wartość — nie skaluje się przy zmianie czcionki
%	line-height: 150%;	× font-size elementu; potomkowie dziedziczą przeliczoną wartość
em	line-height: 1.5em;	× font-size elementu; jak %, dziedziczenie po przeliczeniu
rem	line-height: 1.5rem;	× rozmiar bazowy root (tu 16 px) — przewidywalny w całym dokumencie

W jednostce px potomkowie zachowają 24 px nawet po zmianie font-size, a przy „bez jednostki” interlinia przeskaluje się sama — dlatego ta opcja jest domyślnie zalecana (silnik wypisuje ją też w uwagach raportu).

Warto wiedzieć — interlinia a typografia i dostępność

Dlaczego „bez jednostki”

Line-height bez jednostki mnoży font-size w każdym elemencie osobno, więc nagłówki i drobny tekst dostają proporcjonalną interlinię. Px „zamraża” wartość, a % i em dziedziczą już przeliczone piksele — potomek z mniejszą czcionką dostanie za dużą interlinię po rodzicu.

Polskie ogonki potrzebują miejsca

Znaki ą, ę, Ę schodzą wyraźnie poniżej linii podstawowej, a Ś, Ź, Ż wyrastają wysoko. Przy ciasnej interlinii (1,2 i mniej) ogonki jednego wiersza zahaczają o akcenty wiersza wyżej i tekst „skleja się” — w polskich tekstach testuj interlinię od 1,5.

WCAG i dostępność

Kryterium WCAG 1.4.8 zaleca interlinię co najmniej 1,5 w akapitach — kafelek „Współczynnik” pokazuje status ok/uwaga dla Twojej wartości. Dla dużych bloków tekstu pomaga też dłuższa miara wiersza (45–75 znaków) i wyraźny odstęp między akapitami.

Siatka bazowa i rytm pionowy

Zaokrąglenie interlinii do wielokrotności 4 lub 8 px utrzymuje rytm pionowy layoutu: odstępy, marginesy i wysokości elementów układają się w jedną kratkę. Silnik pilnuje minimum jednej kratki — zaokrąglenie nigdy nie zwróci line-height: 0.

Oceń to narzędzie:

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Kalkulator line-height CSS – czytelny tekst bez zgadywania

Line-height (wysokość linii) to jeden z najważniejszych parametrów typografii webowej. Zbyt mała: tekst jest nieczytelny i ciasny. Zbyt duża: strona wygląda "luźno" i tekst traci rytm. Kalkulator oblicza optymalną wartość dla danego font-size.

kalkulator line-height wysokość linii CSS line-height typography CSS typografia czytelność

Jak działa line-height

Line-height to odległość między liniami bazowymi (baseline) kolejnych wierszy tekstu. Składa się z: cap-height (wysokość wielkich liter) + descenders (ogonki) + leading (przestrzeń ponad i pod). Wartość unitless (np. 1.5): mnoży font-size. px: stała wartość. em: relatywny do font-size elementu. %: procent font-size.

Optymalne wartości line-height

Treść główna (body text, 14-18px): 1.4-1.6 (140-160%). Nagłówki (h1-h3, 24px+): 1.1-1.3 (110-130%). Małe etykiety (<12px): 1.2-1.4. Wąskie kolumny (<400px): 1.5-1.7 dla lepszej czytelności. Wieloliniowe cytaty: 1.6-1.8. Kod (monospace): 1.4-1.6. Zalecenie WCAG 1.4.12: co najmniej 1.5× font-size.

Dlaczego unitless jest najlepszy

line-height: 1.5 (unitless) vs line-height: 1.5em. Różnica: unitless dziedziczy wartość skalowaną do font-size potomka. 1.5em dziedziczy obliczoną wartość px rodzica. Przykład: rodzic 16px, dziecko 24px. Unitless: dziecko = 24×1.5=36px. em: dziecko dziedziczy 16×1.5=24px (za mały dla 24px tekstu).

Narzędzia typograficzne

Modular scale: zestaw harmonijnych rozmiarów tekstu i line-height opartych na stosunku (1.333, 1.414, 1.618). type-scale.com: generuj skalę typograficzną. Narzędzie: wpisz font-size, dostaj rekomendowaną line-height w różnych jednostkach z podglądem tekstu.

Jak kalkulator wylicza wysokość linii

Kalkulator opiera się na jednym prostym wzorze: line-height w pikselach = font-size w pikselach × wartość współczynnika. Gdy podajesz rozmiar tekstu i wybierasz wartość bez jednostki, narzędzie mnoży jedno przez drugie i pokazuje wynik w pikselach. Dla 16px i współczynnika 1.5 daje to 24px, dla 1.4 – 22,4px, a dla 1.6 – 25,6px. To ten sam wynik, jaki przeglądarka zapisze jako wartość obliczoną.

Różnica między jednostkami leży w sposobie dziedziczenia. Wartość bez jednostki jest przekazywana elementom potomnym jako mnożnik, więc dziecko z mniejszym font-size dostaje proporcjonalnie mniejszą interlinię. Procent i em są przeliczane do pikseli już na elemencie, na którym zostały zapisane, a dzieci dziedziczą tę jedną, stałą wartość. Dlatego kalkulator pokazuje przeliczenie na piksele, ale w arkuszu stylów bezpieczniej jest wpisać sam mnożnik.

Mechanizm renderowania też jest istotny. Przeglądarka buduje wiersz o wysokości równej line-height, a różnicę między tą wysokością a obszarem zajmowanym przez litery rozdziela po połowie nad tekstem i pod nim. Ta przestrzeń to leading. Zwiększenie line-height dodaje więc powietrze symetrycznie z obu stron wiersza, a nie tylko pod linią bazową.

Przykład: akapit 16px krok po kroku

Ustalamy rozmiar tekstu głównego: 16px. To wartość, którą wpisujesz w polu font-size kalkulatora.
Kalkulator przypisuje temu przypadkowi zakres z danych dziedzinowych dla treści głównej w przedziale 14-18px, czyli od 1.4 do 1.6.
Dolna granica: 16 × 1,4 = 22,4px. Tyle wyniesie wysokość wiersza, jeśli wybierzesz najciaśniejszy dopuszczalny wariant.
Górna granica: 16 × 1,6 = 25,6px. To wariant najbardziej przewiewny w zalecanym zakresie.
Wartość środkowa: 16 × 1,5 = 24px. Akapit złożony z trzech wierszy zajmie wtedy 3 × 24 = 72px wysokości.
Dla nagłówka nad tym akapitem o rozmiarze 32px stosujesz niższy zakres: 32 × 1,2 = 38,4px. W CSS zapisujesz line-height: 1.2 dla nagłówka i line-height: 1.5 dla tekstu głównego.

Tabela referencyjna: font-size i wynik w pikselach

Zastosowanie i rozmiar	Zalecany line-height	Wynik w pikselach
Tekst główny 14px	1.4-1.6	19,6-22,4px
Tekst główny 16px	1.4-1.6	22,4-25,6px
Tekst główny 18px	1.4-1.6	25,2-28,8px
Nagłówek 24px	1.1-1.3	26,4-31,2px
Nagłówek 32px	1.1-1.3	35,2-41,6px
Nagłówek 48px	1.1-1.3	52,8-62,4px

Jak wykorzystać wynik w arkuszu stylów

Zaczynaj od konkretnego font-size – line-height jest wartością względną, więc bez ustalonego rozmiaru tekstu wynik w pikselach nie ma sensu. Najpierw decydujesz o stopniu pisma, potem o interlinii.
Wpisuj w CSS wartość bez jednostki – dziedziczy się jako mnożnik i sama dopasowuje się do rozmiaru tekstu w każdym elemencie potomnym. Przeliczenie na piksele traktuj jako kontrolę, nie jako gotowy zapis.
Ustawiaj nagłówki osobnym zakresem – niższy współczynnik dla dużych stopni pisma to nie kwestia gustu, lecz różnicy w proporcjach liter. Jeden globalny line-height dla całej strony zwykle psuje albo akapity, albo nagłówki.
Testuj na najdłuższym akapicie – interlinia sprawdza się inaczej w krótkim wstępie i w gęstym bloku tekstu. Ocenę zaczynaj od fragmentu z największą liczbą wierszy.
Pamiętaj o długości wiersza – im dłuższa linia, tym łatwiej oko gubi początek następnego wiersza. Przy szerokiej kolumnie rozważ górną granicę zakresu albo skrócenie miary wiersza.

Czego kalkulator nie uwzględnia

Krój pisma i wysokość x-height – dwa fonty o tym samym rozmiarze mogą mieć wyraźnie różną wysokość małych liter i inne ogonki. Wynik jest punktem startowym, który warto zweryfikować na docelowym kroju.
Długość wiersza i szerokość kontenera – narzędzie nie wie, czy tekst składa się w wąskiej kolumnie, czy na pełnej szerokości ekranu. Ta sama wartość może działać dobrze w jednym układzie i źle w drugim.
Ustawienia użytkownika i technologie asystujące – powiększenie tekstu w przeglądarce, wymuszone odstępy przez rozszerzenia oraz tryby czytania zmieniają realne warunki odbioru niezależnie od Twojego CSS.
Rzeczywisty rendering w przeglądarce – zaokrąglanie wartości, skalowanie ekranu i różnice między silnikami powodują, że obliczona liczba nie zawsze pokrywa się z tym, co widzisz na urządzeniu.

Najczęstsze pytania

Jaka line-height spełnia WCAG 2.1?

WCAG 1.4.12 (Text Spacing): line-height co najmniej 1.5 razy większe niż font-size. Standard AA. Użytkownik musi móc zmienić line-height bez utraty treści (strona nie powinna "łamać się" przy dużych spacing). Sprawdź: bookmarklet Text Spacing (Adrian Roselli).

Jak line-height wpływa na SEO?

Pośrednio: czytelny tekst (dobry line-height) = niższy bounce rate = dłuższy czas na stronie = pozytywny sygnał UX dla Google. Google Core Web Vitals nie mierzy bezpośrednio line-height. Ale czytelność tekstowa wchodzi w zakres "Page Experience".

Co to jest "leading" i skąd pochodzi termin?

Leading (czytane "ledding"): dodatkowa przestrzeń między liniami, historycznie wstawiana przez ołowiane płytki (lead) między wiersze w drukarni. W CSS: space added to line-height beyond font metrics. Termin używany w Illustratorze, InDesign – nie bezpośrednio w CSS, ale koncepcja ta sama.

Jak wyliczyć line-height dla wieloliniowych nagłówków?

Problem: nagłówek h1 z dużym font-size (48px) i line-height: 1.1 = 52.8px między baseline. Gdy nagłówek zawija do 2 linii – wygląda normalnie. Ale h1 z line-height: 1.5 = 72px – zbyt dużo przestrzeni między liniami nagłówka. Zasada: nagłówki = mniejszy line-height (1.1-1.3), treść = większy (1.4-1.6).

Czy line-height wpływa na kliknięcia w interfejsie?

Tak – małe line-height na listach klikalnych linków utrudnia precyzję kliknięcia (Fitts's Law). WCAG 2.5.8 (Target Size): minimum 24×24px target size. Dla linii tekstu: padding-block: 8px na linii listy zapewnia odpowiedni target size niezależnie od line-height.

Czy line-height 1.5 to to samo co 150%?

Dla samego elementu liczbowo tak, wynik w pikselach będzie identyczny. Różnica pojawia się przy dziedziczeniu: wartość bez jednostki jest przekazywana jako mnożnik, a procent zamienia się w stałą wartość już na elemencie nadrzędnym.

Jaki line-height dla tekstu 16px?

Dla treści głównej zalecany zakres to 1.4-1.6, czyli od 22,4px do 25,6px. Wartość 1.5 daje 24px i jest bezpiecznym punktem wyjścia.

Czy mogę podawać line-height w pikselach?

Możesz, ale taka wartość nie skaluje się razem z rozmiarem tekstu. Jeśli zmienisz font-size w media query albo użytkownik powiększy czcionkę, interlinia pozostanie taka sama i proporcje się rozjadą.

Dlaczego nagłówki mają mniejszy line-height niż akapity?

Nagłówki składają się zwykle z jednej lub dwóch linii i mają większy stopień pisma. Zbyt duża interlinia rozbija je wizualnie i osłabia związek z tekstem, który się pod nimi znajduje.

Czy line-height ma znaczenie dla dostępności?

Tak. Kryterium WCAG 1.4.12 Text Spacing zakłada, że tekst akapitowy zachowa czytelność przy line-height wynoszącym co najmniej 1.5. Dlatego ta wartość jest sensownym domyślnym ustawieniem dla treści głównej.

Powiązane narzedzia: konwerter em/rem na piksele, piaskownica Flexbox i generator tooltipów CSS.