Başlık ve tipografi

Başlık ve tipografi özelliklerini eklersin.

Yazı tipi ailesi: font-family

Blogun okunabilirliği yazı tipinden başlar. font-family özelliği, tarayıcının kullanacağı yazı tipini belirler. Birden fazla yazı tipi yazarsan tarayıcı sırayla dener; bulamadığının yerine bir sonrakini kullanır.

Gezi Günlüğü için sade ve okunaklı bir seçim yapalım:

body {
  font-family: Georgia, "Times New Roman", serif;
}

Sonuna serif yazmak, hiçbiri yoksa tarayıcının varsayılan serif yazı tipini kullanmasını sağlar.

Boyut ve kalınlık: font-size, font-weight

Yazının boyutunu font-size, kalınlığını ise font-weight ile ayarlarız. Boyut için piksel (px) yaygın ve nettir; kalınlık için 400 (normal), 700 (kalın) gibi sayılar ya da normal, bold anahtar kelimeleri kullanılır.

Blog gövdesinde 18 piksel, normal kalınlık iyi bir başlangıçtır:

font-size: 18px;
font-weight: 400;

Satır aralığı: line-height

Uzun blog yazılarında satırlar birbirine çok yakınsa okumak zor olur. line-height özelliği satırlar arasındaki dikey boşluğu ayarlar. Birimsiz bir sayı yazarsan, bu sayı yazı boyutuna çarpılır.

Örneğin line-height: 1.6, satır yüksekliğini yazı boyutunun 1,6 katına çıkarır. Bu, uzun paragraflar için rahat bir okuma aralığı verir.

Uygulama Body bölümünü ekle

Önceki dersin başlık yorumunu içeren dosyayı al. Altına bir body bölümü ekle ve içine dört bildirim yaz: font-family: Georgia, "Times New Roman", serif, font-size: 18px, font-weight: 400 ve line-height: 1.6. Her bildirim noktalı virgülle kapanmalı.

Örnek çözümü göster

/* Gezi Günlüğü stil sayfası */

body {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
}

Kendini test et

Hangisi geçerli bir font-family değeridir?
- Georgia, serif
- 18px
- #2b2b2b
- bold
Cevabı göster

Georgia, serif — Doğru. font-family yazı tipi adları listesidir; sonuna aile adı (serif, sans-serif) eklenir.
font-size değerini tamamla
```
font-size: ____;
```
Cevabı göster
```
font-size: 18px;
```
Özellikleri amaçlarıyla eşleştir

font-family

yazı tipi
font-size

yazı boyutu
font-weight

yazı kalınlığı
line-height

satır yüksekliği

Sıradaki ders: İçerik kutusu

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler