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