Ziyaretçi sitenizde ilk olarak yazıyı okur; "profesyonel görünüyor" hissini renkten çok tipografi verir. Öte yandan yanlış kurulmuş bir yazı tipi zinciri, metnin ekrana gelmesini saniyelerce geciktirebilir. İyi tipografi bu iki işi aynı anda yapar: okunur ve hızlı.
Yazı tipi seçerken bakılacak dört şey
Türkçe karakter desteği
Bir yazı tipini onaylamadan önce şu diziyi yazıp bakın: ğĞ şŞ ıI iİ çÇ öÖ üÜ. Özellikle noktasız ı ve noktalı büyük İ birçok ücretsiz ailede ya eksiktir ya da yedek bir yazı tipinden gelir; sonuç, tek kelimenin içinde iki farklı harf tasarımı görmektir. Bu karakterler "latin-ext" alt kümesinde bulunur; dosya boyutunu düşürmek için alt küme çıkarırken "latin" ile yetinmeyin.
x-yüksekliği ve harf açıklığı
Küçük harf gövdesi yüksek, harf içi boşlukları açık aileler küçük puntoda ve parlak ortamda daha iyi okunur. Çok ince kesitleri (100-300 ağırlık) gövde metninde kullanmayın; telefonda açık gri zeminde kaybolurlar.
Rakam davranışı
Fiyat listesi, fatura veya rezervasyon tablosu olan sitelerde sabit genişlikli (tabular) rakam desteğini arayın. Aksi hâlde alt alta gelen tutarlar hizalanmaz ve tablo dağınık görünür.
Ağırlık sayısını sınırlayın
Bir gövde ailesi (400 ve 600 ya da 700) ve gerekiyorsa bir başlık ailesi yeter. Toplam dört dosyayı geçmeyin: her ek ağırlık ek istek, ek kilobayt ve ek bakım demektir.
Ölçek: boyut, satır yüksekliği, satır uzunluğu
Okunabilirliğin üç ayağı vardır ve üçü birlikte ayarlanır. Tek başına punto büyütmek işe yaramaz.
- Gövde boyutu: masaüstünde 17-18 piksel, mobilde 16 pikselin altına inmeyin. Form alanlarında 16 pikselin altı, iOS'ta odaklanınca sayfanın kendiliğinden yakınlaşmasına yol açar.
- Satır yüksekliği: gövdede 1,5-1,7; başlıklarda 1,1-1,25. Türkçedeki uzun bileşik kelimeler ve şapkalı harfler için alt sınırdan kaçının.
- Satır uzunluğu: 60-75 karakter. Geniş ekranda metin kolonuna yaklaşık 70 karakterlik bir üst genişlik verin; ekran boyunca akan paragraf yorucudur.
- Hiyerarşi: ardışık başlık düzeyleri arasında en az yüzde 20 boyut farkı bırakın, yoksa sayfa "düz" görünür ve taranamaz.
- Paragraf boşluğu: satır yüksekliğinin yaklaşık bir katı. Girinti yerine boşluk kullanın; ekranda girinti okumayı kolaylaştırmaz.
Boyutları sabit piksel yerine akışkan bir aralıkla (clamp benzeri bir yaklaşımla) tanımlarsanız, 360 pikselden 1600 piksele kadar ayrı ayrı kırılma noktası yazmanız gerekmez.
Hız: yazı tipi nasıl yüklenmeli?
Yazı tipleri sayfanın ilk boyanmasını bekleten kaynaklardır. Sıralama şu:
- Yalnızca woff2 yayınlayın. Eski formatları (ttf, eot, woff) taşımak dosya sayısını ve boyutu boşuna artırır.
- Kendi sunucunuzda barındırın. Üçüncü taraf bir font sunucusu ek bir alan adına bağlanma maliyeti getirir; ayrıca ziyaretçinin IP adresi başka bir sunucuya gider, bu da KVKK aydınlatma metninizde açıklanması gereken bir aktarımdır. Kendi sunucunuzdaki dosya bu iki sorunu birden çözer.
- Alt küme çıkarın. latin + latin-ext yeterlidir; Kiril veya Yunan alfabesini taşımayın. Kazanç yazı tipine göre çok değişir, bu yüzden tahmin etmeyin: alt küme çıkarmadan önceki ve sonraki dosya boyutunu kaydedip karşılaştırın.
- font-display ayarını bilinçli seçin. swap, metni önce yedek yazı tipiyle gösterir (yazı hemen okunur ama yer değiştirme olur); optional, yavaş bağlantıda özel yazı tipinden tamamen vazgeçer. Gövde metni için swap, dekoratif başlıklar için optional çoğu projede doğru tercihtir.
- Sadece ilk ekranda kullanılan dosyayı ön yükleyin. Her ağırlığı preload etmek, önceliklendirmeyi anlamsızlaştırır.
- Yedek zinciri metrik olarak yakın seçin. Özel yazı tipiniz ile yedek arasındaki genişlik farkı ne kadar azsa, geçiş anındaki kayma o kadar az göze batar. Grotesk bir gövde ailesi için makul bir zincir örneği: özel aileden sonra sırasıyla sistem arayüz yazı tipi, Arial ve genel sans-serif.
| Yöntem | Hız | Marka esnekliği | Not |
|---|---|---|---|
| Sistem yazı tipi yığını | En hızlı (sıfır indirme) | Düşük | Panel, blog ve içerik ağırlıklı siteler için fazlasıyla yeterli |
| Üçüncü taraf font servisi | Orta | Yüksek | Ek bağlantı maliyeti ve kişisel veri aktarımı konusu |
| Kendi sunucunuzda woff2 | Yüksek | Yüksek | Çoğu kurumsal site için önerilen varsayılan |
| Değişken (variable) font, self-host | Yüksek (tek dosya) | Çok yüksek | Üç ve daha fazla ağırlık kullanacaksanız avantajlı |
Sık yapılan hatalar
- Başlıkta dekoratif, gövdede de aynı dekoratif aileyi kullanmak. Karakterli yazı tipleri uzun metinde yorar.
- Tamamı büyük harf paragraflar. Türkçede büyük harf dönüşümü İ/I ayrımı yüzünden hatalı sonuç da verebilir; kısa etiketlerle sınırlayın.
- Açık gri metin. Gövde metniyle arka plan arasındaki kontrast oranını en az 4,5:1 tutun; "zarif" görünen açık gri, güneşte okunmaz.
- İki paragraf için ayrı bir yazı tipi ailesi eklemek. Her yeni aile ek indirmedir; mevcut ailenin ağırlık ve italik kesitleriyle çözün.
- Yalnızca kendi bilgisayarınızda kontrol etmek. Yazı tipi sizde kurulu olduğu için yerelde her şey doğru görünür; kontrolü gizli sekmede ve başka bir cihazda yapın.
Uygulanabilir özet
- Seçtiğiniz yazı tipinde Türkçe karakter setini gözle doğrulayın, latin-ext alt kümesini dahil edin.
- Gövde metnini 16-18 piksele, satır yüksekliğini 1,5-1,7'ye, satır uzunluğunu 60-75 karaktere sabitleyin.
- Yazı tiplerini kendi sunucunuza taşıyın, yalnızca woff2 bırakın ve dosya sayısını dörde indirin.
- font-display değerini gövde için swap, dekoratif başlık için optional yapın; sadece ilk ekrandaki dosyayı ön yükleyin.
- Yayına aldıktan sonra tarayıcının ağ sekmesinde toplam yazı tipi isteği ve boyutunu, bir kontrast denetleyicisiyle de gövde metnini yeniden ölçün. Hedef: dörtten az font isteği ve en az 4,5:1 kontrast.
