Arayüz tipografisi

1) Üründeki tipografinin rolü

• taramayı hızlandırır ve bilişsel yükü azaltır,
• bir hiyerarşi oluşturur ve devlette gezinmeye yardımcı olur,
• Dönüşümü (CTA, formlar) artırır ve hataları azaltır,
• Arayüzü erişilebilir ve lokalizasyona karşı dirençli hale getirir.

2) Temel parametreler

Pin (gövde metni): Masaüstünde 16-18 piksel, mobilde 15-16 piksel.
Hat yüksekliği: 1. 45–1. Metin için 6, 1. 2–1. Başlıklar için 35.
Satır uzunluğu (ölçü): 45-80 karakter; Kenar çubuklarında - 36-60.
İzleme: Düz metin için %0-1; Kapsüller için - + %2-4.
Kontrast (WCAG) -Plain metin ≥ 4. 5:1, kaba/yağlı ≥ 3:1.
Kayıt: kalıcı TÜM CAPS önlemek; Etiketleri/cipsleri kullanın, izlemeyi telafi edin.

3) Hiyerarşi ve boyut ölçeği

Modüler bir yaklaşım öneriyoruz: 8-pt ızgara + tipografik ölçek.

• Ekran: 40/48 (LH 1. 15)
• H1: 32/40 (1. 25)
• H2: 24/32 (1. 25)
• H3: 20/28 (1. 3)
• H4: 18/26 (1. 4)
• Gövde/L: 18/28 (1. 55)
• Vücut/M: 16/26 (1. 55)
• Gövde/S: 14/22 (1. 5)
• Başlık: 12/18 (1. 5)
• Mono/UI: 12-14/18-20

• Komşu seviyeler arasında - gözle görülür bir adım (en az %12-16).
• Hiyerarşi, boyut, ağırlık, satır aralığı, renk (kontrastı dikkate alarak) ve komşu bloklara olan mesafelerin bir kombinasyonu ile oluşturulur.

4) Kapak yüksekliği, taban çizgisi ve optik

Öğeleri başlıkların başlık yüksekliğine göre hizalayın (simgelerle uyumlu).
4/8 pt metin taban çizgisini koruyun - ritimler bile okumayı kolaylaştırır.
Optik girintiler: Bloğun üstündeki başlıklar alttakinden daha büyüktür (örneğin, yukarıda + 4-8 piksel).

5) Stiller ve değişken fontlar

Minimum set: Normal, Orta, YarıKalın (Kalın isteğe bağlı).
UI'de Ultra Hafif/İnce kullanmayın.

• Gövde: 420-470 (optik olarak 400'den daha düz).
• UI etiketleri: 500-550.
• Başlıklar/CTA: 600-650.
• Boyut azalırsa, ağırlığı hafifçe artırın (tazminat).
• UI numaralarındaki dekoratif bitişik harfleri devre dışı bırakın; Kiril/Latin harflerini standart tutun.

6) Sayılar, tablolar ve tarihler

Miktarlar, katsayılar, zamanlayıcılar, derecelendirmeler için tablo rakamları ekleyin.
+/ − işaretleri her zaman görünür ve yeterli kontrastlıdır; Negatif değerleri yalnızca renkle değil (simge/ok/kalın) vurgulayın.
Parasal değerler için ince bit ayırıcı (veya yerel biçim) olarak dar bir boşluk kullanın.
Tablolarda, ondalık noktaya hizalayın; Mono sütunlar için - monospaced font.
Eksen imza grafikleri 12 px (mobil) ve ≥ 13-14 px (masaüstü), LH 1 ≥. 3; Efsaneler ≥ 4. 5:1 arka plana.

7) Formlar, girişler, mesajlar

Etiketler 12-14 piksel, LH 1. 3–1. 4, normal veya orta.
Yer tutucu "gri hava" olmamalıdır - hedef, metinden görsel olarak ayırt edilebilen arka plana 3:1'dir.
Hatalar/başarı/yardım metni 12-14 px; Sadece renge (simge/metin) güvenmeyin.

8) Karanlık/Işık Temaları

Karanlık bir konuda, # 000'de # FFF'den kaçının: L≈0 için arka planı yükseltin. 14–0. 18 ve metni L≈0'e indirin. 9 - daha az parlama.
Karanlıkta lider + 0 olabilir. Rahatlık için yukarıdaki 05.
Karanlıkta bağlantılar/vurgular - doygunluğu azaltır ve açıklığı 0 artırır. 02–0. 04.

9) Yerelleştirme ve çok dillilik

Tam Kiril/Latin/Yunan, vurgu işareti ve para birimi desteği olan aileleri seçin.
RTL: ayna simgeleri/hizalamalar, ancak sayılar ve Latin değil; Test transferleri.
Yalnızca uzun içerik bölgelerine dahil etmek için otomatik aktarımlar ('tireler: otomatik'); UI düğmelerinde - transferi yasaklayın.
Türkçe/Azerice için "İ/ı" formlarını kontrol edin.
Gürcüce ve Tayca için, taban pimini 1 px (stil özellikleri) yükseltin.

10) Kullanılabilirlik (A11y)

Metin kontrastı: § 2'ye bakınız.
Odak stilleri - renk olmadan görünür: alt çizgi, kenarlık, gölge, ofset.
Font boyutu sistemik olarak ölçeklenir (OS metin boyutu desteği).
Anlamı yalnızca renk/ağırlık yoluyla kodlamayın - açık başlıklar ve simgeler ekleyin.

11) Yazı tipi yükleme ve performans

Amaç: Tıkanıklıkları en aza indirmek, öngörülebilir FOUT ve stabil CLS sağlamak.

Alt kümeler: Latin, Kiril, sayılar/semboller - bireysel dosyalar.
Formatlar: Fallback olarak 'woff2' (main), 'woff'.
'font-display: swap' (veya ikincil aileler için 'optional').

html
<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/Inter-UI-subset. woff2">

3-4 statik yerine değişken yazı tipi - genellikle ağırlıkta daha karlı.
Bütçe: Kritik yol için toplamda 150-200 KB ≤ (gzip/brotli'den sonra).
Oluşturma: Metinde birden fazla gölge/maskeden kaçının; Sistem efektlerini idareli kullanın.

12) Tipografi belirteçleri (tasarım sistemi)

type. scale.{role}     # h1, h2, body, caption, mono type. weight.{role}    # regular, medium, semibold type. leading.{role}    # line-height type. tracking.{role}   # letter-spacing type. feature. numeric   # tabular, lining

json
{
"type": {
"family": { "ui": "InterVariable", "mono": "JetBrainsMonoVariable" },
"scale": { "h1": 32, "h2": 24, "h3": 20, "body": 16, "caption": 12 },
"leading": { "h1": 40, "h2": 32, "h3": 28, "body": 26, "caption": 18 },
"weight": { "body": 450, "label": 520, "cta": 620 },
"numeric": { "figures": "tabular", "zeros": "slashed" }
}
}

css
:root {
--font-ui: "InterVariable", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--font-mono: "JetBrainsMonoVariable", ui-monospace, SFMono-Regular, Menlo, monospace;

--fs-h1: 32px; --lh-h1: 40px; --w-h1: 600;
--fs-h2: 24px; --lh-h2: 32px; --w-h2: 600;
--fs-h3: 20px; --lh-h3: 28px; --w-h3: 550;
--fs-body: 16px; --lh-body: 26px; --w-body: 450;
--fs-caption: 12px; --lh-caption: 18px; --w-caption: 450;

--tracking-caps: 0. 04em;
--tracking-default: 0em;
}
.u-num {
font-variant-numeric: tabular-nums lining-nums slashed-zero;
}

13) Düzen ve ritim

8-pt dikey modül; Paragraflar arasındaki mesafe = 1 × temel adım.
Listeler - İşaretçinin girintisi, metnin satır taban çizgisiyle hizalanır.
Düğmeler ve alanlar - Yükseklikler satır taban çizgisi ızgara çizgisinin katlarıdır (örneğin, 40/48/56 px).

14) iGaming'in Özgüllüğü (atölye çalışması)

Oranlar/oranlar, bakiyeler, zamanlayıcılar - tablo numaraları kullanın, kritik sütunlarda monospaced.
Liderler/derecelendirmeler: kategoriye göre seviyelendirme, birleşik para birimi biçimi, açık "↑/↓".
Kritik bildirimler (18 +, limitler, riskler) - minimum AAA aksine, TÜM CAPS kullanmayın.
Promosyon afişleri: Yalnızca kontrast kontrollü slips/bindirmelerde metin.

15) Anti-desenler

Küçük pimler üzerinde hafif/ince.
Kontrast denetimi olmadan renkli bir arka plan üzerinde gri metin.
İki veya daha fazla kulaklık "güzellik için".
Uzun çizgiler (> 90 karakter) ve yoğun çizgi yüksekliği <1. 35.
Tablolarda orantılı genişlik sayıları/" atlama" toplamları.
Düğmelerdeki/etiketlerdeki aktarımlara basın.

16) İnceleme kontrol listesi

Okunabilirlik

• Bodysuits 16-18 px; LH ≥ 1. 45.
• Dize uzunluğu 45-80 karakterdir.

Hiyerarşi

• %12 ≥ artışlarla ölçeklendirin; Izgarayla uyumlu girintiler.

Sayılar/Tablolar

• Toplamlar/katsayılar için tablo sayıları; ondalık hizalama.

Kullanılabilirlik

• WCAG kontrastı elde edildi; Odak stilleri renk olmadan görülebilir.

Performans

• Subset/woff2; 'font-display: swap'; Bütçe ≤ 200 KB.

Yerelleştirme

• Kiril/Latin/RTL desteği; tireleme/diyakritikler kontrol edildi.

17) A/B ve metrikler

Test: Gövde ± 1 px pin, başlık ölçek aralığı, CTA ağırlığı, önde.
Ölçü: okuma süresi, kaydırma derinliği, TO CTA, form hataları, CLS (metin kararlılığı).

Kısa Özet

Tipografi arayüzün iskeletidir. Öngörülebilir bir ölçek ayarlayın, kontrast ve ritmi koruyun, değişken fontlar ve tablo sayıları kullanın, yüklemeyi optimize edin. Ardından UI hızlı bir şekilde okunacak, istikrarlı bir şekilde çalışacak ve temalara ve dillere ölçeklenecektir.