Type — Font Decision
Brand assetler yüklendi: SF Pro licensed, bundled (/fonts/SF-Pro.ttf + SF-Pro-Italic.ttf). Sistem yeniden SF Pro'ya hizalandı; Inter geliştirme ortamında React fallback olarak kalır.
SF Pro — canonical
Brand-licensed, projeyle birlikte servis edilir. Variable TTF — tek dosyada 100-900 ağırlık + italic. Latin-Ext (Türkçe ı/İ/ğ/ş/ç) tam destek.
Inter — dev fallback
Codebase'de next/font/google ile yüklü; SF Pro yüklenemediği build/dev senaryosunda metrik olarak yakın geçici fallback. Brand surface'lerde tercih edilmez.
SF Pro variable axes — bundled
Tip ölçeği — SF Pro üzerinde
.nb-display · 600 · -0.04em
clamp(2.5rem, 6vw, 6rem)
İşletmenin tüm zekası
.nb-h1 · 600 · -0.04em
clamp(1.875rem, 4vw, 3rem)
Sipariş Panosu
.nb-h2 · 600 · -0.02em · 24px
Kurye Ata · Hemen Konuşalım
.nb-h3 · 600 · 16px
Müşteriler bu hafta
.nb-body · 400 · 16px / 1.6
Ölçülebilir, şeffaf ve kontrollü bir akış.
.nb-body-sm · 400 · 14px / 1.55
50 siparişe kadar ücretsiz · Kredi kartı gerekmez · 30 saniyede kurulum
.nb-app · 400 · 12px (panel default)
Yeni · Hazırlanıyor · Hazır · Yolda · Teslim Edildi · 1.663,00 TL · #1247
.nb-mono · 13px · ui-monospace
--nb-primary: #059669; · ORD-2026-1247
.nb-caption · 400 · 12px · text-3
Son güncelleme: 2 dakika önce
italic · 400 (italic file)
"Ölçülebilir, şeffaf ve kontrollü bir akış." — emphasis
SF Pro'yu HTML'de kullanmak — yükleme
/* colors_and_type.css zaten @font-face ile bundled SF Pro'yu yüklüyor.
Tek yapman gereken CSS'i import etmek \u2014 ek <link> gerekmez. */
<link rel="stylesheet" href="colors_and_type.css">
/* Stack (otomatik): */
--nb-font-sans: "SF Pro", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
Kullanılan ağırlıklar: 400 body, 500 link/label, 600 heading + button + display, 700 sadece pricing rakamları. tabular-nums sayaçlarda zorunlu (sipariş #, TL miktar, tarih).
Subset / dil desteği: SF Pro variable TTF Latin-Ext dahil tüm Türkçe karakterleri (İğşçÖÜı) glyph cache'inde tutar — fallback'e düşmez.
Tracking: display'de --nb-tracking-display (-0.04em), heading'lerde --nb-tracking-tight (-0.02em). SF Pro Apple'ın display/text optical size'larını variable axis ile çözüyor; ek font dosyası gerekmiyor.
Performans: İki dosya toplam ~2.5MB. font-display: swap ile FOIT yok, ilk render Inter/system fallback ile başlar, SF Pro yüklenince swap olur.