Doğru tipografi, markayı bozmadan metni okunur ve hiyerarşik kılar. Bu rehberde font ailesi, boyut ölçeği, yükleme ve tutarlılık kararlarını adım adım ele alıyoruz.
Web sitesi tipografi seçimi, işletme sitesinin hem marka algısını hem de okuma deneyimini doğrudan şekillendirir. Ziyaretçi metni tararken başlıkları ayırt edemez, satırlar sıkışık görünür veya fontlar geç yüklenirse içerik ne kadar iyi yazılmış olursa olsun güven ve dikkat zayıflar. Bu rehber; renk paletinden bağımsız olarak okunabilirlik, hiyerarşi ve performans dengesini bozmadan font kararı vermeniz için pratik bir çerçeve sunar.
Amaç, “güzel görünen” bir yazı tipi bulmak değil; ekranda uzun metinlerde yormayan, arayüz etiketlerinde net kalan ve markanızın tonuna uyan bir sistem kurmaktır. Aşağıdaki adımlar, kurumsal tanıtım sitesinden e-ticaret vitrinine kadar uygulanabilir.
Web sitesi tipografi seçimi neden kritik?
Tipografi yalnızca estetik bir süs değildir. Başlık, alt başlık, gövde metni, buton ve form etiketleri aynı görsel dilde konuştuğunda ziyaretçi sayfayı daha hızlı tarar. Tutarsız font kullanımı ise “hazır şablon” hissi yaratır ve marka algısını zayıflatır.
İşletme sitelerinde tipografinin üç somut işlevi vardır:
- Okuma konforu: Hizmet açıklaması, ürün metni ve blog içeriği zahmetsiz taranır.
- Bilgi hiyerarşisi: Ne öncelikli, ne destekleyici netleşir.
- Marka tonu: Ciddi, samimi, teknik veya sade bir izlenim güçlenir.
KepezWeb projelerinde tipografi, tasarımın son rötuşu değil; bilgi mimarisi ve arayüz kararlarıyla birlikte planlanan bir katmandır. Font seçimini erken netleştirmek, sonradan tüm şablonları yeniden düzenleme ihtiyacını azaltır.
Font türlerini tanımak: hangisi ne işe yarar?
Seçime başlamadan önce font ailelerinin rolünü ayırmak işi sadeleştirir. Her tür her yerde iyi çalışmaz.
Sans-serif
Ekranda genelde daha sade ve modern görünür. Gövde metni, menü, form ve buton gibi arayüz metinlerinde sık tercih edilir. Kurumsal ve ürün odaklı sitelerde varsayılan başlangıç noktasıdır.
Serif
Klasik ve editoryal bir his verir. Uzun makale veya “hikâye anlatan” markalarda başlık ya da sınırlı gövde kullanımıyla karakter kazandırabilir. Küçük boyutta ve düşük kontrastta okunabilirlik kontrolü şarttır.
Monospace
Teknik içerik, kod örneği veya veri hizalaması için uygundur. Marka tipografisinin ana omurgası olarak nadiren seçilir.
Display / dekoratif
Yalnızca büyük boyutta, kısa vurgu metinlerinde işe yarar. Menü, form ve uzun paragraflarda kullanılmamalıdır; okunabilirlik ve erişilebilirlik riski yüksektir.
| Font türü | Güçlü olduğu yer | Dikkat edilmesi gereken |
|---|---|---|
| Sans-serif | Gövde, menü, arayüz | Çok benzer ailelerin karışması |
| Serif | Başlık, editoryal vurgu | Küçük boyutta detay kaybı |
| Monospace | Kod, teknik etiket | Uzun paragraflarda yorgunluk |
| Display | Hero slogan, kısa vurgu | Arayüz ve gövde metni |
Okunabilir font seçiminde temel kriterler
Markaya “uyuyor mu?” sorusundan önce “ekranda rahat okunuyor mu?” sorusunu sorun. Okunabilirlik bozulursa marka ifadesi de boşa gider.
X-height ve harf açıklığı
Küçük harflerin yüksekliği (x-height) yeterli olan aileler, özellikle mobilde daha net durur. Harfler birbirine yapışık veya aşırı açık görünüyorsa satır okuması bozulur. Aday fontu gerçek içerik metniyle, yalnızca “AaBbCc” örneğiyle değil, paragraf halinde test edin.
Rakam ve Türkçe karakter desteği
Fiyat, tarih, stok ve form alanlarında rakamlar net olmalı. Ayrıca ğ, ü, ş, ı, ö, ç karakterlerinin glifleri bozulmamalı, satır yüksekliğini şişirmemeli. Lisans ve dosya setinde Latin Extended desteğini kontrol edin.
Kalınlık ailesi (weight)
Tek bir Regular dosyasıyla hiyerarşi kurmak zordur. En az Regular ve Medium/SemiBold; başlık için Bold veya Black gibi kontrollü bir aralık işe yarar. Aşırı çok weight yüklemek hem dosya boyutunu artırır hem de tutarsız kullanım riskini büyütür.
Kontrast ve zemin ilişkisi
Tipografi rengi, arka planla yeterli kontrasta sahip olmalıdır. Açık gri metin üzerinde “modern” görünüm uğruna okunabilirliği düşürmek sık görülen bir hatadır. Bu rehber renk paletine odaklanmaz; yine de metin–zemin kontrastını font kararının parçası olarak test listesine ekleyin.
Tipografik hiyerarşi ve boyut ölçeği
İyi bir web sitesi tipografi seçimi, tek bir fontu beğenmekten çok tutarlı bir ölçek kurmaktır. Ziyaretçi H1, H2, paragraf ve küçük not arasındaki farkı düşünmeden algılamalıdır.
Sınırlı rol tanımı
Çoğu işletme sitesi için iki font ailesi yeterlidir: biri başlık, biri gövde/arayüz. Tek aile içinde weight ve boyut farkıyla da hiyerarşi kurulabilir; bu yaklaşım tutarlılığı ve yükü yönetmeyi kolaylaştırır.
Rolleri netleştirin:
- Display / H1: Sayfanın ana vaadi; kısa ve seyrek kullanılır.
- Başlıklar (H2–H3): Bölümleri ayırır; gövdeye göre belirgin ama bağırgan olmamalıdır.
- Gövde: Uzun okuma için sakin, dengeli satır uzunluğu.
- UI metni: Menü, buton, etiket, yardım metni; net ve kompakt.
- Küçük metin: Yasal not, zaman damgası; okunabilirlik eşiğinin altına inmemelidir.
Satır uzunluğu ve satır aralığı
Çok geniş satırlar gözün satır başını kaybetmesine yol açar; çok dar satırlar da ritim bozar. Gövde metninde satır aralığını fontun kendi yoğunluğuna göre ayarlayın: sıkışık görünen ailelerde aralığı biraz açmak okumayı rahatlatır. Mobilde satır uzunluğu doğal olarak kısalır; burada asıl risk, başlıkların ekranı taşıracak kadar büyük kalmasıdır.
Ölçek tutarlılığı
Rastgele piksel değerleri yerine orantılı bir tipografi ölçeği kullanın. Aynı oran mantığı kart, form ve blog şablonlarında tekrarlandığında site “tek elden çıkmış” görünür. CMS şablonlarına bu ölçeği değişken olarak taşımak, içerik ekleyen ekibin bozma payını azaltır. İçerik yönetim tarafında şablon disiplini için web sitesi için hangi CMS seçilmeli rehberi de karar sürecine eklenebilir.
Web fontları, sistem fontları ve performans
Güzel bir font, geç yüklendiğinde veya metni kaydırdığında deneyimi bozar. Tipografi seçimi performans kararıdır.
Sistem font yığını
İşletim sisteminin yerleşik fontlarına yaslanmak yükü azaltır ve metnin hızlı görünmesini sağlar. Marka ifadesi çok özgün olmak zorunda değilse, özellikle paneller ve iç araçlarda sistem yığını güçlü bir seçenektir.
Web fontu kullanacaksanız
Yalnızca gerçekten kullanılan weight ve stilleri yükleyin. Italic ve Black varyasyonları “ileride lazım olur” diye eklenmemelidir. Değişken font (variable font) uygun olduğunda birden fazla dosya yerine kontrollü bir eksen sunabilir; yine de dosya boyutunu ölçmeden karar vermeyin.
- Kritik metin için font-display stratejisini planlayın; görünmez metin süresini uzatmayın.
- Aynı aileden gereksiz kesitleri eleyin.
- Alt fallback fontları x-height ve genişlik olarak yakın seçin; yer değişiminde sayfa zıplamasını azaltırsınız.
- Önbellekleme ve CDN katmanını barındırma mimarinizle uyumlu kurun.
CLS ve okuma sürekliliği
Font geç yüklendiğinde metin boyutu bir anda değişirse düzen kayar. Özellikle hero alanı, fiyat ve CTA satırlarında bu kayma güveni zedeler. Tipografi testini yalnızca masaüstünde “güzel duruyor” seviyesinde bırakmayın; yavaş ağ ve mobil görünümde de kontrol edin.
Marka algısını bozmadan font kararı vermek
Okunabilir bir font, markanızın sesiyle çelişmemelidir. Hukuk bürosu ile çocuk ürünleri markası aynı display fontu taşıyamaz. Kararı şu sorularla sabitleyin:
- Marka tek kelimelik bir sıfatla anlatılsa ne olur: sade, teknik, sıcak, prestijli?
- Rakiplerin sitelerinde hangi aileler baskın? Farklılaşmak mı, kategoride güven vermek mi öncelik?
- Başlık fontu sloganı taşırken gövde fontu uzun metinde yoruyor mu?
- Logo tipiyle web fontu çatışıyor mu, yoksa aileyi tamamlıyor mu?
Kurumsal sitelerde abartılı display fontlar kısa vadede “farklı” görünse de güven dilini zayıflatabilir. Daha sakin bir omurga, vurguyu görsel ve içerikle taşımak genelde daha sürdürülebilirdir. Kurumsal web tasarım işlerinde tipografi, logo ve bileşen kütüphanesiyle aynı karar setinde ele alınır.
Tutarlılık kuralları yazın
Seçimi dosya olarak bırakmayın; küçük bir tipografi kılavuzu oluşturun:
- Hangi roller hangi font ve weight kullanır?
- Başlıklarda tamamı büyük harf var mı, yok mu?
- Buton metni cümle düzeni mi, title case mi?
- Blog, ürün kartı ve formlarda istisna var mı?
Bu kurallar olmadan her yeni sayfa “biraz farklı” büyür ve marka dağılır.
Uygulamada adım adım font seçim süreci
Kararı sezgiye bırakmak yerine kısa bir süreç işletin. Böylece ekip içi tartışma somut ölçütlere oturur.
- İçerik envanteri çıkarın: Uzun metin mi baskın, yoksa kısa kart ve form mu? E-ticarette fiyat ve varyant etiketleri yoğunsa UI netliği öne çıkar.
- 2–3 aday aile belirleyin: Her adayı gerçek metin, gerçek satır uzunluğu ve gerçek mobil genişlikte deneyin.
- Hiyerarşi maketini kurun: Aynı içerikle H1–H3, paragraf, buton ve küçük notu yan yana gösterin.
- Performans ölçün: Yalnızca kullanılan dosyaları yükleyin; yavaş bağlantıda metnin ne zaman okunur hale geldiğine bakın.
- İçerik ekibiyle doğrulayın: Editör paneline giren kişi kuralları bozmadan uygulayabiliyor mu?
- Kararı kilitleyin: Font dosyaları, lisans, fallback ve CSS değişkenlerini repoya ve tasarım sistemine işleyin.
Yeni bir site veya yenileme projesinde bu adımlar, web tasarım sürecinin görsel kimlik aşamasıyla paralel yürür. Son günde font değiştirmek, boşluk, kırılım ve bileşen ölçülerini yeniden açar.
Sık yapılan tipografi hataları
Aşağıdaki hataların çoğu iyi niyetle “daha etkileyici görünmek” için yapılır; sonuç genellikle dağınık bir arayüzdür.
- Üçten fazla font ailesi: Hiyerarşi netleşmez, yük artar.
- Her yerde display font: Menü ve formlar okunaksızlaşır.
- Aşırı ince weight: Özellikle açık zeminde ve düşük kaliteli ekranlarda kaybolur.
- Ortalanmış uzun paragraflar: Tarama zorlaşır; gövde metninde sola hizalı düzen genelde daha rahattır.
- Satır aralığını ihmal etmek: Güzel harf biçimi bile sıkışık satırda boğulur.
- Lisansı kontrol etmemek: Masaüstü lisansı web kullanımını kapsamaz; yayın öncesi web lisansı netleşmelidir.
- Yalnızca masaüstü beğenisi: Mobilde taşan başlıklar ve kırılan buton metinleri gözden kaçar.
KepezWeb ekibi tipografiyi “font dosyası seçimi” olarak değil; okuma, hız ve marka tutarlılığını birlikte koruyan bir sistem olarak ele alır. Sorun çoğu zaman tek bir kötü font değil, tanımsız roller ve ölçüsüz istisnalardır.
Sıkça Sorulan Sorular
Bir web sitesinde kaç font ailesi kullanılmalı?
Çoğu işletme sitesi için bir veya iki aile yeterlidir. Üçüncü bir aile ancak çok net bir rol (örneğin yalnızca kod veya özel bir kampanya vurgusu) varsa düşünülmelidir. Aile sayısı arttıkça tutarlılık ve performans maliyeti yükselir.
Başlık ve gövde için aynı fontu kullanmak sorun olur mu?
Hayır. Tek aile içinde weight ve boyut farkıyla güçlü bir hiyerarşi kurulabilir. Özellikle sade kurumsal markalarda bu yaklaşım hem yükü azaltır hem de bütünlüğü korur.
Google Fonts veya benzeri kütüphaneler her zaman doğru seçim midir?
Hızlı prototipleme ve yaygın aileler için pratiktir; ancak her projede varsayılan olmak zorunda değildir. Lisans, gizlilik, self-hosting ve yalnızca gereken kesitleri yükleme ihtiyacını projenin barındırma modeline göre değerlendirin.
Mobilde tipografi için ayrı font mu gerekir?
Genelde hayır. Aynı sistem, mobil için boyut, satır aralığı ve kırılım ayarlarıyla uyarlanır. Sorun font değişiminden çok, masaüstü için şişirilmiş başlık ölçeğinin küçük ekrana taşınmasıdır.
Font seçimini ne zaman kilitlemek gerekir?
Ana sayfa ve kritik şablon maketleri netleşmeden önce adayları elemek, geliştirme başlamadan önce de dosya, lisans ve CSS değişkenlerini kilitlemek en az sürtünmeli yoldur. Geç değişiklik tüm bileşenleri etkiler.
Tipografi kararınızı okunabilirlik, hiyerarşi ve performans ekseninde netleştirdiyseniz sıradaki adım bunu sayfa şablonlarına tutarlı uygulamaktır. Markanıza uygun font sistemi ve arayüz dilini birlikte kurmak için teklif al sayfasından KepezWeb ile iletişime geçebilirsiniz. İhtiyacınızı kısaca yazmanız, doğru kapsamı birlikte çerçevelememiz için yeterlidir.
