Satır yüksekliği ve aralık

line-height ve letter-spacing ile metin okunabilirliğini artırırsın.

Satır yüksekliği

Satır yüksekliği metnin bir satırından sonrakine olan dikey mesafedir; line-height özelliği ile ayarlanır. Değer bir sayı, piksel veya em olabilir.

Sayı yazarsan oran anlamına gelir: line-height: 1.5; yazı tipi boyutunun 1,5 katı demektir. 16px boyutta bir metinde bu 24px satır yüksekliği verir. Sayı birimi uzun paragraflarda okunabilirliği artırır.

Sıkışık metin (1'in altı) yorucu, çok gevşek (2'nin üstü) dağınık görünür.

Harf ve sözcük aralığı

Harfler arası boşluğu letter-spacing, sözcükler arasını word-spacing ayarlar. İkisi de piksel veya em ile yazılır.

Başlıkta hafif aralık metne hava katar: letter-spacing: 0.05em; harfleri biraz açar. Negatif değer yaklaştırır: letter-spacing: -0.02em; sıkı bir görünüm verir.

Sözcük aralığını yalnızca okunabilirliği bozuyorsa değiştir; çoğu yazı tipi varsayılanı iyi ayarlar.

Uygulama Paragrafı rahat okunur yap

p seçicisi için bir blok aç. İçine line-height: 1.6; ve letter-spacing: 0.02em; bildirimlerini ekle.

Örnek çözümü göster

p {
  line-height: 1.6;
  letter-spacing: 0.02em;
}

Kendini test et

line-height: 1.5; ne anlama gelir?
```
p {
  font-size: 16px;
  line-height: 1.5;
}
```
- Sabit 1.5 piksel satır yüksekliği
- Yazı tipi boyutunun 1,5 katı (24px)
- 1.5 satır atlanır
- Yazı tipi boyutu 1.5 piksel artar
Cevabı göster

Yazı tipi boyutunun 1,5 katı (24px) — Doğru. Birimsiz 1.5, yazı tipi boyutunun 1,5 katı demektir; 16px boyutta 24px satır yüksekliği verir.

Okunabilir satır yüksekliği

article {
  line-height: ____;
}

Cevabı göster

article {
  line-height: 1.6;
}

Özellik ve görevini eşleştir

line-height

Satırlar arası dikey mesafe
letter-spacing

Harfler arası yatay boşluk
word-spacing

Sözcükler arası boşluk
font-size

Metnin büyüklüğü
Harfler arası boşluğu hangi özellik ayarlar?
- line-height
- word-spacing
- font-size
- letter-spacing
Cevabı göster

letter-spacing — Doğru. letter-spacing harfler arası yatay boşluğu ayarlar.

Sıradaki ders: Metin hizalama ve dönüş

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler