Tipografi & Fontlar

1. Bilgisayarda Font / Tipografi Tarihi

Bilgisayarlarda tipografi, donanım sınırlamalarından doğmuştur. İlk bilgisayarlarda metin, sabit boyutlu piksel ızgaralarında temsil edilirdi. Bugün kullandığımız vektörel fontlara giden yol, onlarca yıllık teknolojik evrimle şekillenmiştir.

Zaman Çizelgesi: Bitmap Fontlardan Variable Fonts'a

Xerox PARC ve Font Tarihindeki Rolü

Xerox PARC (Palo Alto Research Center, 1970), bilgisayar tipografisinin doğduğu yerdir:

• Alto (1973): İlk bitmap fontlu kişisel bilgisayar prototipi. 72 DPI.
• Bravo (1975): İlk WYSIWYG metin editörü. Charles Simonyi tarafından yazıldı.
• Gypsy: Copy-paste komutlarının icat edildiği yer.
• Star workstation (1981): WYSIWYG masaüstü yayıncılığın ticari prototipi.

Font Savaşları: Adobe vs Apple vs Microsoft

1984'te Adobe, PostScript ve Type 1 fontlarla vektörel font devrimi başlattı. Ancak formatı kapalı tutup lisans ücreti istemesi "Font Savaşları"nı ateşledi:

1. 1984: Adobe Type 1 — kübik Bézier, kapalı format, pahalı lisans
2. 1991: Apple TrueType — kuadratik Bézier, ücretsiz, Microsoft'a lisanslandı
3. 1991: Adobe geri adım attı — Type 1 spesifikasyonu herkese açıldı
4. 1996: Barış — Microsoft + Adobe birlikte OpenType'ı duyurdu

2. Bitmap Fontlar vs Vektör Fontlar

2.1 Bitmap (Piksel) Fontlar

AmigaOS bitmap fontları — her karakter piksel piksel tanımlanır

Her glyph (karakter şekli), piksel piksel bir ızgara (matris) olarak saklanır. Metin çizimi = karakter bitmap'lerinin art arda ekrana kopyalanması.

Hâlâ kullanıldığı yerler: Linux konsol, gömülü sistemler, nokta vuruşlu yazıcılar, pixel art oyunlar, retro emülatörler.

2.2 Vektör (Outline) Fontlar

Her glyph, Bézier eğrileri ve düz çizgi segmentleriyle matematiksel olarak tanımlanır. İstenilen boyuta ölçeklenip rasterize edilir.

Özellik	TrueType (Kuadratik)	PostScript/CFF (Kübik)
Bézier derecesi	2. derece	3. derece
Kontrol noktaları	2 uç + 1 kontrol	2 uç + 2 kontrol
Esneklik	Daha az — daha fazla nokta gerekir	Daha fazla — az noktayla karmaşık eğriler
İşlem hızı	Daha hızlı	Biraz daha yavaş
Kullanan formatlar	TrueType, OpenType (.ttf)	PostScript Type 1, OpenType CFF (.otf)

2.3 Karşılaştırma Özeti

Özellik	Bitmap Font	Vektör Font
Veri yapısı	Piksel dizisi (matris)	Bézier eğrileri + komutlar
Ölçekleme	❌ Pikselleşme	✅ Kayıpsız, sonsuz
Bellekte boyut	Boyut başına ayrı set	Tek dosya, tüm boyutlar
İşlem hızı	⚡ Çok hızlı	🔄 Rasterizasyon gerekli
Düşük çözünürlük	✅ Elle optimize edilebilir	⚠️ Hinting gerekir
Kullanım alanı	Retro, gömülü sistemler	Modern OS, web, baskı

3. Font Rendering (İşleme / Çizim)

3.1 Rasterizasyon: Vektörden Piksele

Font rasterizasyonu, vektörel font outline'ını ekrandaki piksel ızgarasına dönüştürme işlemidir:

1. Glyph seçimi: Karakter kodu → font tablosundan glyph outline alınır
2. Ölçekleme: İstenen punto boyutuna göre matematiksel ölçekleme (em birimi → piksel)
3. Hinting uygulaması: Piksel ızgarasına hizalama ipuçları işlenir
4. Rasterizasyon: Eğriler → piksel haritasına dönüştürülür (scanline fill)
5. Anti-aliasing: Kenar piksellere gri tonları uygulanır (isteğe bağlı)

3.2 Hinting (Font İpuçları)

Hinting: Üst — hinting olmadan, Alt — hinting ile piksel ızgarasına hizalanmış glyph'ler

Hinting, font outline'ının düşük çözünürlüklü piksel ızgarasına en iyi şekilde hizalanması için gömülen talimatlardır.

TrueType hinting: Kendi sanal makinesi var — font içindeki programları çalıştırır. IF ifadeleri, döngüler, değişkenler, fonksiyonlar içerir. Tam bir programlama dili! İyi bir TrueType font'u hint'lemek önemli miktarda iş gerektirir.

Apple vs Microsoft yaklaşımı:

• macOS: Hintlerin çoğunu yok sayar — outline'a sadık kalır → ekranda baskıya çok benzer, küçük boyutlarda biraz bulanık
• Windows: Hintlere güvenir — piksel ızgarasına sıkı hizalama → keskin ama outline'dan sapma

3.3 Anti-Aliasing (Kenar Yumuşatma)

Sorun: Bir eğri, bir pikselin %50'sini kaplıyorsa piksel açık mı kapalı mı? İkili renderlama = testere dişi kenarlar.

Çözüm: Her kenar pikseli için kaplama oranına göre ara tonluk (gri) değer atanır.

Tür	Açıklama	Avantaj	Dezavantaj
Yok (Bi-level)	Piksel ya açık ya kapalı	Hızlı, keskin	Testere dişi kenarlar
Grayscale AA	Gri tonlar ile kenar yumuşatma	Pürüzsüz	Biraz bulanık olabilir
Subpixel rendering	LCD alt piksellerini kullanır (RGB)	3× yatay çözünürlük artışı	Renk saçılması (color fringing)

3.4 Subpixel Rendering ve ClearType

Subpixel rendering: Her pikselin R, G, B alt pikselleri ayrı ayrı kontrol edilerek yatay çözünürlük 3 katına çıkarılır

LCD ekranlarda her piksel 3 alt pikselden (R, G, B) oluşur. Bu alt pikselleri ayrı ayrı kontrol ederek yatay çözünürlüğü teorik olarak 3 katına çıkarabilirsiniz.

Modern yaklaşım (DirectWrite): HiDPI ekranların yaygınlaşmasıyla subpixel rendering ihtiyacı azaldı. macOS Mojave'den beri subpixel rendering kaldırıldı. Windows 10+'da da grayscale AA tercih ediliyor.

3.5 Neden Metin Farklı Ekranlarda Farklı Görünür?

Faktör	Etki
Ekran DPI	72 vs 96 vs 220+ DPI → aynı punto, farklı piksel sayısı
Rasterizer	Windows (GDI/DirectWrite), macOS (Quartz), Linux (FreeType)
Hinting	Windows hintlere güvenir, macOS çoğunlukla yok sayar
AA yöntemi	Grayscale, ClearType, subpixel veya yok
Alt piksel düzeni	RGB, BGR, dikey çizgili, PenTile
Font hinting kalitesi	İyi hinted fontlar (Arial, Verdana) vs otomatik hinting

4. Oyunlar İçin Tipografi Temelleri

4.1 Harf Anatomisi

Terim	Türkçe	Açıklama
Baseline	Taban Çizgisi	Harflerin "oturduğu" hayali yatay çizgi
x-height	x-yüksekliği	Küçük "x"in yüksekliği. Büyük x-height = daha okunabilir
Cap Height	Büyük Harf Yüksekliği	Büyük harflerin tepe noktası
Ascender	Yükselen Kısım	b, d, f, h, k, l — cap height üstüne çıkan bölüm
Descender	İnen Kısım	g, j, p, q, y — baseline altına inen bölüm
Kerning	Karakter Çifti Aralığı	İki belirli karakter arası mesafe (AV, To, WA)
Leading	Satır Aralığı	İki satırın baseline'ları arası mesafe. CSS'te line-height
Tracking	Harf Aralığı	Tüm karakterler arası genel mesafe. CSS'te letter-spacing
Em	Em Birimi	Font boyutuna eşit kare birim. 12pt fontta 1 em = 12pt

4.2 Serif vs Sans-Serif

Serif (tırnaklı) ve Sans-Serif (tırnaksız) karşılaştırması — kırmızı bölgeler serif tırnaklara işaret eder

4.3 Monospace Fontlar

Her karakter aynı yatay alanı kaplar (W = i = m = aynı genişlik). Terminal, kod editörü, skor tabloları, zamanlayıcılar ve retro terminaller için ideal. Örnekler: Consolas, JetBrains Mono, Fira Code.

4.4 Oyun Türüne Göre Font Seçim Rehberi

Oyun Türü	Font Stili	Örnekler
RPG / Fantezi	Serif veya el yazısı, antik his	Garamond, Cinzel, IM Fell, MedievalSharp
Sci-Fi	Geometrik sans-serif, monospace	Orbitron, Rajdhani, Share Tech Mono
Horror	Bozulmuş, düzensiz, el yazısı	Creepster, Nosifer, Special Elite
Casual / Mobil	Yuvarlatılmış sans-serif	Nunito, Quicksand, Fredoka
Pixel Art / Retro	Piksel font	Press Start 2P, PixelMplus, Silkscreen
Yarış / Spor	Italik, kalın, dinamik	Russo One, Black Ops One
Simülasyon / Strateji	Temiz sans-serif	Inter, Source Sans Pro, Noto Sans

4.5 UI Kullanım Alanına Göre Font Seçimi

Kullanım Alanı	Önerilen Tür	Dikkat Edilecekler
Ana menü / başlık	Display / dekoratif	Oyunun temasıyla uyum, büyük boyutlarda etkileyici
Diyalog / hikâye	Serif veya sans-serif, yüksek x-height	Uzun okuma konforu, geniş satır aralığı
HUD (sağlık, cephane)	Sans-serif, kalın	Hızlı okunabilirlik, arka plana karşı kontrast
Zamanlayıcı / skor	Monospace	Rakamlar kaymamalı (tabular figures)
Piksel art oyun	Piksel font	Oyun çözünürlüğüne uygun boyut
Hata ayıklama	Monospace	FPS sayacı, koordinat bilgisi

5. Piksel Fontlar

Bitmap (sol) vs Vektör (sağ) font karşılaştırması — büyütüldüğünde fark belirginleşir

Piksel fontlar, piksel art estetiğiyle tasarlanmış, her pikselin kasıtlı olarak yerleştirildiği bitmap fontlardır. Anti-aliasing kullanılmaz — her piksel ya var ya yok.

5.1 Yaygın Piksel Font Boyutları

Boyut	Kullanım	Açıklama
3×5	Minimum okunabilir	Çok küçük etiketler, gömülü sistemler
5×7	Mikrodenetleyici	Arduino LCD, LED matris
6×8	Yaygın piksel art	Commodore 64 karakter seti
8×8	En yaygın retro boyut	NES, Game Boy, ZX Spectrum. Karakter başına 8 byte
8×16	PC/DOS metin modu	IBM PC BIOS fontu. CGA/EGA/VGA
16×16	Büyük piksel art	Kanji/CJK karakterler, büyük başlıklar

5.2 Piksel Font Nasıl Oluşturulur?

1. Izgara boyutu seç: Oyunun çözünürlüğüne göre (ör. 8×8)
2. Temel harfleri tasarla: A-Z, a-z, 0-9, temel noktalama
3. Tutarlı stil kur: x-height, ascender/descender oranları, çizgi kalınlığı (genellikle 1px)
4. Kerning ayarla: Gerekirse karakter çiftleri arası boşluk
5. Özel karakterler: Türkçe ç, ğ, ı, ö, ş, ü, İ desteği!
6. Test: Oyun içi çözünürlükte, hedef arka plan üzerinde

5.3 Piksel Font Araçları & Kaynakları

Araç	Tür	Açıklama
BitFontMaker2	Web (ücretsiz)	Tarayıcıda piksel font tasarla, TTF olarak indir. Çok basit ve hızlı. 8×8–16×16.
FontForge	Masaüstü (ücretsiz)	Profesyonel font editörü. Bitmap fontlar da desteklenir. Python scripting.
Glyphr Studio	Web (ücretsiz)	Modern web tabanlı font editörü. Başlangıç için ideal.
Aseprite / LibreSprite	Masaüstü	Font sprite sheet oluşturma.
Piskel	Web (ücretsiz)	Piksel art editörü, font sprite sheet yapılabilir.

Ücretsiz Piksel Font Kaynakları

• Google Fonts: "Press Start 2P", "VT323", "Silkscreen", "DotGothic16"
• DaFont — Bitmap: Yüzlerce piksel font (lisans bilgisine dikkat!)
• itch.io: Oyun geliştiriciler için piksel font paketleri
• OpenGameArt: CC/GPL lisanslı ücretsiz piksel fontlar

6. Web Tipografisi

6.1 CSS @font-face

Web'de uzun süre yalnızca "web-safe fontlar" (Arial, Verdana, Georgia, Times New Roman) kullanılabildi. @font-face kuralı bunu değiştirdi:

@font-face {
  font-family: 'OyunFontu';
  src: url('fonts/oyun-fontu.woff2') format('woff2'),
       url('fonts/oyun-fontu.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'OyunFontu', sans-serif;
}

Font Formatları

Format	Sıkıştırma	Destek
WOFF2 (.woff2)	Brotli (~%30 daha küçük)	Tüm modern tarayıcılar (2018+) ✅
WOFF (.woff)	zlib	IE9+, tüm modern tarayıcılar
TTF/OTF	Yok	Çoğu tarayıcı
EOT (.eot)	LZ	Sadece IE (artık gereksiz) ❌

6.2 Google Fonts

Google Fonts (2010): 1.600+ açık kaynak font ailesi, tamamen ücretsiz, CDN üzerinden hızlı erişim.

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

Popüler Google Fonts (oyun/web):

• Inter — modern sans-serif, ekran için optimize
• Roboto — Android varsayılan fontu
• Press Start 2P — piksel font, retro oyun teması
• VT323 — terminal/monospace piksel font
• Noto Sans / Noto Serif — 1.000+ dil desteği (Google + Adobe)
• Poppins — geometrik sans-serif, modern UI
• JetBrains Mono — kod editörü için monospace

6.3 Font Yükleme Stratejileri

Web fontları ağ üzerinden indirilir → gecikme. Bu sırada metin nasıl gösterilir?

font-display Değeri	Davranış	Kullanım
swap	Hemen fallback göster, font gelince değiştir	Çoğu zaman en iyisi ✅
block	~3s gizle, sonra fallback	İkon fontları
fallback	~100ms gizle, ~3s içinde gelmezse fallback kalır	Denge
optional	~100ms gizle, gelmezse fallback, sonraki ziyarette cache	Performans öncelikli

Optimizasyon İpuçları

1. font-display: swap kullan — metin her zaman okunabilir
2. <link rel="preload"> ile fontu erken yüklemeye başla
3. WOFF2 kullan — en küçük dosya boyutu
4. Subset — Türkçe karakterler: unicode-range: U+0000-00FF, U+00C7, U+00E7, U+011E-011F, U+0130-0131, U+00D6, U+00F6, U+015E-015F, U+00DC, U+00FC;
5. Local font kontrolü: src: local('Inter'), url(...) → zaten yüklüyse indirme

7. Farklı Çözünürlüklerde Okunabilirlik

Çözünürlük	Platform	Font Boyutu Önerisi
320×240 (QVGA)	Retro, Game Boy	8×8 piksel font zorunlu
640×480 (VGA)	Retro PC	8-16px bitmap veya küçük vektör
1280×720 (720p)	Mobil, Switch	Min 18px body, 14px minimum
1920×1080 (1080p)	PC, konsol	20-24px body, 16px minimum
3840×2160 (4K)	PC, yeni konsol	2× ölçekleme veya yüksek DPI

8. Yerelleştirme Zorlukları

Zorluk	Açıklama	Çözüm
Karakter seti	Türkçe: ç, ğ, ı, ö, ş, ü, İ. Japonca: ~6.000 kanji	Unicode kapsamlı fontlar (Noto, Source Sans)
Metin uzunluğu	Almanca metin İngilizceden %30-40 daha uzun	Esnek UI kutuları, metin taşma kontrolü
Yazı yönü	Arapça, İbranice: sağdan sola (RTL)	BiDi text rendering desteği
CJK fontlar	Binlerce glyph → büyük dosyalar (5-20 MB)	Font subsetting
Özel kurallar	Türkçe: I→ı, İ→i dönüşümü	Locale-aware string işlemleri

9. Font Tasarım Araçları

Araç	Tür	Fiyat	Açıklama
FontForge	Masaüstü	Ücretsiz (GPL)	Profesyonel font editörü. TrueType, OpenType, WOFF oluşturma. Python scripting. Öğrenme eğrisi yüksek.
Glyphr Studio	Web	Ücretsiz	Modern arayüz, sezgisel Bézier editörü. Başlangıç için ideal.
BitFontMaker2	Web	Ücretsiz	Piksel font oluşturma. TTF export. Çok basit ve hızlı.
Calligraphr	Web	Ücretsiz/Pro	El yazısı → font dönüşümü. Kağıda yaz, tara, font yap.
FontLab 8	Masaüstü	~$499	Profesyonel endüstri standardı. Variable font desteği.
Glyphs 3	macOS	~€299	Profesyonel, modern arayüz. Mini versiyonu ~€49.
Hiero / BMFont	Masaüstü	Ücretsiz	Oyun motorları için bitmap font atlas oluşturucular.

10. Tipografi Terimler Sözlüğü

İngilizce	Türkçe	Açıklama
Font	Yazı Tipi	Belirli ağırlık, boyut ve stildeki set
Typeface	Yazı Tipi Ailesi	Font ailesinin genel tasarımı (ör. "Helvetica")
Glyph	Glif / Karakter Şekli	Bir karakterin görsel temsili
Serif	Tırnak	Harflerin uçlarındaki küçük çizgiler
Sans-Serif	Tırnaksız	Serif olmayan (sans = "olmadan")
Kerning	Karakter Çifti Aralığı	İki karakter arası özel boşluk ayarı
Leading	Satır Aralığı	Satırlar arası dikey mesafe
Hinting	İpuçlama	Piksel ızgarasına hizalama talimatları
Rasterization	Rasterizasyon	Vektör → piksel dönüşümü
Anti-aliasing	Kenar Yumuşatma	Testere dişlerini azaltma
Subpixel	Alt Piksel İşleme	LCD alt piksellerini kullanarak çözünürlük artırma
Ligature	Bitişik Harf	İki harfin birleşik glyph'i (fi, fl)
Variable Font	Değişken Font	Tek dosyada sürekli ağırlık/genişlik aralığı
WOFF2	Web Açık Font Formatı	Brotli sıkıştırmalı web font konteyner formatı

11. Kaynaklar & Bağlantılar