İçeriğe atla

TİPOGRAFİ / UYUM

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.

Araca geç
İki yazı karakterinin optik dengesi
Tüm araçlar

TİPOGRAFİ / UYUM

Başlık ile gövdeyi dengeleyin.

Aynı metni farklı yazı karakterleriyle karşılaştırın.

Küratörlü eşleştirmeler
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

DETAYLARFont eşleştirme nedir?

İHTİYAÇ / ÇÖZÜM / YAKLAŞIMFont 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.

DETAYLARBir sayfada kaç font kullanmalıyım?

İHTİYAÇ / ÇÖZÜM / YAKLAŞIMGenel 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.

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

İHTİYAÇ / ÇÖZÜM / YAKLAŞIMBaş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.

DETAYLARGoogle Fonts sayfaya nasıl eklenir?

İHTİYAÇ / ÇÖZÜM / YAKLAŞIMAracı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.

DETAYLARÇok font kullanmak performansı etkiler mi?

İHTİYAÇ / ÇÖZÜM / YAKLAŞIMEvet. 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.

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

İHTİYAÇ / ÇÖZÜM / YAKLAŞIMSerif 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.

Nexsol müşteri danışmanı — sizi arayacak
Ücretsiz · Bağlayıcı değil

Hesap tamam. Konuşalım mı?

Numaranızı bırakın, biz sizi arayalım. İhtiyacınızı 5 dakikada dinleyip yol haritasını birlikte çıkaralım — satış konuşması değil, teknik sohbet.

Numaranız yalnızca sizi aramak için kullanılır, üçüncü taraflarla paylaşılmaz.

İlgili ücretsiz araçlar

Web & Tasarım

Yöntem ve veri kapsamı sayfa içinde açıklanır · Sayfa güncellemesi:

Web tasarım

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

birlikte başlayalım

Web ÇözümleriÜcretsiz Teklif

<nexsol />