Nexsol Araçları · Web

Font Eşleştirme Aracı

Başlık ve gövde için uyumlu Google Fonts kombinasyonlarını seçin, canlı önizleyin ve hazır <link> ile CSS kodunu kopyalayın. Ücretsiz, anında.

Küratörlü eşleştirmeler

Başlık fontu

Gövde fontu

Başlık boyutu (44px)

Başlık ağırlığı

ÖnizlemePlayfair Display + Source Sans 3

Tasarımda tipografi her şeydir

İyi bir yazı tipi kombinasyonu, başlık ile gövde metni arasında net bir kontrast kurar; okunabilirliği artırır ve markanın karakterini taşır. Bu örnek paragraf, seçtiğiniz gövde fontunun gerçek bir metinde nasıl göründüğünü gösterir.

ABCÇDEFGĞHIİJKLMNOÖPRSŞTUÜVYZ · abcçdefgğhıijklmnoöprsştuüvyz · 0123456789

HTML — <link>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@300;400;500;600;700&family=Source+Sans+3:wght@300;400;500;600;700&display=swap" rel="stylesheet">

CSS — font-family

h1, h2, h3 {
  font-family: "Playfair Display", serif;
  font-weight: 700;
}

body, p {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 400;
}

Font eşleştirme neden önemli?

Yazı tipi kombinasyonu, bir web sitesinin ilk izlenimini büyük ölçüde belirler. Başlık ve gövde fontları arasında doğru kurulan kontrast, içeriği taranabilir kılar; okuyucunun gözünü başlıktan paragrafa akıcı biçimde taşır.

Kontrast: Genelde karakterli/serif bir başlık + sade/sans-serif bir gövde iyi sonuç verir.
Okunabilirlik: Gövde için x-yüksekliği iyi, geniş gövdeli sans-serifler tercih edilir.
Sadelik: Bir sayfada en fazla iki (gerekirse üç) yazı tipi ailesi kullanın.

Seçtiğiniz Google Fonts'u sayfanıza eklemek için aracın ürettiği <link> etiketini <head> içine, font-family tanımını da CSS'inize yapıştırmanız yeterlidir.

Sık sorulan sorular

Font eşleştirme nedir?

Font eşleştirme (font pairing), bir web sitesi veya tasarımda başlık ve gövde metni için birbiriyle uyumlu iki yazı tipini birlikte kullanma sanatıdır. Amaç; kontrast, okunabilirlik ve marka tutarlılığını birlikte sağlamaktır.

Bir sayfada kaç font kullanmalıyım?

Genel kural en fazla iki yazı tipi ailesidir: biri başlıklar, biri gövde için. Gerekirse vurgu/etiketler için üçüncü bir font eklenebilir. Daha fazlası hem görsel kirliliğe hem de performans kaybına yol açar.

Başlık ve gövde fontu nasıl seçilir?

Başlık için karakterli, dikkat çeken bir font; gövde için ise yüksek okunabilirlikli, sade bir font tercih edin. Klasik yaklaşım serif başlık + sans-serif gövdedir; ancak iki sans-serifi ağırlık ve boyut farkıyla da başarıyla eşleştirebilirsiniz.

Google Fonts sayfaya nasıl eklenir?

Aracın ürettiği <link> etiketlerini sayfanızın <head> bölümüne ekleyin, ardından CSS'inizdeki font-family tanımlarını yapıştırın. preconnect satırları yükleme performansını artırır, display=swap ise metnin font yüklenmeden de görünmesini sağlar.

Çok font kullanmak performansı etkiler mi?

Evet. Her yazı tipi ailesi ve her ek ağırlık ek bir dosya indirir. Yalnızca gerçekten kullandığınız fontları ve ağırlıkları yükleyin, display=swap kullanın ve fonts.gstatic.com için preconnect ekleyin. Bu sayede sayfa açılış süresi korunur.

Serif mi sans-serif mi kullanmalıyım?

Serif fontlar klasik, güvenilir ve editöryel bir his verir; sans-serif fontlar modern, sade ve ekranda nettir. En güvenli kombinasyon ikisini birleştirmektir: serif başlık + sans-serif gövde ya da tersi. Marka tonunuza göre seçim yapın.

Web tasarım

Markanıza özgü web sitenizi uzmanına tasarlatın

Web Çözümleri Ücretsiz Teklif

Tipografi, marka ve kurumsal web; tasarımdan yayına Nexsol mühendisliğiyle.