Tipografi, tasarımın sessiz kahramanıdır. Bir web sitesinin, markanın veya e-ticaret mağazasının profesyonel mi yoksa amatör mü göründüğünü belirleyen en kritik unsurlardan biridir. Doğru yazı tipi seçimi müşteri güvenini artırır, dönüşüm oranını yükseltir ve marka algısını güçlendirir. Bu rehberde tipografinin temel terimlerini, yazı tipi ailelerini ve farklı kullanım alanları için doğru font seçimini açıklıyoruz.
1. Tipografi Nedir?
- Tanım: Yazıyı görsel olarak düzenleme ve sunma sanatı
- Kapsam: Yazı tipi seçimi, boyut, aralık, hizalama, renk ve hiyerarşi
- Amaç: Okunabilirlik, estetik ve mesaj iletimi
- Önem: Web trafiğinin %95'i metin içerikten oluşur — tipografi tasarımın temelidir
2. Temel Tipografi Terimleri
| Terim | İngilizce | Açıklama |
|---|
| Yazı Tipi | Typeface | Yazı karakterlerinin genel tasarımı (örn: Helvetica) |
| Font | Font | Yazı tipinin belirli bir ağırlık ve boyutu (örn: Helvetica Bold 14pt) |
| Serif | Serif | Harflerin uçlarındaki küçük çıkıntılar (tırnaklar) |
| Sans-Serif | Sans-Serif | Tırnaksız, düz uçlu harfler |
| Kerning | Kerning | İki harf arasındaki yatay mesafe ayarı |
| Leading | Leading | Satırlar arası dikey mesafe (satır aralığı) |
| Tracking | Tracking | Tüm harfler arasındaki genel mesafe ayarı |
| Baseline | Baseline | Harflerin oturduğu görünmez çizgi |
| X-Height | X-Height | Küçük "x" harfinin yüksekliği — okunabilirliği etkiler |
| Cap Height | Cap Height | Büyük harflerin yüksekliği |
| Ascender | Ascender | X-height'ın üzerine çıkan kısım (b, d, h gibi) |
| Descender | Descender | Baseline'ın altına inen kısım (g, p, y gibi) |
| Ağırlık | Weight | Yazının kalınlığı (Light, Regular, Bold, Black) |
| İtalik | Italic | Sağa yatık yazı stili — vurgu için kullanılır |
| Hizalama | Alignment | Sola, sağa, ortaya veya iki yana yasla |
3. Yazı Tipi Aileleri
| Aile | Özellik | Kullanım Alanı | Örnekler |
|---|
| Serif | Tırnaklı, klasik, geleneksel | Kitap, dergi, lüks marka, hukuk | Times New Roman, Georgia, Playfair Display |
| Sans-Serif | Tırnaksız, modern, temiz | Web, mobil, teknoloji, e-ticaret | Inter, Roboto, Helvetica, Open Sans |
| Slab Serif | Kalın tırnaklı, güçlü | Başlıklar, posterler, güçlü ifade | Rockwell, Roboto Slab, Courier |
| Script | El yazısı tarzı, süslü | Davetiye, moda, güzellik, lüks | Pacifico, Dancing Script, Lobster |
| Display | Dekoratif, dikkat çekici | Logo, poster, başlık, kampanya | Impact, Bebas Neue, Righteous |
| Monospace | Tüm harfler eşit genişlik | Kod, teknik döküman, retro | Fira Code, JetBrains Mono, Courier New |
4. Doğru Yazı Tipi Nasıl Seçilir?
Adım 1: Amacı Belirleyin
| Amaç | Önerilen Aile | Neden? |
|---|
| Uzun metin (blog, makale) | Sans-Serif veya Serif | Okunabilirlik öncelikli |
| Başlık / Hero | Display veya Bold Sans-Serif | Dikkat çekme, güçlü ifade |
| Logo / Marka | Aile değişir — kişiliğe göre | Marka kimliğini yansıtma |
| Buton / CTA | Sans-Serif (Bold) | Net, okunaklı, aksiyona teşvik |
| Yasal / Kurumsal | Serif | Güven, otorite, ciddiyet |
Adım 2: Marka Kişiliğine Uyumu
| Marka Kişiliği | Önerilen Stil | Font Örnekleri |
|---|
| Modern / Teknoloji | Geometrik Sans-Serif | Inter, Poppins, DM Sans |
| Lüks / Premium | Zarif Serif veya Thin Sans | Playfair Display, Cormorant, Didot |
| Samimi / Sıcak | Yuvarlak Sans-Serif veya Script | Nunito, Quicksand, Pacifico |
| Güçlü / Cesur | Kalın Sans-Serif veya Slab | Montserrat Black, Oswald, Anton |
| Minimalist | İnce, temiz Sans-Serif | Outfit, Space Grotesk, Work Sans |
| Retro / Vintage | Slab Serif veya Display | Abril Fatface, Lora, Special Elite |
Adım 3: Okunabilirliği Test Edin
- Küçük boyut testi: 14px ve altında okunaklı mı?
- Mobil test: Telefonda rahat okunuyor mu?
- Uzun metin testi: 500+ kelimelik bir paragrafta göz yormuyor mu?
- Kontrast: Arka plan ile yeterli renk kontrastı var mı?
- Türkçe karakter: ÇŞĞÜÖİ harflerini doğru gösteriyor mu?
5. E-Ticaret İçin Font Seçimi
| Alan | Önerilen | Neden? |
|---|
| Ürün başlığı | Sans-Serif (Medium/Bold) | Net, profesyonel, hızlı okunan |
| Ürün açıklama | Sans-Serif (Regular) | Okunabilirlik, uzun metin uyumlu |
| Fiyat | Sans-Serif (Bold) | Dikkat çekici, net |
| Buton (CTA) | Sans-Serif (SemiBold) | Aksiyona teşvik, okunaklı |
| Marka adı | Markanın kişiliğine uygun | Kimlik oluşturma |
| Footer / Legal | Sans-Serif (Light/Regular) | İkincil bilgi, geri planda |
6. Font Eşleştirme (Font Pairing)
İki yazı tipini birlikte kullanmak tasarıma derinlik katar:
| Başlık Fontu | Gövde Fontu | Stil |
|---|
| Playfair Display | Inter | Lüks + Modern |
| Montserrat | Open Sans | Güçlü + Okunaklı |
| Poppins | Roboto | Modern + Temiz |
| Oswald | Lato | Cesur + Yumuşak |
| DM Serif Display | DM Sans | Zarif + Minimal |
| Bebas Neue | Source Sans Pro | İmpact + Profesyonel |
Eşleştirme Kuralları
- Kontrast: Başlık ve gövde fontu birbirinden farklı olmalı (Serif + Sans-Serif)
- Uyum: X-height ve genel karakteri benzer olmalı
- Maksimum 2-3 font: Bir projede en fazla 2-3 yazı tipi kullanın
- Hiyerarşi: Boyut, ağırlık ve renk ile görsel hiyerarşi oluşturun
7. Ücretsiz Font Kaynakları
Profesyonel E-Ticaret Sitenizi Beekod ile Oluşturun
Modern tipografi ve premium tasarım ile müşterilerinize güven veren bir online mağaza kurun.
Ücretsiz Deneyin
- Font sayısını sınırlayın: Maksimum 2 font ailesi — her font HTTP isteği ekler
- Ağırlık seçimi: Yalnızca kullanacağınız ağırlıkları yükleyin (Regular, Bold yeterli)
- font-display: swap: CSS'de font yüklenene kadar sistem fontunu gösterin — CLS önleme
- WOFF2 formatı: En küçük dosya boyutu, en geniş tarayıcı desteği
- Preload: Kritik fontları <link rel="preload"> ile önce yükleyin
- Self-hosting: Google Fonts yerine kendi sunucunuzda barındırma — GDPR ve hız
9. Tipografide Sık Yapılan Hatalar
| Hata | Sonuç | Çözüm |
|---|
| Çok fazla font | Dağınık, amatör görünüm | Maksimum 2-3 font ailesi |
| Yetersiz kontrast | Okunmaz metin | WCAG AA kontrastı sağlayın (4.5:1) |
| Küçük font boyutu | Okunabilirlik sorunu | Gövde metni minimum 16px |
| Dar satır aralığı | Sıkışık, yorucu okuma | Leading = font boyutu × 1.5-1.8 |
| Çok uzun satır | Göz kaybı, yorgunluk | Satır başına 50-75 karakter ideal |
| Yanlış hizalama | Düzensiz görünüm | Sola hizala (web), iki yana yasla (baskı) |
Sonuç
Tipografi, web tasarımının ve e-ticaretin görünmez ama en etkili aracıdır. Doğru yazı tipi seçimi markanıza profesyonellik, güvenilirlik ve kişilik katar. Serif ve sans-serif arasındaki farkı anlamak, font eşleştirme kurallarını bilmek ve web performansını optimize etmek, başarılı bir online varlık için temel yetkinliklerdir.
