Kısa cevap: Web tasarımda tipografi, yalnızca güzel bir yazı tipi seçmek değildir. Metnin boyutu, satır yüksekliği, satır uzunluğu, ağırlığı, boşlukları ve arka planla kontrastı birlikte okunabilirliği belirler. Bir başlık dikkat çekebilir; ancak uzun bir rehberin gövde metni yoruyorsa ziyaretçi aradığı bilgiyi bulmakta zorlanır.
Tipografi kararları hangi sorunu çözer?
Bir web sayfasını telefonda okurken sık sık yakınlaştırmak zorunda kalıyorsanız metin çok küçük olabilir. Masaüstünde bir paragraf tek satırda ekranın tamamına yayılıyorsa okur satır sonundan yeni satırın başına dönmekte zorlanabilir. Her iki sorun da içerik doğru olsa bile kullanım deneyimini zayıflatır.
| Karar | Bakılacak özellik | Örnek kontrol |
|---|---|---|
| Yazı tipi | Türkçe karakter desteği, harf ayrımı | ı, İ, ğ ve ş karakterlerini görün |
| Gövde boyutu | Gerçek cihazda rahat okuma | Telefonu yakınlaştırmadan okuyun |
| Satır yüksekliği | Satırların birbirine karışmaması | Uzun paragraf üzerinde test edin |
| Satır uzunluğu | Gözün bir sonraki satırı bulması | Dar ve geniş ekranı karşılaştırın |
| Kontrast | Metin ve zemin ayrımı | Metin bulunan tüm zeminleri ölçün |
Yazı tipi nasıl seçilir?
Önce içeriğin rolünü düşünün. Uzun bilgi yazılarında karakterleri kolay ayırt edilen, yaygın ve düzgün Türkçe karakter desteği sunan bir aile tercih edilebilir. Başlıklarda farklı bir aile kullanmak mümkündür; fakat sırf gösterişli görünsün diye her bölüme başka font yerleştirmek tutarlılığı bozar. En fazla birkaç ağırlık ve belirgin bir yazı ölçeği çoğu içerik portalına yeter.
Harici font dosyalarının sayısı da önemlidir. Bir tasarım beş farklı ağırlık indiriyorsa, ağ ve görüntüleme davranışını gerçek cihazda ölçün. Sistemde bulunan yazı tipleri bazı projelerde dış kaynak isteğini azaltabilir. Seçim yalnızca hız puanına göre yapılmamalıdır; Türkçe karakterlerin ve markanın görsel kimliğinin düzgün görünmesi de gerekir.
Başlık ve paragraf için uygulanabilir CSS örneği
Aşağıdaki değerler zorunlu SEO ölçütleri değil, denenebilecek başlangıç ayarlarıdır. Ekran genişliğine ve seçtiğiniz fonta göre ayarlanmalıdır:
.article {
max-width: 68ch;
margin-inline: auto;
padding-inline: 1rem;
font-family: system-ui, sans-serif;
font-size: 1rem;
line-height: 1.65;
}
.article h1 {
font-size: clamp(1.9rem, 4vw, 3rem);
line-height: 1.2;
}
.article h2 {
font-size: clamp(1.4rem, 2.7vw, 2rem);
line-height: 1.3;
}ch birimi seçilen yazı tipinin karakter genişliğine bağlıdır; bütün fontlarda aynı görsel satır uzunluğunu üretmez. clamp() ise belirlenen alt ve üst sınırlar arasında ekran genişliğine göre esnek boyut verir. Kodun görsel sonucu telefon, tablet ve masaüstünde denenmelidir.
Görsel başlık ile HTML başlığı aynı şey mi?
Hayır. Metni kalın ve büyük göstermek, onu HTML açısından otomatik olarak başlık yapmaz. Belgenin ana konusu uygun bir h1 ile tanımlanmalı; alt konular h2 ve gerektiğinde h3 ile mantıksal biçimde ayrılmalıdır. Yazı tipi ve boyutu CSS ile yönetilebilir. Bu yaklaşım hem ekran okuyucu ile gezinenler hem sayfanın düzenini anlamaya çalışan ziyaretçiler için daha açıklayıcıdır.
Kontrast ve erişilebilirlik kontrolü
Gri yazının açık gri arka plan üzerinde zarif görünmesi, rahat okunacağı anlamına gelmez. WCAG 2.2’nin genel metin için AA kontrast eşiği 4,5:1; büyük metin için 3:1’dir. Bununla birlikte yalnızca oranı tutturmak yeterli değildir: ince yazı ağırlığı, hareketli arka plan, çok uzun satırlar ve küçük tıklama alanları da kontrol edilmelidir.
Renk kontrastı ölçme rehberi ve ücretsiz kontrast aracı ile gerçek renk çiftlerini test edin. Başlıkların yeri ve sayfa iskeleti için web sitesi planlama rehberine bakabilirsiniz.
Yayın öncesi 7 maddelik kontrol listesi
- Türkçe karakterleri bütün kullanılan font ağırlıklarında gösterin.
- Gövde metnini gerçek telefonda, yakınlaştırmadan okuyun.
- Uzun paragrafların satır uzunluğunu masaüstünde kontrol edin.
- Başlıkların anlamlı HTML etiketleriyle kurulduğunu doğrulayın.
- Metin, bağlantı, düğme ve hata mesajı kontrastını ayrı ayrı ölçün.
- Tarayıcı yazı büyütme ayarında taşma ve üst üste binme olup olmadığını deneyin.
- Harici fontlar geç yüklendiğinde sayfanın kullanılabilir kaldığını kontrol edin.
Sık sorulan sorular
SEO için en iyi yazı tipi hangisi?
Google’da belirli bir font seçerek sıralama garantisi elde edemezsiniz. Önemli olan metnin kullanıcıya okunabilir, erişilebilir ve sorunsuz sunulmasıdır.
Her sayfada farklı font kullanılabilir mi?
Teknik olarak mümkündür; ancak gereksiz çeşitlilik tasarım tutarlılığını ve okunabilirliği zayıflatabilir.