CodeKitHubBu Araç Nedir?
Font eşleştirme, bir sayfada birlikte kullanılacak iki (bazen üç) yazı tipi seçmek anlamına gelir — genellikle biri başlıklar, diğeri gövde metni için — böylece sayfa uyumsuz ya da tekdüze görünmeden görsel bir hiyerarşiye sahip olur.
Aşağıdaki her eşleşme, canlı render edilmiş bir örnek gösterir: üstte başlık fontu, altında gövde fontu, gerçek Google Fonts dosyaları kullanılarak — yani gördüğünüz şey sitenizde de aynen görünecek.
Her eşleşme, kullanıma hazır bir Google Fonts `<link>` gömme etiketi ve başlıklar ile gövde metni için `font-family` bildirimleri içeren eşleşen bir CSS kod parçasıyla birlikte gelir — ikisini de kopyalamanız yeterli.
Neden Kullanmalısınız?
- Otomatik oluşturulmuş bir liste değil, elle seçilmiş 28 eşleşme — her biri iki yazı tipinin gerçekten birbirini tamamladığı için seçildi.
- Canlı önizleme: her eşleşme, statik bir görüntü veya font adına dayalı bir tahmin yerine Google Fonts'tan yüklenen gerçek fontlarla render edilir.
- Ruh haline göre filtreleyin — Modern, Zarif, Cesur, Minimal, Klasik — projenizin ihtiyaç duyduğu havayı hızlıca daraltın.
- Hem `<link>` gömme etiketi hem de CSS `font-family` kuralları için tek tıkla kopyalama.
- Ücretsiz, tarayıcınızda çalışır, hesap veya giriş gerektirmez.
Nasıl Kullanılır
- İsterseniz listeyi daraltmak için bir ruh hali filtresine (Modern, Zarif, Cesur, Minimal, Klasik) tıklayın, ya da hepsine göz atmak için "Tümü" seçili kalsın.
- Canlı önizleme kartlarına göz gezdirin — üst satır başlık fontunu, alt satır gövde fontunu gösterir.
- Beğendiğiniz bir eşleşmeyi açın ve gömme kodu bölümünü genişletmek için tıklayın.
- `<link>` etiketini HTML'inizin `<head>` bölümüne, CSS kod parçasını ise stil sayfanıza kopyalayarak fontları başlıklarınıza ve gövde metninize uygulayın.
Örnek
Giriş
Zarif blogÇıkış
Playfair Display (başlıklar) + Source Sans Pro (gövde)"Zarif" filtresi, yüksek kontrastlı serif başlıkları temiz ve son derece okunaklı bir sans-serif gövdeyle eşleştirir — editoryal ve blog düzenlerinde yaygın bir kombinasyon.
İyi font eşleştirmenin ilkeleri
- Benzerlik yerine kontrast: neredeyse aynı görünen iki font (örneğin birbirine benzer iki geometrik sans-serif) bilinçli bir seçim yerine bir hata gibi görünme eğilimindedir. Farkın kasıtlı olarak okunması için bir serif ile bir sans-serif fontu, ya da kalın bir vitrin fontunu daha hafif bir metin fontuyla eşleştirin.
- x-yüksekliği ve oranları eşleştirin: küçük harfleri benzer görsel yüksekliğe sahip fontlar, stilleri farklı olsa bile aynı sayfaya ait gibi hissettirir — uyumsuz x-yüksekliği, bir eşleşmenin "tuhaf" görünmesinin en yaygın nedenlerinden biridir.
- Kendinizi iki aile ile sınırlandırın (bazen üç): biri başlıklar için, biri gövde metni için ve en fazla üçüncüsü düğmeler veya etiketler gibi vurgular için. Bundan fazlası sayfanın plansız görünmesine neden olur.
- Sadece şekli değil, ruh halini de düşünün: yuvarlak, samimi bir sans-serif ile resmi bir serif fontun eşleşmesi, harf biçimleri teknik olarak uyumlu olsa bile karışık sinyaller verir — hem yapı hem de ton açısından uyumlu fontlar seçin.
- Gerçek boyutlarda test edin: büyük bir önizlemede harika görünen bir eşleşme, gövde metni boyutunda kontrastını kaybedebilir ya da bir vitrin fontu küçük boyutlarda okunmaz hale gelebilir — her zaman her iki uç durumu da kontrol edin.
Kullanım amacına göre eşleşme seçmek
Açılış sayfaları ve pazarlama siteleri genellikle "Cesur" veya "Modern" filtrelerinden yararlanır — güçlü, yüksek kontrastlı bir başlık fontu sayfanın üst kısmında dikkat çeker, uzun metinleri kolayca taranabilir kılan sade ve nötr bir gövde fontuyla eşleşir.
Bloglar ve editoryal içerikler genellikle "Zarif" veya "Klasik" eşleşmelerle en iyi okunur — rafine bir serif başlık, özenle düşünülmüş, editoryal bir ses sinyali verirken, rahat bir serif ya da sans-serif gövde, uzun makaleleri uzun okuma seanslarında bile okunabilir tutar.
E-ticaret ve ürün siteleri genellikle "Minimal" eşleşmeleri tercih eder — sade, nötr fontlar, ilgiyi tipografinin kendisinden çok ürün fotoğraflarına ve fiyatlara yönlendirir; bu, bir sayfada onlarca ürün kartı göründüğünde önem kazanır.
Portföyler ve yaratıcı siteler deneme için en fazla alana sahiptir — daha fazla kişilik taşıyan "Cesur" veya "Zarif" eşleşmeler iyi çalışabilir, çünkü ziyaretçiler kısmen görsel zevki değerlendirmek için oradadır.
Performans ve lisanslama hakkında notlar
Gömme `<link>` etiketi fontları Google'ın CDN'inden yükler; bu hızlıdır ve ziyaretçilerinizin muhtemelen daha önce ziyaret ettiği birçok sitede zaten önbelleğe alınmıştır — ancak yine de harici bir istek ekler. Her milisaniyenin önemli olduğu siteler için, font dosyalarını indirip kendiniz barındırmak (manuel olarak ayarlanmış `font-display: swap` ile) bu harici bağımlılığı, bir miktar ek kurulum çabası karşılığında ortadan kaldırır.
Google Fonts'taki tüm fontlar açık kaynaklıdır ve atıf gerektirmeden ticari kullanım için ücretsizdir; ancak kolayca yapılabildiğinde yazı tipi tasarımcısına kredi vermek güzel bir nezaket olur.
Sıkça Sorulan Sorular
İki fontu "iyi eşleşir" yapan nedir?
İyi eşleşmeler kontrast ve uyumu dengeler. Kontrast — bir serif fontu bir sans-serif ile, ya da kalın bir vitrin fontunu sade bir gövde fontuyla eşleştirmek — başlıkları ve gövdeyi belirgin şekilde ayıran görsel bir hiyerarşi yaratır. Uyum — benzer x-yüksekliği, karşılaştırılabilir çizgi kalınlığı ve ortak bir resmiyet ya da neşe düzeyi — ikisinin çatışmasını önler. Buradaki eşleşmeler her iki unsur da göz önünde bulundurularak seçildi.
Başlıklar ve gövde metni her zaman farklı fontlar mı kullanmalı?
Hayır, ikisi için de tek bir yazı tipi ailesi kullanmak (bu araçtaki "Rubik + Rubik" eşleşmesi gibi) da iyi çalışır; yeter ki fontun başlıkları gövdeden ayırt edecek kadar ağırlık çeşitliliği olsun. Bu bir hata değil, geçerli ve minimal bir seçimdir.
Bir eşleşmeyi sitemde nasıl gerçekten uygularım?
Fontları Google'ın CDN'inden yüklemek için `<link>` gömme etiketini sayfanızın `<head>` bölümüne kopyalayın, ardından CSS kod parçasını stil sayfanıza kopyalayın — bu, başlıklar (h1, h2, h3) ve gövde metni (body, p) için `font-family` ayarlar. Kod yapınız farklıysa CSS seçicilerini buna göre uyarlayın.
Google Fonts yüklemek sitemi yavaşlatır mı?
Her ek font dosyası bir ağ isteği ekler ve render işlemini bir miktar engelleme riski taşır. Başlık için bir, gövde için bir veya iki ağırlıkla sınırlı kalın; web fontu yüklenirken metnin yedek bir fontla görünmesi için `display=swap` kullanın (gömme kodunda zaten dahildir) ve mümkün olan en hızlı yüklemeyi gerektiren üretim siteleri için font dosyalarını kendiniz barındırmayı düşünün.
Bu fontlar ticari olarak ücretsiz mi kullanılabilir?
Evet. Burada gösterilen tüm eşleşmeler dahil, Google Fonts'taki tüm fontlar SIL Open Font License veya Apache License altında lisanslanmıştır — her ikisi de telif ücreti ödemeden ücretsiz ticari kullanıma, değiştirmeye ve yeniden dağıtmaya izin verir.