ინტერფეისის ტიპოგრაფია

1) სტამბის როლი პროდუქტში

• აჩქარებს სკანირებას და ამცირებს კოგნიტურ დატვირთვას,
• ქმნის იერარქიას და ეხმარება ნავიგაციას,
• ზრდის კონვერსიას (CTA, ფორმები) და ამცირებს შეცდომებს,
• ინტერფეისი ხელმისაწვდომი და მდგრადია ლოკალიზაციისთვის.

2) ძირითადი პარამეტრები

კეგლი (ძირითადი ტექსტი): 16-18 px desktop, 15-16 px მობილური.
Interstream ინტერვალი (line-height): 1. 45–1. 6 ტექსტისთვის, 1. 2–1. 35 სათაურებისთვის.
ხაზის სიგრძე: 45-80 სიმბოლო; გვერდითი ბარებში - 36-60.
შუალედური ინტერვალით: 0-1% ჩვეულებრივი ტექსტისთვის; ქუდისთვის - + 2-4%.
კონტრასტი (WCAG): ჩვეულებრივი ტექსტი 4. 5:1, დიდი/ცხიმოვანი 3:1.
რეგისტრაცია: მოერიდეთ მუდმივ ALL CAPS; გამოიყენეთ ეტიკეტები/ჩიპები, ანაზღაურება.

3) იერარქია და მასშტაბები

ჩვენ გირჩევთ მოდულური მიდგომა: 8-pt ბადე + ტიპოგრაფიული მასშტაბები.

• Display: 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)
• Body/L: 18/28 (1. 55)
• Body/M: 16/26 (1. 55)
• Body/S: 14/22 (1. 5)
• Caption: 12/18 (1. 5)
• Mono/UI: 12–14/18–20

• მეზობელ დონეს შორის შესამჩნევი ნაბიჯია (მინიმუმ 12-16%).
• იერარქია აგებულია ზომების, წონის, ინტერლინიზაციის, ფერის ერთობლიობით (კონტრასტის გათვალისწინებით) და დაშორებით მეზობელ ბლოკებამდე.

4) ქუდი, საბაზო ხაზი და ოპტიკა

მოათავსეთ ელემენტები სათაურების წვეთის მიხედვით (მოსახერხებელია ხატებისთვის).
შეინარჩუნეთ ტექსტის ძირითადი ხაზი 4/8-pt ნაბიჯით - გლუვი რითმები ამარტივებს კითხვას.
ოპტიკური უკან დახევა: ბლოკის ზემოთ სათაურები უფრო მეტია, ვიდრე მის ქვეშ (მაგალითად, ზემოდან + 4-8 px).

5) ნიშნები და შრიფტები

მინიმალური ნაკრები: Regular, Medium, SemiBold (Bold სურვილისამებრ).
ნუ გამოიყენებთ Ultra-Light/Thin UI- ში.

• Body: 420-470 (ოპტიკურად უფრო თანაბარია, ვიდრე 400).
• UI labels: 500–550.
• Headers/CTA: 600–650.
• როდესაც ამწე შემცირდება, ოდნავ გაზარდეთ წონა (ანაზღაურება).
• გამორთეთ დეკორატიული ლიგატები UI ნომრებში; შეინარჩუნეთ სტანდარტული ლიგატურები კირიული/ლათინური ანბანისთვის.

6) რიცხვები, ცხრილები და თარიღები

ჩართეთ tabular figures (მონოშირინის ნომრები) თანხების, კოეფიციენტების, ტაიმერების, რეიტინგებისთვის.
ნიშნები +/- ყოველთვის ჩანს საკმარისი კონტრასტით; უარყოფითი მნიშვნელობები გამოავლინეთ არა მხოლოდ ფერით (ხატი/ისარი/ცხიმი).
ფულადი მნიშვნელობებისთვის გამოიყენეთ ვიწრო ხარვეზი, როგორც თხელი გამონადენი (ან ადგილობრივი ფორმატი).
ცხრილებში დაალაგეთ ათობითი წერტილი; მონო სვეტებისთვის - მონოშირინის შრიფტი.
ხელმოწერის გრაფიკებში არის 12 px (მობილური) და 13-14 px (desktop), LH 1. 3; ლეგენდები - 4. 5:1 ფონამდე.

7) ფორმები, ინტუტები, შეტყობინებები

ეტიკეტები 12-14 px, LH 1. 3–1. 4, რეგულატორი ან საშუალო.
Placeholder არ უნდა იყოს „ჰაერის ნაცრისფერი“ - მიზანი 3:1 ფონისკენ, ვიზუალურად განსხვავდება ტექსტისგან.
შეცდომები/წარმატება/ჰელპის ტექსტი 12-14 px; ნუ დაეყრდნობით მხოლოდ ფერს (ხატი/ტექსტი).

8) ბნელი/ნათელი თემები

ბნელ თემაში თავიდან აიცილეთ # FFF # 000: ასწიეთ ფონი L-0. 14–0. 18, და ტექსტი შეამცირეთ L-0. 9 - ნაკლები ბლიკი.
Interlination in dark შეიძლება იყოს + 0. 05 უფრო მაღალია კომფორტისთვის.
ბმულები/აქცენტები საჩუქარში - შეამცირეთ გაჯერება და გაზარდეთ მსუბუქი 0-ით. 02–0. 04.

9) ლოკალიზაცია და მრავალენოვანი

შეარჩიეთ ოჯახები სრული მხარდაჭერით კირიული/ლათინური/ბერძნული, აქცენტული ნიშნით და ვალუტებით.
RTL: ხატის/განლაგების სარკე, მაგრამ არა რიცხვები და ლათინური; შეამოწმეთ გადარიცხვები.
autoperenos ('hyphens: auto') შედის მხოლოდ გრძელი შინაარსის ზონებში; UI ღილაკებში - აკრძალეთ გადაცემა.
თურქული/აზერბაიჯანულისთვის შეამოწმეთ „T/“ ფორმები.
ქართული და ტაილანდისთვის გაზარდეთ ძირითადი რქა 1 px- ით (ნიშნის მახასიათებლები).

10) წვდომა (A11y)

ტექსტის კონტრასტი: იხ. § 2.
ფოკუსის სტილი - ჩანს ფერის გარეშე: underline, ჩარჩო, ჩრდილი, ოფსეტური.
შრიფტის ზომა სისტემატურად მასშტაბურია (OS text size მხარდაჭერა).
არ დაშიფროთ მნიშვნელობა მხოლოდ ფერის/წონის საშუალებით - დაამატეთ აშკარა ხელმოწერები და ხატები.

11) შრიფტების ჩატვირთვა და შესრულება

მიზნები: დაბლოკვის შემცირება, პროგნოზირებადი FOUT და სტაბილური CLS უზრუნველყოფა.

ქვესათაურები (ქვესათაური): ლათინური, კირიული, რიცხვები/სიმბოლოები - ცალკეული ფაილები.
ფორმატები: 'woff2' (ძირითადი), 'woff' როგორც fallback.
'font-display: swap' (ან 'optional' მცირე ოჯახებისთვის).

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

Variable შრიფტი 3-4 სტატიკის ნაცვლად - ხშირად უფრო მომგებიანი წონაში.
ბიუჯეტი: 150-200 KB ევრო ჯამში კრიტიკულ გზაზე (gzip/brotli- ს შემდეგ).
Render: თავიდან აიცილეთ მრავალჯერადი ჩრდილები/ნიღბები ტექსტში; გამოიყენეთ სისტემური ეფექტები ეკონომიურად.

12) ტიპოგრაფიის ნიშნები (დიზაინის სისტემა)

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) გადატვირთვა და რიტმი

8-pt ვერტიკალური მოდული; მანძილი აბზაცებს შორის = 1 × საბაზო ნაბიჯი.
სიები: მარკერის მიღება თანაბარია ტექსტის ძირითადი ხაზის გასწვრივ.
ღილაკები და ველები არის ბაზის ქსელის ხაზის მრავალჯერადი სიმაღლე (მაგალითად, 40/48/56 px).

14) iGaming სპეციფიკა (პრაქტიკული)

კოეფიციენტები/შანსები, ნაშთები, ტაიმერები - გამოიყენეთ tabular ციფრები, მონოშირინი კრიტიკულ სვეტებში.
ლიდერები/რეიტინგები: განრიგი კატეგორიაში, ერთი ვალუტის ფორმატი, აშკარა „“).
პასუხისმგებელი შეტყობინებები (18 +, ლიმიტები, რისკები) - მინიმალური AAA კონტრასტით, არ გამოიყენოთ ALL CAPS.
Promo banners: ტექსტი მხოლოდ lands/verlays კონტრასტის კონტროლით.

15) ანტი შაბლონები

Light/Thin პატარა მორბენალებში.
ნაცრისფერი ტექსტი ფერადი ფონზე, კონტრასტის შემოწმების გარეშე.
ორი ან მეტი ყურსასმენი „სილამაზისთვის“.
გრძელი ხაზები (> 90 სიმბოლო) და მკვრივი ხაზის height <1. 35.
ცხრილებში პროპორციული სიგანის რიცხვები/„ ჩამოტვირთვის “თანხები.
იძულებითი გადაცემები ღილაკებში/ეტიკეტებში.

16) ჩეკის სია შურისძიებით

წაკითხული

• სხეული 16-18 px; LH ≥ 1. 45.
• ხაზის სიგრძე 45-80 სიმბოლოა.

იერარქია

• მასშტაბი 12% -იანი ნაბიჯით; უკან დახევა შეთანხმებულია ქსელთან.

ნომრები/ცხრილები

• Tabular-nums თანხები/კოეფიციენტები; ათობითი განლაგება.

წვდომა

• WCAG კონტრასტის მიღწევა; ფოკუსის სტილები ჩანს ფერის გარეშე.

შესრულება

• Subset/woff2; `font-display: swap`; ბიუჯეტი 200 KB.

ლოკალიზაცია

• კირიული/ლათინური ანბანის მხარდაჭერა/RTL; შემოწმებულია ტრანსპორტი/დიაკრიტიკა.

17) A/B და მეტრიკა

ტესტირება: race Body ± 1 px, სათაურების მასშტაბის ნაბიჯი, CTA წონა, ინტერლინირება.
გაზომეთ: read time, scroll depth, CTR CTA, ფორმების შეცდომები, CLS (ტექსტის სტაბილურობა).

მოკლე რეზიუმე

სტამბა არის ინტერფეისის ჩონჩხი. დაუსვით პროგნოზირებადი მასშტაბი, შეინარჩუნეთ კონტრასტი და რიტმი, გამოიყენეთ variable შრიფტები და ტაბულარული ციფრები, დატვირთვის ოპტიმიზაცია. შემდეგ UI სწრაფად წაიკითხავს, იმუშავებს სტაბილურად და მასშტაბური იქნება თემებისა და ენების მიხედვით.