Renkler ve yazı tipleri

Başlamadan önce

Önceki dersteki örneği çalıştırmış olman ve dosya/çıktı ayrımını biliyor olman yararlı.

Öğrenme sırası: konuyu oku → çıktıyı tahmin et → örneği değiştir → alıştırmayı çöz → cevabını gerekçelendir.

Konu anlatımı

Tipografi sadece bir yazı tipi seçmek değildir. Metnin boyutu, satır aralığı, kalınlığı ve satır uzunluğu birlikte okunabilirliği etkiler. Uzun bir paragraf için fazla küçük yazı kullanmak veya bütün metni kalın yapmak gözün önemli bilgiyi ayırmasını zorlaştırır. Önce gövde metnini rahat okunur yap, sonra başlık ölçeğini belirle.

font-family bir tercih sırası belirtir. İlk yazı tipi yoksa tarayıcı sıradakini dener; sans-serif gibi genel aile bu zincirin sonunda güvenli bir dönüş yoludur. rem kök yazı boyutuna göre ölçeklenir. line-height değerini birimsiz yazmak, alt öğelerin farklı boyutlarında orantılı satır aralığı kurulmasına yardımcı olur.

Renk seçerken yalnızca beğeniye bakma. Yazı ile zemin arasında yeterli kontrast, bağlantıların ayırt edilebilirliği ve hata bilgisinin renk dışında da anlatılması önemlidir. Tasarımı küçük ekranda, yakınlaştırılmış görünümde ve farklı ışık koşullarını düşünerek değerlendir.

İlk örneği oku ve dene

<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f0f4ff;
  }
  p {
    color: #333333;
    font-size: 18px;
    line-height: 1.6;
  }
  strong {
    color: rgb(99, 102, 241);
  }
</style>

<p>CSS ile <strong>renkleri</strong> ve yazı tiplerini değiştirebilirsin.</p>

Açık mavi zemin üzerinde Arial yazı tipiyle koyu gri bir paragraf; "renkleri" kelimesi mor ve kalın görünür.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Adım adım neden böyle çalışıyor?

1. font-family listedeki ilk kullanılabilir yazı tipini seçer.
2. 1rem kök font-size değerine bağlıdır.
3. line-height:1.8 satır kutusunu yazı boyutuyla orantılar.
4. max-width:65ch uzun paragrafın satırını yaklaşık karakter genişliğiyle sınırlar.

<style>
body { font-family: system-ui, sans-serif; color: #182131; }
p { font-size: 1.125rem; line-height: 1.8; max-width: 65ch; }
a { color: #245f9e; text-decoration: underline; }
</style>
<p>Rahat okunabilen metin, genişlik ve boşlukla birlikte tasarlanır. <a href="#hedef">Kaynağı incele</a>.</p>

Okunabilir boyutta, sınırlı satır genişliğinde metin ve altı çizili bağlantı.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Kolaydan zora sen dene

1. Aynı paragrafı 1rem ve 1.25rem ile karşılaştır.
2. Satır aralığını 1.1 ve 1.8 yap; okumadaki farkı not et.
3. Tarayıcıyı yüzde 200 yakınlaştır; içerik kaybolmadan okunabiliyor mu?

<style>.metin{font:1.1rem/1.8 system-ui,sans-serif;max-width:60ch;color:#1e293b}</style>
<p class="metin">Bir paragrafın tasarımı, sözcükler kadar onları çevreleyen boşluklarla da ilgilidir.</p>

Sistem yazı tipiyle koyu renkli, rahat satır aralıklı bir paragraf.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Yaygın hata ve çözümü

1. Açık gri metni beyaz zeminde çok soluk bırakmak okunabilirliği düşürür; kontrastı ölç.
2. Uzun metne sabit height verip overflow:hidden kullanmak yakınlaştırmada içeriği kesebilir.

Kendini değerlendir

Ezberlemeden açıklayabiliyor musun?

font-family listesinin sonuna sans-serif yazmak ne sağlar?

Kendi çözümünde bir girdiyi değiştir. Çalıştırmadan önce beklenen sonucu yaz; gerçek sonuçla karşılaştır ve fark varsa hangi satırdan kaynaklandığını açıkla.

Kaynak ve çalışma ortamı

Örnekler küçük öğretim senaryolarıdır. Java/C#/PHP/Swift çalışma ortamını kendi cihazında ayrıca doğrula; yazılı sonuçlar beklenen davranışı açıklar.