Satır Yüksekliği (line-height) Hesaplayıcı

Bu araç ne işe yarar?

Line Height Calculator, yazı tipi boyutu ve oran girerek CSS line-height değerini hem piksel hem de birimsiz olarak hesaplar ve canlı önizleme sunar. Okunabilirliği etkileyen satır aralığını gözle deneme yanılma yapmadan belirlemenizi sağlar. Tipografiyi titizlikle ayarlayan tasarımcılar ve frontend geliştiriciler için pratik bir araçtır.

Nasıl kullanılır?

Değerleri ve seçenekleri ayarlayın.
Canlı önizlemede sonucu görün.
Üretilen CSS/kodu projenize kopyalayın.

Nasıl çalışır?

Girdiğiniz font boyutunu seçtiğiniz oranla çarparak piksel cinsinden satır yüksekliğini bulur ve aynı oranı birimsiz line-height değeri olarak verir. Örneğin 16px font ile 1.5 oranı 24px satır yüksekliği demektir. Canlı önizleme, seçtiğiniz değerin gerçek metin üzerinde nasıl göründüğünü anında gösterir.

Yaygın kullanım alanları

Gövde metni için rahat okunabilir satır aralığı (genelde 1.4–1.6) belirlemek, başlıklar için daha sıkı bir oran seçmek ve bir tasarım sistemi içinde tutarlı dikey ritim kurmak için kullanılır. Birimsiz değer kullanmak, alt öğelerin font boyutu değiştiğinde aralığın orantılı kalmasını sağladığı için özellikle önerilir.

Sıkça sorulan sorular

Birimsiz line-height neden px değerine tercih edilir?

Birimsiz değer, her öğenin kendi font boyutuna göre orantılı bir satır yüksekliği hesaplar, böylece iç içe geçmiş öğelerde aralık bozulmaz. Sabit px ise küçük yazıları sıkıştırabilir veya büyük yazıları çok geniş bırakabilir.

Gövde metni için ideal oran nedir?

Çoğu gövde metni 1.4 ile 1.6 arasında bir oranla rahat okunur. Başlıklar için 1.1–1.3 gibi daha sıkı, küçük etiketler için ise biraz daha geniş bir oran daha iyi sonuç verebilir.