Yazı Fontları – Web Siteniz İçin Değişik Yazı Tipleri

Yazı fontları, bilgisayar ortamında hazırlanan yazıların değişik karakterler ve yazı şekilleriyle oluşturulmasını sağlar. Hazırlayacağınız dokümanlarda binlerce yazı karakteri seçeneği arasından birini kullanabilir, web siteniz için değişik yazı tipleri içinden seçim yaparak tasarımınıza en uygun görünümü yakalayabilirsiniz. Yazı tiplerinin en pratik özelliği, yazı tipi değiştirme işleminin birkaç saniyede yapılabilmesidir. Ancak bir web sitesinde doğru fontu seçmek, sadece estetik değil; okunabilirlik, marka algısı ve sayfa hızı açısından da önemli bir karardır.

Bu rehberde önce font ile ilgili temel kavramları netleştiriyoruz, ardından web siteleri için en çok tercih edilen 10 fonta ve günümüzün web font teknolojilerine (Google Fonts, WOFF2, font-display) yakından bakıyoruz. Sonunda Türkçe karakter desteği ve sık sorulan sorular var.

Font, Yazı Tipi ve Yazı Karakteri: Kavramlar

Günlük kullanımda hepsi birbirinin yerine geçse de, tipografide bu kavramların ince farkları vardır:

• Tipo aile (font family): Aynı tasarım mantığıyla çizilmiş harf grubudur. Örneğin “Arial” bir ailedir.
• Yazı tipi / font: Bir ailenin belirli bir kalınlık ve eğiminden oluşan varyantıdır; “Arial Bold” veya “Arial Italic” gibi.
• Tırnaklı (serif): Harflerin uçlarında küçük uzantılar (tırnaklar) bulunan fontlardır. Times New Roman, Garamond bu sınıfta yer alır; uzun metinlerde okumayı kolaylaştırır.
• Tırnaksız (sans-serif): Bu uzantıların olmadığı, daha sade ve modern fontlardır. Arial, Helvetica örneklerdir; ekranda ve küçük boyutlarda nettir.
• Monospace (eş aralıklı): Her harfin eşit genişlikte olduğu fontlardır; Courier gibi. Kod ve teknik metinlerde tercih edilir.

Dünyanın ilk fontunu, matbaayı da hayatımıza sokan Johannes Gutenberg’in hazırlattığı kabul ediliyor. Bugün bildiğimiz anlamda standart hale getirilmiş ilk font, 1455’te matbaada basılan ilk kitap olan İncil’de karşımıza çıkıyor. “Roman” yani dik bir yazı karakteristiğine sahip bu font, Romalıların alışık olduğu görünümde tasarlanmıştı. O günden bugüne binlerce font ailesi üretildi; bugün Google Fonts tek başına 1.700’den fazla açık lisanslı aileyi ücretsiz sunuyor.

Yazı Tipleri Bakış Açınızı Yansıtır

Web sitesi için font seçimi yapılırken sitenin konseptini ve bakış açısını yansıtacak font aileleri araştırılır. Çünkü içerikten önce ilk bakışta sitenin tasarımı ve bunun bir parçası olan yazı stili, sitenin genel estetiğini oluşturur. Bağlı olduğunuz font ailesi, içeriğinize temel bir anlam katar; her font bir bakış açısını tasarımsal bir anlamla ifade eder.

Font seçerken dikkat edilmesi gereken detayların başında sitenin genel içerik teması ve vermek istediği mesaj gelir. Hedef kitlenin özellikleri belirlenerek, alıcı kitlenin en çok hoşuna gidecek yazı tipleri seçilir. Ardından web sitesiyle uyumlu çalışabilecek font bulma aşaması devreye girer. Yazı tiplerinin de bir karakteri vardır: kalın, tırnaksız ve kaba fontlar daha cesur ve modern; ince kıvrımlı, tırnaklı fontlar daha zarif ve geleneksel kabul edilir. Asıl belirleyici ölçüt ise her zaman okunabilirlik ve göz yormamasıdır.

Web Sitesi İçin En Çok Tercih Edilen 10 Yazı Fontu

Web siteleri için en uygun olan ve ihtiyaçlar doğrultusunda tasarlanmış en yaygın 10 fonta göz atalım. Her birinin karakteri ve hangi tür sitelerde iyi durduğu farklıdır:

1. Arial

En yaygın kullanılan fontlardan biri ve HTML için en güvenli yazı tiplerinden sayılır. Online makale ve yazılı medya içeriğinin yoğun olduğu siteler bu fontu sık tercih eder. Windows ve macOS/iOS işletim sistemlerinde halihazırda yüklü gelir. 1982’de kullanıcılarla buluşan font, on kişilik bir grup tarafından tasarlandı; Helvetica’ya çok yakın olduğundan ikisi arasında yalnızca küçük farklar vardır.

2. Helvetica

Hakkında 80 dakikalık belgesel çekilmiş, dünyanın en popüler fontlarından biridir. Reklamlar ve logolar başta olmak üzere hemen her yerde görebilirsiniz. Tipografinin amacına çok uygun tasarlandığı için bu kadar yaygın; okunaklı, kolay algılanan ve net bir görünüm sunar. Başlangıçta yönlendirme işaretleri için tasarlanan font, zamanla trafik levhalarından reklam panolarına kadar pek çok alanda kullanıldı.

3. Times New Roman

Geleneksel bir yazı stili ve en bilinen tırnaklı fontların başında gelir; genellikle haber sitelerinde kullanılır. Tırnaklı yapısı okumayı ve algılamayı kolaylaştırır, ard arda okunan haberlerin kullanıcıyı yormamasını sağlar. İlk olarak The Times gazetesinin tipografisine yönelik bir eleştiri yazısı üzerine tasarlanmış ve gazetenin yeni yazı tipi olarak kullanılmaya başlanmıştır.

4. Open Sans / Roboto (modern sans-serif)

Broşür, afiş ve modern web kullanımlarına uygun, sade ve net sans-serif ailelerdir. Google Fonts üzerinden ücretsiz sunulan Open Sans ve Roboto, günümüz web sitelerinde en çok tercih edilen gövde fontları arasındadır. Tırnaksız, keskin hatlı yapıları küçük boyutlarda ve ekranda yüksek okunabilirlik sağlar. Eski rehberlerdeki “Sans-Serif” tanımı bir font değil, bu serifsiz aileleri kapsayan bir sınıftır.

5. Bodoni

Estetik yapısı ve grafiksel tasarımı ile medya sektörüne yakın sitelerde sık kullanılır. Grafik tasarım ve reklamcılık sektörlerinin vazgeçilmezi; dekoratif metinlerin yanı sıra logo tasarımlarında tercih edilir. Sofistike ve anlaşılır bir etki sunar. Adını 1798’de tasarımcısı Giambattista Bodoni’den alır ve Goodfellas filminin afişinde de kullanılmıştır.

6. Courier

Genellikle ciddi işleri olan ve teknik web sayfalarının fontu olarak bilinir. Hollywood’da senaryo yazarken bu fontun kullanılması nerdeyse standart haline gelmiştir. Eş aralıklı (monospace) yapısı okunaklı ve eşit bir görünüm sağlar; bu yüzden kod bloklarında ve teknik bildirimlerde idealdir.

7. Garamond

En sevilen serif fontlardan biri olan Garamond, zarif ve klasik bir karakter yansıtır. Tırnaklı yapısı sayesinde uzun metinlerin yer aldığı dergi, kitap ve haber sayfalarında sık tercih edilir. Hızlı okumaya olanak veren tasarımı nedeniyle birçok yayınevi tarafından kitap gövdelerinde kullanılır.

8. Trajan

Poster ve afiş tasarımları için tercih edilen, görkemli bir font. Bir film sitesi hazırlıyorsanız oldukça dikkat çekici başlıklar atmanızı sağlar. Roma tabletlerindeki yazı stilini yansıttığı için epik bir his uyandırır. Adını bir Roma imparatorundan alır ve genellikle yalnızca büyük harf (versal) olarak kullanılır; bu yüzden gövde metni için değil, başlıklar içindir.

9. Comic Sans MS

Dünyanın en tartışılan fontlarından biri. Profesyonel tasarımcılar tarafından fazla samimi/ciddiyetsiz bulunsa da, eğlenceli ve çocuklara yönelik içerikler için uygundur. İlginç bir not: disleksi rahatsızlığı bulunan bazı okurlar için harflerin ayırt edilebilirliği nedeniyle okumayı kolaylaştırdığı belirtilir. Kurumsal sitelerde önerilmez.

10. Cardo

Birçok dildeki özel karakterleri destekleyen, kalın, italik ve normal seçeneklerde kullanılabilen bir serif fonttur. Eski havası nedeniyle geleneksel markalarda köklü bir marka algısı yaratır. İlk olarak Orta Çağ ve İncil üzerine çalışan akademisyenler ve dilbilimciler için geliştirildi; tırnaklı yapısıyla kolay okunur.

Fontların Karşılaştırması: Hangisi Nerede Kullanılır?

Aşağıdaki tablo, popüler fontları sınıfı, karakteri ve en uygun kullanım alanına göre özetler. Bir font seçerken “ne için kullanacağım” sorusu, “hangisi daha şık durur” sorusundan daha önemlidir:

Font	Sınıf	Karakteri	En uygun kullanım
Arial	Sans-serif	Nötr, güvenli	Gövde metni, kurumsal site
Helvetica	Sans-serif	Net, profesyonel	Logo, reklam, başlık
Times New Roman	Serif	Geleneksel	Haber, basılı belge
Open Sans / Roboto	Sans-serif	Modern, sade	Web gövde metni (Google Fonts)
Bodoni	Serif (display)	Sofistike	Moda, dergi, logo
Courier	Monospace	Teknik, eşit	Kod, senaryo
Garamond	Serif	Zarif, klasik	Kitap, uzun metin
Trajan	Serif (versal)	Görkemli, epik	Film/etkinlik başlığı
Comic Sans MS	El yazısı tarzı	Samimi, eğlenceli	Çocuk içeriği (kurumsalda kaçın)
Cardo	Serif	Köklü, akademik	Akademik, çok dilli metin

Web Safe Font mu, Google Fonts mu?

Web sitelerinde fontlar iki şekilde kullanılır. Web safe (güvenli) fontlar, ziyaretçinin cihazında zaten yüklü olan Arial, Times New Roman, Georgia, Verdana gibi fontlardır. Bunları kullanınca tarayıcının ekstra bir dosya indirmesi gerekmez, sayfa anında çizilir; ancak seçenek sayısı sınırlıdır ve her cihazda birebir aynı görünmeyebilir.

Web fontları (Google Fonts gibi) ise sunucudan indirilen özel fontlardır. Bu sayede markanıza özel, her cihazda aynı görünen modern bir tipografi elde edersiniz. Bedeli, fontun indirilmesi gereken ekstra bir dosya olmasıdır; yanlış kurulursa sayfa hızını ve Core Web Vitals skorunu düşürebilir. HTTP Archive 2025 verilerine göre web fontlarının yaklaşık dörtte üçü artık modern WOFF2 formatında servis ediliyor.

Ölçüt	Web safe font	Web fontu (Google Fonts vb.)
Kaynak	Cihazda yüklü	Sunucudan indirilir
Çeşitlilik	Sınırlı (~10-15 font)	Çok geniş (binlerce font)
Yükleme hızı	Anında	Ekstra istek; optimize edilmeli
Tutarlılık	Cihaza göre değişebilir	Her cihazda aynı
Marka uyumu	Zayıf	Güçlü

Web Fontunu Hızlı Yüklemenin Yolu: WOFF2 ve font-display

Özel bir font kullanmak istiyorsanız, sayfa hızına zarar vermeden bunu yapmanın birkaç sağlam yöntemi var. Bu, hem ziyaretçi deneyimi hem de SEO açısından önemlidir; çünkü Google’ın Cumulative Layout Shift (CLS) metriğinin önemli bir kısmı font yüklemesinden kaynaklanır.

• WOFF2 formatı kullanın. WOFF2, eski WOFF formatına göre yaklaşık %30 daha iyi sıkıştırma sunar ve tüm modern tarayıcılarca desteklenir. Çoğu proje için yalnızca WOFF2 servis etmek yeterlidir.
• Fontu kendi sunucunuzdan servis edin (self-hosting). Fontu Google CDN yerine kendi hosting alanınızdan sunmak, üçüncü taraf bağlantısını ortadan kaldırır ve KVKV/GDPR açısından da daha temizdir. Gerçek ölçümlerde self-hosting, First Contentful Paint süresini önemli ölçüde düşürebiliyor.
• font-display: swap ekleyin. Bu @font-face özelliği, web fontu inene kadar metni yedek bir fontla anında gösterir; böylece “görünmez metin” (FOIT) sorununu önler. Ancak yedek font ile asıl font çok farklıysa küçük bir kayma oluşabilir.
• Yedek fontu metrik olarak eşleştirin. CLS’yi en aza indirmek için size-adjust, ascent-override ve descent-override özellikleriyle yedek fontu asıl fontun ölçülerine yakınlaştırın.
• Asıl fontu preload edin ve subset uygulayın. Sayfanın ilk görünen kısmındaki fontu <link rel=”preload”> ile önceden yükleyin; kullanmadığınız dil ve karakterleri fonttan ayıklayarak (subset) dosya boyutunu küçültün.

Bu optimizasyonların etkili olabilmesi için altyapının da uygun olması gerekir. LiteSpeed + LSCache gibi modern bir web sunucusu, doğru MIME tipi ve uzun önbellek (Cache-Control) ayarlarıyla font dosyalarını hızlı ve verimli servis eder. Alastyr’ın tüm WordPress hosting ve web hosting paketleri LiteSpeed altyapısı ile gelir; böylece WOFF2 fontlarınız doğru başlıklarla ve hızlı şekilde yüklenir.

Türkçe Karakter Desteği: Gözden Kaçan Detay

Türkçe içerik yayınlayan bir sitede font seçerken kritik bir ayrıntı, fontun Türkçe karakterleri tam desteklemesidir. Özellikle noktasız ı / İ, yumuşak ğ, ş, ç, şapkalı ö ve ü harfleri her fontta doğru çizilmez. Latin-Extended veya en azından Türkçe/Latin desteklemeyen bir font seçtiğinizde bu harfler ya eksik görünür ya da yanlış bir glif ile yer değiştirir; bu da hem profesyonellik hem okunabilirlik açısından sorun yaratır.

Google Fonts’ta bir fontu seçerken “Language” filtresinden Latin Extended desteğini kontrol edin. Arial, Times New Roman, Open Sans, Roboto, Montserrat ve Lato gibi popüler fontlar Türkçe karakterleri sorunsuz destekler. Subset uygularken de “latin-ext” alt kümesini dışarıda bırakmamaya dikkat edin.

Font Eşleme: Başlık ve Gövde Uyumu

İyi bir tipografi tek bir fontla değil, genellikle iki fontun uyumlu birlikteliğiyle kurulur. Yaygın ve güvenli yaklaşım, başlıkta serif – gövdede sans-serif (veya tersi) bir kontrast oluşturmaktır. Örneğin başlıkta Playfair Display (serif) ile gövdede Source Sans (sans-serif) klasik ve dengeli bir görünüm verir. Birkaç basit kural:

• Bir sayfada en fazla 2-3 font ailesi kullanın; daha fazlası dağıklık yaratır.
• Kontrastı net olan fontları eşleştirin; birbirine çok benzeyen iki font karmaşa yaratır.
• Gövde metni için daima okunabilirliği önceleyin; süslü fontları yalnızca başlık ve logoda kullanın.
• Satır aralığını (line-height) gövde metninde 1,5-1,7 arasında tutarak okumayı kolaylaştırın.

BONUS: Instagram Yazı Tipi Oluşturma

Instagram, yazıdan çok fotoğraf paylaşımı üzerine kurulu bir sosyal medya platformudur. Fotoğraf açıklamalarında şekilli yazı kullanmayı engelleyen bir politikası yoktur. Paylaşımlarını daha dikkat çekici hale getirmek isteyen kullanıcılar, online “instagram yazı tipi oluşturma” siteleri üzerinden şekilli yazılar hazırlayabilir. Bu araçlar aslında yeni bir font yüklemez; Unicode’daki özel sembol bloklarını kullanarak harflerin görünümünü değiştirir. Bu yüzden bazen ekran okuyucu ve arama işlevlerinde sorun yaratabilir; kurumsal iletişimde ölçülü kullanmak gerekir.

Sıkça Sorulan Sorular

Yazı fontu ile yazı tipi aynı şey mi?

Günlük kullanımda aynı anlamda kullanılır. Teknik olarak “font ailesi” aynı tasarımdaki tüm harf grubunu (örn. Arial), “yazı tipi” ise o ailenin belirli bir varyantını (örn. Arial Bold) ifade eder. Pratikte ikisini eşanlamlı kabul edebilirsiniz.

Web sitesi için en iyi font hangisi?

Tek bir “en iyi” font yoktur; seçim sitenin amacına bağlıdır. Gövde metni için Open Sans, Roboto, Arial gibi okunabilir sans-serif fontlar; uzun yazı ve haber siteleri için Georgia, Garamond gibi serif fontlar idealdir. En önemli ölçüt okunabilirlik ve markayla uyumdur.

Google Fonts ücretsiz mi ve ticari sitede kullanabilir miyim?

Evet. Google Fonts’taki fontların tamamı açık lisanslı (genellikle SIL Open Font License) olup hem kişisel hem ticari projelerde ücretsiz kullanılabilir. Fontu CDN’den çekebilir ya da indirip kendi sunucunuzdan servis edebilirsiniz.

Web fontu sayfa hızını düşürür mü?

Yanlış kurulursa evet, ama doğru yapıldığında etkisi çok küçüktür. WOFF2 formatı kullanmak, fontu kendi sunucunuzdan servis etmek, font-display: swap eklemek, gereksiz karakterleri ayıklamak (subset) ve önemli fontu preload etmek hız kaybını neredeyse ortadan kaldırır.

WOFF2 nedir ve neden tercih edilmeli?

WOFF2, web için geliştirilmiş sıkıştırılmış bir font formatıdır. Eski WOFF formatına göre yaklaşık %30 daha küçük dosya boyutu sunar ve tüm modern tarayıcılarca desteklenir. Bu sayede font daha hızlı iner. Çoğu proje için yalnızca WOFF2 servis etmek yeterlidir.

font-display: swap ne işe yarar?

Bir @font-face özelliğidir. Özel font inene kadar metni yedek bir sistem fontuyla anında gösterir, font yüklenince ona geçer. Böylece kullanıcı boş/görünmez metin (FOIT) yerine okunabilir bir sayfa görür. Bu, hem deneyimi hem LCP skorunu iyileştirir.

Fontum Türkçe karakterleri (ı, ğ, ş, ç, ö, ü) destekliyor mu, nasıl anlarım?

Google Fonts’ta fontu açıp “Language” bölümünden Latin Extended desteğini kontrol edebilirsiniz. Latin-ext destekleyen fontlar Türkçe karakterleri sorunsuz çizer. Subset uygularken “latin-ext” alt kümesini dahil etmeyi unutmayın; aksi halde şapkalı ve noktasız harfler eksik görünür.

Bir sitede kaç farklı font kullanmalıyım?

Genel kabul gören öneri, bir sayfada en fazla 2-3 font ailesi kullanmaktır. Çoğunlukla biri başlık (geniş ailenin bir-iki kalınlığı), diğeri gövde metni için yeterlidir. Daha fazla font hem dağıklık yaratır hem her ek font sayfaya yük bindirir.

Web fontunu kendi hosting alanımdan servis etmenin avantajı ne?

Fontu kendi sunucunuzdan (self-hosting) sunmak, üçüncü taraf bağlantısını kaldırarak yüklemeyi hızlandırır, KVKK/GDPR uyumunu kolaylaştırır ve önbellek/sıkıştırma üzerinde tam kontrol verir. LiteSpeed gibi modern bir altyapıda doğru MIME tipi ve uzun Cache-Control ayarıyla fontlar çok daha verimli servis edilir.