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.