Web Tipografisi: Yazı Tipleri Dönüşümünü Nasıl Belirler

Steve Jobs 1985'te tipografiye duyduğu merak yüzünden bir hat sanatı kursuna girdi – bu karar olmasaydı bilgisayarlarda güzel yazı tipleri olmayacaktı. Hikâyeyi neredeyse herkes bilir. Çıkarımı neredeyse kimse yapmaz: Web tipografisi bir süs detayı değil, ziyaretçilerin sitenin %95'ini algıladığı disiplindir. Web büyük oranda metindir – ve bir kullanıcının zahmetsizce okuyamadığı her harf, yapamadığın bir dönüşümdür.

Hannover'daki Storyable'da neredeyse her yenilemede aynı şeyi görüyoruz: Müşteri haftalarca renkleri tartışmış, ama yazı tipi rastgele bir Google Fonts tıklamasıydı. Asıl kaldıraç tam orada. Bu rehber, web tipografisini bir dönüşüm aracı olarak nasıl kullanacağını gösteriyor – tasarım jargonu olmadan, net rakamlarla ve hemen uygulayabileceğin bir sistemle.

Yazı tipi dönüşümü neden renkten daha sert belirler

Bir web sitesinin ikna etmek için ortalama on saniyesi vardır. Bu sürede kimse özenle yazdığın değer önermeni okumaz – kullanıcılar tarar. Nasıl taradıkları doğrudan yazının kurgusuna bağlıdır. Bu tarama davranışını F-Pattern, Z-Pattern ve okuma davranışı yazısında ayrıntısıyla işledik – tipografi, bu kalıpları kullanabilmeni sağlayan araçtır.

Yazıyı dönüşüm kaldıracı yapan üç etki:

• Okunabilirlik bilişsel yükü düşürür. "Bilişsel akıcılık" araştırmaları gösteriyor: kolay okunan şey daha doğru, daha güvenilir ve daha basit algılanır. Zor okunan metin, iyi bir teklifi bile karmaşık gösterir.
• Yazı tipi marka kişiliğini milisaniyede taşır. Oynak el yazısı kullanan bir hukuk bürosu, tek kelime okunmadan güveni kaybeder. Yazının güveni nasıl inşa ettiğini web tasarımda E-E-A-T ve güven sinyalleri yazısında derinleştiriyoruz.
• Yazı tipi yükleme süresini belirler. Web fontları çoğu zaman ilk sayfa kurulumundaki en büyük geciktirici etkendir – aşağıda detaylı.

Punto, satır yüksekliği, satır uzunluğu: okunabilirlik üçgeni

En sık sorulan soru "Hangi yazı tipini seçeyim?" – yanlış soru. Okunabilirlik tek başına yazı tipinden değil, üç değerin birlikte çalışmasından doğar.

Punto: küçük düşünmeyi bırak

16px gövde metni için kesin alt sınırdır. İçerik sayfaları ve bloglar için 18–20px artık standarttır, çünkü ekranlar büyüdü ve okuma mesafeleri değişkenleşti. Başlıklar net sıçramalara ihtiyaç duyar – gövde metninden yalnızca biraz büyük bir H1, hiyerarşi yaratmaz, dolayısıyla tarama çapası da yaratmaz.

Satır yüksekliği: boşluk israf değildir

Gövde metni için yaklaşık 1,5 (yani puntonun %150'si) satır yüksekliği kanıtlanmış değerdir – erişilebilirlik yönergeleri (WCAG) paragraflar için en az 1,5 önerir. Çok sıkışık dizilmiş metin, gözü satır geçişinde doğru sıradaki satırı aramaya zorlar. Bu yorar ve çıkma oranını artırır.

Satır uzunluğu: unutulan ayar düğmesi

En önemli, en sık göz ardı edilen değer: satır başına 45–75 karakter. 1.400px üzeri tam tarayıcı genişliği, boşluğa cesaret değildir – okumayı engellemektir. Uzun satırlarda göz bir sonraki satıra dönüşü ıskalar.

Serifli mi serifsiz mi? Asıl önemli olan yazı tipi seçimi

"Serifli baskı, serifsiz web içindir" kuralı eskidi. Yüksek çözünürlüklü ekranlarda serifli yazılar uzun metinlerde bugün sorunsuz okunuyor – New York Times veya Medium her gün bunu kanıtlıyor. Belirleyici olan serifli/serifsiz değil:

Çoğu kurumsal site için kanıtlanmış bir kalıp işe yarar: başlıklar için karakterli bir yazı (marka kişiliği) artı gövde için son derece okunabilir, nötr bir yazı. Aynı mantık, saniyeler içinde dönüşmesi gereken hero bölümün için de geçerlidir: başlık duyguyu taşır, alt metin zahmetsiz okunabilir kalmalı.

Bu tipografik kimlik kurumsal tasarımının parçasıdır ve ciddi her logo ve marka konseptine aittir. Sitede çıkan ama başka hiçbir yerde olmayan yazı, rastgele görünür – ve rastgele satmaz.

Font yükleme: web tipografisinin performans tuzağına döndüğü yer

Burası işin teknik tarafı – ve çoğu site tam burada gereksiz yere sıralama ve dönüşüm kaybeder. Web fontlarının önce yüklenmesi gerekir. O ana kadar olanlar iki Core Web Vitals değerini belirler.

FOIT (Görünmez Metin Parlaması): Tarayıcı yazıyı bekler ve hiçbir şey göstermez. Kullanıcılar saniyenin kesirleri boyunca boş alan görür – Largest Contentful Paint için kötü.

FOUT (Stilsiz Metin Parlaması): Tarayıcı önce sistem yazısını gösterir, sonra web fontuna geçer. Kısa süre dalgalı görünür ama performans için neredeyse her zaman daha iyi seçimdir – font-display: swap ile yönetilir.

Storyable'da font performansını kontrol ettiğimiz adımlar:

• Google CDN yerine self-hosting. Veri güvenliği açısından temiz ve daha hızlı, çünkü yabancı sunucuya bağlantı (DNS, TLS) gerekmez.
• Modern formatlar (WOFF2) ve yalnızca gerçekten kullanılan kesitleri sunmak. Her ek kesit yükleme süresidir.
• Kritik başlık yazısı için preload, böylece yükleme sürecinde erken talep edilir.
• Subsetting: tüm karakter seti yerine yalnızca gereken karakterler (örn. Türkçe ve Almanca içerik için Latin + Latin-Extended).

Bunun sıralamaya neden yansıdığını Core Web Vitals ve yükleme süresi yazısında ayrıntısıyla anlattık. Özet: kötü font yüklemesi denetimlerde bulduğumuz en sık üç CLS nedeninden biridir – ve web tasarım sürecinde ölçülebilir biçimde en hızlı iyileşen noktadır.

Bir denetimde en sık bulduğumuz 5 tipografi hatası

Hannover'da onlarca mevcut siteyi yeniden inşa etmeden önce inceledik. Hep aynı hatalar çıkıyor:

1. "Daha şık görünsün" diye 16px altı gövde metni. Tasarımcının 27 inç ekranında şık görünür. Telefonundaki 54 yaşındaki karar verici için eziyettir – ve hedef kitlen tam olarak odur.
2. Beyaz zeminde açık gri yazı. Tasarımcı portfolyolarının klasiği. Görseller için işe yarar, satış metni için değil. Kontrast 4,5:1'in altına düştüğü an, yaşlı kullanıcılar ve görme zorluğu yaşayanlar okumayı bırakır.
3. Satır uzunluğu sınırı olmadan tam ekran genişliği. Geniş monitörde satır başına 140 karakter oluşur. Göz satır geçişinde izi kaybeder – kalma süresi düşer.
4. Çok fazla yazı tipi ve kesit. Dört yazı tipi, yedi ağırlık – her dosya yükleme süresi, görüntü dağınık, marka tanınırlığını yitirir.
5. Gerçek hiyerarşi yok. H1, H2 ve gövde metni birbirinden çok az farklı. Net sıçramalar olmadan tarayan kullanıcı bir giriş noktası bulamaz.

İşin sinsi yanı: bu hataların her biri tek başına küçük. Toplamı ise profesyonel web sitenin güvenilir bir şirket gibi mi yoksa baraka çözümü gibi mi göründüğünü belirler.

Duyarlı tipografi: sabit breakpoint yerine clamp()

İnatçı bir yanlış anlama: bir masaüstü boyutu, bir mobil boyut tanımla, bitti. Sonuç sıçramalardır – breakpoint'te başlık aniden küçülür, çoğu zaman tam okunabilir olduğu yerde, ya da çok büyük kalıp çirkin biçimde alt satıra geçer.

Modern web tipografisi akışkan ölçeklenir: punto, mantıklı bir minimum ve maksimum değerle sınırlanarak görünüm alanıyla kademesiz büyür (CSS'te clamp() ile). Başlık böylece küçük telefonda asla çok büyük, 4K monitörde asla kaybolmaz – bir düzine media query olmadan.

Bu doğrudan mobil öncelikli mantığa bağlanır: tipografiyi akışkan düşünen, her breakpoint için elle ayar yapmaz, kendini uyarlayan bir sistem tanımlar. Daha az kod, daha az bakım, her cihazda daha tutarlı okunabilirlik.

Türkçe içerikte tipografinin gözden kaçan tuzağı

Almanca için tasarlanmış birçok yazı tipi, Türkçe karakterlerde zayıflar. En sık görülen sorun noktasız ı ile büyük İ: kötü çizilmiş bir yazıda bunlar i ve I ile karışır, metin "yabancı" hissi verir ve güveni sarsar. Aynı şey ş, ğ, ç için de geçerli – aksan ve kuyruklar küçük puntolarda kaybolabilir.

Pratikte bu, yazı tipi seçiminde tek bir test demektir: gerçek Türkçe gövde metnini, gerçek puntoda, gerçek bir Windows ekranında oku. Tasarımcının Mac'inde "İçeriğiniz güvende" cümlesi mükemmel görünebilir; müşterinin tarayıcısında aynı cümle dağılabilir. İki dilli bir site işletiyorsan – ki Hannover'daki birçok müşterimiz öyle – yazı hem Almanca hem Türkçe karakter setini kusursuz taşımalı, yoksa iki dilden biri her zaman ikinci sınıf görünür.

Variable Fonts: tek dosya, çok kesit

Variable fonts 2026'da artık bir deney değil, çoğu zaman en performanslı çözümdür. Her kesit (Regular, Bold, Italic …) için ayrı dosya yüklemek yerine, bir variable font tüm kademeleri tek dosyada içerir – ağırlık, genişlik ve kısmen optik boyut kademesiz ayarlanabilir.

Avantajı: daha az HTTP isteği, daha küçük toplam boyut, daha hassas tipografik kontrol (örneğin büyük başlıklar ile küçük gövde metni için biraz farklı çizgi kalınlığı). Ayrıştırılmış tipo hiyerarşisi olan markalar için bu gerçek bir performans ve tasarım kazancıdır – yeter ki yalnızca kullanılan eksenler sunulsun.

Variable fonts modern, hareketli arayüzlerin de yapı taşıdır. Performanstan ödün vermeden hareketin nasıl kullanılacağını Core Web Vitals'a zarar vermeyen mikro etkileşimler yazısında gösteriyoruz.

Yazı, markanın sesidir – logo olmasa bile

Tanıdık bir web sitesinden logoyu ve renkleri zihninden sil. Çoğu durumda markayı yine de tanırsın – yazısından. Tipografi, ekranda en çok yer kaplayan marka öğesidir: her alt sayfada, her satırda var; logo ise yalnızca köşede oturur.

Tam bu yüzden müşteri projelerinde yazıyı bir kimlik öğesi gibi ele alıyoruz, teknik bir ayar gibi değil. JET-SV gibi bir projede tipo hiyerarşisi, görsellerle aynı ölçüde algıyı taşır – sakin, net, kullanıcı bilinçli olarak fark etmeden. İyi tipografi göze çarpmaz. Kötüsü hemen çarpar, üstelik olumsuz biçimde.

Pratik sonuç: yazı tipi kararları, bütçe daralıp "okunur herhangi bir yazı yeter" denmeden önce, logo ve markalama ile uyumlu olarak projenin başına aittir. Sitende çıkan ama kartvizitinde, sunumunda, sosyal medyanda olmayan bir yazı, marka değil tesadüf üretir – ve tesadüf, ziyaretçiyi müşteriye dönüştürmez.

Web tipografisi ve erişilebilirlik: ek değil, zorunluluk

Erişilebilirlik birçok işletme için artık hukuki bir yükümlülük – ve tipografi merkezi bir faktör. Somut olarak:

• Kontrast: Gövde metni arka plana karşı en az 4,5:1 oranına ihtiyaç duyar (WCAG AA). Beyazda açık gri bir tasarım ifadesi değil, bir dışlama kriteridir.
• Ölçeklenebilirlik: Metin, içerik kaybolmadan %200'e büyütülebilmeli – bu da sabit piksel yerine göreli birimleri (rem) destekler.
• Bilgi yalnızca yazıyla verilmemeli: Önemli uyarılar sadece yazı rengi veya kesitiyle aktarılmamalı.

İyi web tipografisi ve erişilebilirlik zıt değil, aynı hedeftir. Bunun yasal olarak ne anlama geldiğini erişilebilirlik (BFSG 2025) yazısında çözümledik. Okunabilirliği ciddiye alan, gerekliliklerin büyük kısmını zaten karşılar.

6 adımda web tipografisi sistemin

Bir projede izlediğimiz yol – kontrol listesi olarak alabilirsin:

1. İki yazı seç: biri başlık (karakter), biri gövde (okunabilirlik). Türkçe ve Almanca karakter setini kontrol et.
2. Type-scale belirle: rastgele boyutlar yerine tanımlı kademeler (örn. gövde 19px, yukarı doğru uyumlu ölçeklenmiş).
3. Okunabilirlik üçgenini kur: satır yüksekliği ~1,5, satır uzunluğu 45–75 karakter, net hiyerarşi sıçramaları.
4. Self-host: WOFF2, subsetting, yalnızca kullanılan kesitler, veri güvenliğine uygun.
5. Yükleme stratejisi: font-display: swap, kritik yazı için preload.
6. Erişilebilirliğe karşı test et: kontrast ≥ 4,5:1, rem birimleri, %200 zoom testi.

Sonuç: web tipografisi sahip olduğun en ucuz dönüşüm optimizasyonudur

Web sitenden daha fazlasını almak için yeni bir tasarım ödemen gerekmez. Temiz web tipografisi – doğru punto, düşünülmüş bir okunabilirlik üçgeni, performanslı self-hosting ve tutarlı erişilebilirlik – aynı anda okunabilirliği, hızı, hukuki güvenliği ve marka etkisini iyileştiren ender bir kaldıraçtır. Üstelik görece az çabayla.

Tam bu yüzden Hannover'da yazı bizim için son adım değil, ilk adımlardan biridir. Web tasarımda yazı tiplerini süs gibi gören, her gün bunu yapmayan rakiplere müşteri kaptırır. Bir sonraki yenilemeden önce tek bir şey yap: sitenin gövde metnini telefonundan, gün ışığında oku. Zorlanıyorsan, ziyaretçilerin de zorlanıyor – ve zorlanan ziyaretçi satın almaz.

Cagri Ersöz

Siten hızlı mı yükleniyor – yoksa ziyaretçiler yazını mı bekliyor?

Mevcut web sitenin yazı tipi seçimini, okunabilirliğini, font yüklemesini ve veri güvenliği uyumunu inceleyip dönüşüm ile sıralamanın nerede kaybedildiğini somut olarak gösteriyoruz.

Ücretsiz tipografi kontrolü talep et