lh birimi, CSS'de line-height (satır yüksekliği) değerine göre hesaplanan görece yeni bir uzunluk birimidir. Bir elementin hesaplanmış satır yüksekliğini temsil eder.

Temel Tanım

1lh, elementin kendi line-height değerine eşittir. Örneğin:

.element {
  font-size: 16px;
  line-height: 1.5; /* 24px */
  margin-bottom: 1lh; /* 24px olur */
}

Nasıl Çalışır?

lh birimi, kullanıldığı elementin hesaplanmış line-height değerini referans alır:

.card {
  font-size: 18px;
  line-height: 1.6; /* 28.8px */
  
  padding-top: 0.5lh;    /* 14.4px */
  margin-bottom: 2lh;    /* 57.6px */
  gap: 1lh;              /* 28.8px */
}

Miras ve Hesaplama

lh, line-height'ın nihai hesaplanmış değerini kullanır:

body {
  font-size: 16px;
  line-height: 1.5; /* 24px */
}

.content {
  font-size: 20px;
  /* line-height miras alınır: 1.5 × 20px = 30px */
  margin-top: 1lh; /* 30px olur */
}

Modern Tasarımdaki Yeri

1. Dikey Ritim (Vertical Rhythm)

lh birimi, tipografik ızgara sistemleri için mükemmeldir:

.article {
  font-size: 18px;
  line-height: 1.6;
  
  /* Tüm boşluklar satır yüksekliğinin katları */
  h2 {
    margin-top: 2lh;
    margin-bottom: 1lh;
  }
  
  p {
    margin-bottom: 1lh;
  }
  
  ul {
    margin: 1lh 0;
    padding-left: 2lh;
  }
}

Bu yaklaşım, metinler arasında tutarlı ve harmonik boşluklar oluşturur.

2. Dinamik Ölçeklendirme

Font boyutu değiştiğinde, lh bazlı boşluklar otomatik uyum sağlar:

.text-block {
  font-size: clamp(16px, 4vw, 24px);
  line-height: 1.5;
  padding: 1lh;
}

/* Küçük ekranlarda: 16px × 1.5 = 24px padding */
/* Büyük ekranlarda: 24px × 1.5 = 36px padding */

3. Responsive Tasarım

Farklı ekran boyutlarında orantılı boşluklar:

.content {
  font-size: 16px;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .content {
    font-size: 18px;
    /* line-height: 1.5 korunur ama değer 27px olur */
    /* Tüm lh bazlı değerler otomatik ölçeklenir */
  }
}

4. Component-Based Tasarım

Her komponentin kendi tipografik sistemini korur:

.card {
  font-size: 14px;
  line-height: 1.4;
  padding: 1lh;
  gap: 0.5lh;
}

.hero {
  font-size: 32px;
  line-height: 1.2;
  padding: 1lh; /* card'dan farklı ama orantılı */
}

Pratik Kullanım Örnekleri

Örnek 1: Blog Yazısı Düzeni

.blog-post {
  font-size: 18px;
  line-height: 1.6;
  max-width: 65ch;
}

.blog-post h1 {
  font-size: 2em;
  line-height: 1.2;
  margin-bottom: 0.5lh;
}

.blog-post h2 {
  margin-top: 2lh;
  margin-bottom: 1lh;
}

.blog-post p {
  margin-bottom: 1lh;
}

.blog-post blockquote {
  margin: 1.5lh 0;
  padding-left: 1lh;
  border-left: 0.2lh solid #ccc;
}

Örnek 2: Grid Layout

.grid {
  display: grid;
  gap: 1lh; /* Satır yüksekliği kadar boşluk */
  line-height: 1.5;
}

.grid-item {
  padding: 1lh;
}

Örnek 3: Form Elemanları

.form-group {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 1lh;
}

.form-label {
  display: block;
  margin-bottom: 0.5lh;
}

.form-input {
  height: 2lh; /* İki satır yüksekliğinde */
  padding: 0 0.5lh;
}

Em ve Rem ile Karşılaştırma

.comparison {
  font-size: 20px;
  line-height: 1.6; /* 32px */
  
  margin-bottom: 1em;  /* 20px - font-size'a göre */
  padding: 1rem;       /* 16px - root font-size'a göre */
  gap: 1lh;            /* 32px - line-height'a göre */
}

• em: Font boyutuna bağlı
• rem: Root font boyutuna bağlı
• lh: Satır yüksekliğine bağlı

Tarayıcı Desteği

lh birimi modern tarayıcılarda desteklenir:

• Chrome 109+
• Firefox 120+
• Safari 16.4+
• Edge 109+

Eski tarayıcılar için fallback kullanabilirsiniz:

.element {
  margin-bottom: 24px; /* fallback */
  margin-bottom: 1lh;
}

Avantajları

1. Tutarlılık: Dikey boşluklar her zaman tipografik ızgaraya uygun
2. Bakım kolaylığı: line-height değiştiğinde tüm boşluklar otomatik uyum sağlar
3. Okunabilirlik: Metinler arası boşluklar doğal ve orantılı
4. Esneklik: Farklı font boyutlarında otomatik ölçeklenir

Ne Zaman Kullanmalı?

lh birimini şu durumlarda tercih edin:

• Dikey boşlukları tipografik ızgaraya bağlamak istediğinizde
• Satırlar arası boşluklarla uyumlu margin/padding değerleri oluşturmak istediğinizde
• Font boyutu değiştiğinde orantılı ölçeklenen boşluklar gerektiğinde
• Component tabanlı, tutarlı tipografi sistemi kurarken

lh birimi, modern CSS'in getirdiği tipografi odaklı yaklaşımın güzel bir örneğidir ve özellikle içerik ağırlıklı sitelerde dikey ritmi korumak için oldukça değerlidir.