2026'da web siteleri için en iyi fontlar: 15 ücretsiz Google Fontu gövde metni ve başlıklar için sıralandı; her fontun lisansı, tasarımcısı, CSS fallback yığını ve eşleşmesi ile birlikte; ayrıca fontları nasıl seçeceğiniz, eşleştireceğiniz ve hızlı yükleyeceğiniz.
Gövde metni için Inter, Source Sans 3 ve Roboto güvenli, yüksek okunabilirliğe sahip seçimlerdir: büyük x yüksekliği, birçok kalınlık ve geniş dil desteği; tümü Google Fonts'ta SIL Open Font License kapsamında ücretsiz. Kişilikli başlıklar için bunlardan biriyle Lora veya Playfair Display gibi bir serif eşleştirin. En iyi font, gerçek içeriğinizle bir telefonda 16 ile 20px'te iyi okunan fonttur.
Hemen her site için bir veya iki yazı tipi ailesi yeterlidir: biri başlıklar, biri gövde metni için ya da farklı kalınlıklarda kullanılan tek bir aile. Her ekstra aile görsel gürültü ve indirilecek ekstra dosyalar ekler.
16px yaygın başlangıç değeridir ve çoğu tarayıcıda varsayılandır. Birçok site uzun okumalar için 17 ile 20px kullanır. Gövde metni için satır uzunluğunu yaklaşık 50 ile 75 karakter, satır yüksekliğini yaklaşık 1,5 civarında tutun.
Google Fonts kütüphanesindeki yazı tipleri açık lisanslarla yayımlanır; çoğu, ticari kullanıma izin veren SIL Open Font License altındadır. Belirli yazı tipi için listelenen lisansı her zaman kontrol edin. Yazı tipi dökümhanelerinden veya Adobe Fonts'tan gelen yazı tiplerinin kendi şartları vardır.
İkisi de modern ekranlarda okunabilir. Sans-serif'ler nötr ve modern hissettirir; serif'ler editoryal, geleneksel veya premium hissettirebilir. Ekranların sans-serif gerektirdiği yönündeki eski bir kurala uymak yerine, istediğiniz tona göre seçin ve gerçek gövde boyutunuzda okunabilirliği test edin.
İkisi de işe yarar. Kendi barındırma, istekleri kendi alan adınızda tutar, önbelleğe alma üzerinde tam kontrol sağlar ve ziyaretçi verisini üçüncü bir tarafa göndermekten kaçınır; bazı ekipler bunu gizlilik nedenleriyle tercih eder. Hangisini seçerseniz seçin, WOFF2 dosyaları kullanın, yalnızca kullandığınız kalınlıkları yükleyin ve font-display ayarlayın.
Web siteleri için en iyi fontlar; bir telefonda 16 ile 20px'te iyi okunan, yeterli kalınlığa sahip, dillerinizi kapsayan ve web kullanımı için lisanslı olanlardır. Aşağıdaki seçimlerimizin tümü Google Fonts'ta ücretsizdir ve Google Fonts deposundaki her fontun girdisindeki lisans alanına göre (28 Eylül 2026'da kontrol edildi), 15'inin tamamı ticari kullanıma ve kendi barındırmaya izin veren SIL Open Font License kapsamında yayımlanmıştır. Sıralama, bir test sonucu değil; bu kılavuzdaki kriterlere dayanan editoryal yargımızdır. Listeden sonra bu kılavuzun geri kalanı fontları nasıl seçeceğinizi, eşleştireceğinizi ve yükleyeceğinizi anlatır.
Herhangi bir eşleşmeyi, kendi metninizle, ücretsiz font eşleştirme aracında canlı deneyin. Her adın ardındaki CSS yığını, web fontu yüklenmeden önce (veya yüklenmeden) metnin doğru görünmesi için önerdiğimiz fallback'tir.
font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;font-family: "Source Sans 3", system-ui, sans-serif;font-family: "Roboto", system-ui, Arial, sans-serif;font-family: "Open Sans", system-ui, Arial, sans-serif;font-family: "Lato", system-ui, Arial, sans-serif;font-family: "Nunito Sans", system-ui, sans-serif;font-family: "IBM Plex Sans", system-ui, sans-serif;font-family: "Merriweather", Georgia, "Times New Roman", serif;font-family: "Lora", Georgia, serif;font-family: "Playfair Display", Georgia, serif;font-family: "Montserrat", system-ui, sans-serif;font-family: "Poppins", system-ui, sans-serif;font-family: "DM Sans", system-ui, sans-serif;font-family: "Work Sans", system-ui, sans-serif;font-family: "Space Grotesk", system-ui, sans-serif;| Başlık | Gövde | Hissiyat | Uygun |
|---|---|---|---|
| Playfair Display | Source Sans 3 | Zarif, klasik | Restoranlar, düğünler, butikler |
| Lora | Inter | Sıcak editoryal | Bloglar, koçlar, danışmanlar |
| Montserrat | Open Sans | Güvenli, temiz | Zanaatkarlar, ajanslar |
| Space Grotesk | Inter | Modern, teknik | SaaS, stüdyolar |
| Merriweather | Source Sans 3 | Güvenilir | Hukuk, finans, yayıncılık |
| Inter 700 | Inter 400 | Nötr, hızlı (tek aile) | Her şey; en güvenli varsayılan |
license: "OFL" olarak listelenmektedir; 28 Eylül 2026'da kontrol edilmiştir. SIL Open Font License, ticari web sitelerinde kullanmaya, gömmeye ve kendi barındırmaya izin verir; font dosyalarını tek başına satamazsınız.Çoğu site sevdiği bir başlık yazı tipini seçer, sonra ona uyacak bir şey arar. Bunu tersinden yapın. Gövde metni insanların en çok okuduğu şeydir ve ucuz ekranlarda küçük boyutlarda çalışması gerekir.
Bir gövde yazı tipini test ederken nelere bakılır:
Masaüstü monitörde "Lorem ipsum" ile değil, gerçek içeriğinizle bir telefonda test edin.
Yazı tipleri çağrışımlar taşır. Onları bilinçli kullanın.
| İstediğiniz ton | Uyma eğiliminde olan yazı tipi stili | Örnekler (Google Fonts'ta ücretsiz) |
|---|---|---|
| Nötr, modern, ürün | Grotesk veya neo-grotesk sans | Inter, Roboto, IBM Plex Sans |
| Samimi, yaklaşılabilir | Hümanist veya yuvarlak sans | Nunito Sans, Source Sans 3, Figtree |
| Editoryal, güvenilir | Metin serif'i | Merriweather, Source Serif 4, Lora |
| Premium, zarif | Yüksek kontrastlı serif (yalnızca başlıklar) | Playfair Display, Cormorant |
| Teknik, geliştirici | Tek aralıklı (yalnızca vurgular) | JetBrains Mono, IBM Plex Mono |
| Cesur, enerjik | Dar veya kalın sans (başlıklar) | Oswald, Bebas Neue, Archivo |
Bir hukuk bürosu, bir çocuk partisi işletmesi ve bir geliştirici aracı birbirine benzememelidir. Sorun: logo kaldırılsa, tipografi yine de bunun ne tür bir işletme olduğunu ima eder miydi?
İki yazı tipi kullanıyorsanız, açıkça farklı olmalılar, yoksa hata gibi görünürler. Yan yana duran iki benzer sans-serif kazara görünür; sans gövde üzerinde serif başlık ise kasıtlı görünür.
Güvenilir eşleştirme yolları:
Pratik kural: kişilik için bir yazı tipi, iş için bir yazı tipi. Karakteri başlık yazı tipi taşısın, gövde yazı tipi yoldan çekilsin.
Web sitesi yazı tipi tutarlılığı, sayfa sayfa boyut seçmekten değil, her yerde kullanılan küçük, sabit bir boyut kümesinden gelir. Bir tip ölçeği, bir temel boyutu bir oranla çarpar.
16px temel ve 1,25 oranıyla (genellikle büyük üçlü denir):
| Rol | Boyut |
|---|---|
| Küçük metin, alt yazılar | 13px |
| Gövde | 16px |
| H4 | 20px |
| H3 | 25px |
| H2 | 31px |
| H1 | 39px |
1,333 gibi daha büyük oranlar daha dramatik başlıklar verir; 1,2 gibi daha küçükler yoğun arayüzlere uyar. Mobilde daha küçük bir oran, başlıkların beş satıra sarmasını önler. CSS clamp() işlevi boyutların telefon ile masaüstü arasında pürüzsüz ölçeklenmesini sağlar:
``css :root { --font-body: "Source Sans 3", system-ui, sans-serif; --font-heading: "Lora", Georgia, serif; } body { font-family: var(--font-body); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); line-height: 1.6; } h1 { font-family: var(--font-heading); font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem); line-height: 1.15; } ``
Bunları bir kez değişken veya tasarım belirteci olarak tanımlayın ve yeniden kullanın. Her sayfayı bu şekilde tutarlı tutarsınız.
Yazı tipi, nasıl ayarlandığından daha az önemlidir. Bu değerler çoğu yazı tipinin iyi okunmasını sağlar:
Yazı tipleri, bir siteyi yavaşlatmanın veya yüklenirken metnin zıplamasına neden olmanın en kolay yollarından biridir.
font-display: swap yedek metni hemen gösterir, sonra web yazı tipiyle değiştirir. optional yavaş bağlantılarda değiştirmeyi önler.<link rel="preload" as="font" type="font/woff2" crossorigin>.size-adjust tanımlayıcısını kullanın; böylece web yazı tipi geldiğinde düzen kaymaz. Bu, Cumulative Layout Shift puanınıza yardımcı olur.Seçenek olarak sistem yazı tipi yığını. Arayüzler ve panolar için system-ui, cihazın kendi yazı tipini kullanır (Apple cihazlarında San Francisco, Windows'ta Segoe UI, Android'de Roboto). İndirme yok, kullanıcılara tanıdık, hızlı.
Bir yazı tipi için masaüstü lisansı, onu bir web sitesine gömmenize otomatik olarak izin vermez.
Tipografi, iyi bir web sitesini iyi yapan şeylerin en büyük parçalarından biridir ve tutarlılık, herhangi tek bir yazı tipi seçiminden daha önemlidir. We.Inc ile oluşturuyorsanız siteler eşleşmiş yazı tipi çiftleri ve tutarlı bir ölçekle tasarımlardan başlar ve yazı tiplerini sohbette isteyerek veya kodu doğrudan düzenleyerek değiştirebilirsiniz. Eşleşmelerin kullanımını görmek için şablonlara göz atın.
Kaynaklar (28 Eylül 2026'da kontrol edildi): Her font için Google Fonts deposu meta verileri, github.com/google/fonts (lisans ve tasarımcı alanları); fonts.google.com üzerindeki font sayfaları; SIL Open Font License.
Ücretsiz başlayın · Kredi kartı gerekmez