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.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
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.
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.
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.
Powiązane narzedzia: konwerter em/rem na piksele, piaskownica Flexbox i generator tooltipów CSS.