Meydan okuma - Tipografi

Tipografi özelliklerini birleştirerek bir makale sayfası biçimlendirirsin.

Tipografi özelliklerini hatırla

Bir makale sayfasında tipografi okunabilirliği belirler. font-family yazı tipi ailesini, font-size boyutunu, font-weight kalınlığı, line-height satır yüksekliğini ayarlar. text-align metni hizalar, color ise metnin rengini verir.

Başlık büyük ve yoğun, gövde ise gevşek satır aralığıyla okunur. Bir <article> içindeki h1 ve p için bu özellikleri birlikte kullanmak sayfayı derli toplu gösterir.

Uygulama Makale başlığını ve gövdeyi biçimlendir

Bir article h1 seçicisi ekle. color özelliğini #1a1a2e, font-size özelliğini 2.25rem, line-height özelliğini 1.2 değeriyle ata. Sonra bir article p seçicisi ekle: font-size özelliği 1.05rem, line-height özelliği 1.7 olsun.

Örnek çözümü göster

/* makale başlığı ve gövde */
article h1 {
  color: #1a1a2e;
  font-size: 2.25rem;
  line-height: 1.2;
}
article p {
  font-size: 1.05rem;
  line-height: 1.7;
}

Uygulama Önemli alıntı kutusunu biçimlendir

Bir .pullquote sınıf seçicisi ekle. font-style özelliğini italic, font-size özelliğini 1.25rem, color özelliğini #6a4c93 değeriyle ata. border-left özelliğini 4px solid #6a4c93, padding-left özelliğini 1rem yap.

Örnek çözümü göster

/* önemli alıntı kutusu */
.pullquote {
  font-style: italic;
  font-size: 1.25rem;
  color: #6a4c93;
  border-left: 4px solid #6a4c93;
  padding-left: 1rem;
}

Kendini test et

Makale başlığı için font-size değerini tamamla

article h1 {
  font-family: "Merriweather", serif;
  font-size: ____;
  font-weight: 700;
  line-height: 1.2;
}

Cevabı göster

article h1 {
  font-family: "Merriweather", serif;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
}

Uzun paragraflarda line-height: 1.7 neden tercih edilir?
```
article p {
  line-height: 1.7;
}
```
- Yazı tipini serif yapar
- Metni kalınlaştırır
- Satırlar arası boşluk artar, göz satırı rahat takip eder
- Paragrafı sağa hizalar
Cevabı göster

Satırlar arası boşluk artar, göz satırı rahat takip eder — Doğru. line-height satırlar arası dikey boşluğu ayarlar; 1.7 okunabilirliği artırır.
Tipografi özelliğini amacıyla eşleştir

font-family

Yazı tipi ailesini seçer
font-weight

Kalınlık yoğunluğunu ayarlar
line-height

Satırlar arası dikey boşluk
text-align

Yatay hizalama

Sıradaki ders: Meydan okuma - Kutu modeli

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler