CSS · Renkler ve yazı tipleri — videolu atölye

Renkler ve yazı tipleri

Renk, yazı boyutu ve satır aralığını okunabilir bir bütün olarak düzenlemek.

Kavramı kur

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.

Neden böyle çalışıyor?

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.

Çalışma sırası

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.

İkinci örnek · 1

font-family listedeki ilk kullanılabilir yazı tipini seçer. Kodun tamamı yazılı derste bulunur.

<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>

Beklenen sonucu oku

max-width:65ch uzun paragrafın satırını yaklaşık karakter genişliğiyle sınırlar.

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

Bir değeri sen değiştir

Aynı paragrafı 1rem ve 1.25rem ile karşılaştır. Satır aralığını 1.1 ve 1.8 yap; okumadaki farkı not et.

Hata nereden gelir?

Açık gri metni beyaz zeminde çok soluk bırakmak okunabilirliği düşürür; kontrastı ölç.

Kendi çözümünü kur

Tarayıcıyı yüzde 200 yakınlaştır; içerik kaybolmadan okunabiliyor mu? Yakınlaştırma metni büyütür; yerleşimin sabit yüksekliklerle kesilmediğini kontrol et.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

<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>

Kendini kontrol et

font-family listesinin sonuna sans-serif yazmak ne sağlar? Yanıt: Özel yazı tipleri kullanılamadığında genel bir yazı ailesine geri dönüş sağlar.

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