Typografia interfejsu

1) Rola typografii w produkcie

• przyspiesza skanowanie i zmniejsza obciążenie poznawcze,
• tworzy hierarchię i pomaga poruszać się po państwie,
• zwiększa konwersję (CTA, formy) i zmniejsza błędy,
• sprawia, że interfejs jest dostępny i odporny na lokalizację.

2) Podstawowe parametry

Pin (tekst ciała): 16-18 px na pulpicie, 15-16 px na telefonie komórkowym.
Wysokość linii: 1. 45–1. 6 dla tekstu, 1. 2–1. 35 tytułów.
Długość linii (miara): 45-80 znaków; w paskach bocznych - 36-60.
Śledzenie: 0-1% dla zwykłego tekstu; dla kapsułek - + 2-4%.
Kontrast (WCAG) - zwykły tekst ≥ 4. 5:1, gruby/tłusty ≥ 3:1.
Rejestr: unikać stałych wszystkich CAPS; używać do tagów/żetonów, kompensować śledzenie.

3) Hierarchia i skala rozmiaru

Zalecamy podejście modułowe: 8-pkt siatka + skala typograficzna.

• Wyświetlacz: 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)
• Ciało/L: 18/28 (1. 55)
• Ciało/M: 16/26 (1. 55)
• Ciało/S: 14/22 (1. 5)
• Podpis: 12/18 (1. 5)
• Mono/UI: 12-14/18-20

• Pomiędzy sąsiadującymi poziomami - zauważalny krok (co najmniej 12-16%).
• Hierarchia jest zbudowana przez połączenie wielkości, wagi, wiodącej, koloru (biorąc pod uwagę kontrast) i odległości do sąsiednich bloków.

4) Wysokość nasadki, linia wyjściowa i optyka

Wyrównać elementy do wysokości nasadki nagłówków (wygodne z ikonami).
Utrzymać 4/8-pkt tekst podstawowy - nawet rytmy ułatwiają czytanie.
Indenty optyczne: pozycje powyżej bloku są większe niż poniżej (na przykład + 4-8 px powyżej).

5) Style i czcionki zmienne

Minimalny zestaw: Regular, Medium, SemiBold (Pogrubiony opcjonalnie).
Nie stosować leku Ultra-Light/Thin w interfejsie użytkownika.

• Ciało: 420-470 (optycznie płaskie niż 400).
• Etykiety interfejsu użytkownika: 500-550.
• Nagłówki/CTA: 600-650.
• Jeśli wielkość zmniejsza się, nieznacznie zwiększyć wagę (odszkodowanie).
• Wyłączyć ligatury dekoracyjne w numerach interfejsu użytkownika; posiadać standardowe ligatury cyrylicowe/łacińskie.

6) Numery, tabele i daty

Proszę podać dane tabelaryczne dotyczące kwot, współczynników, czasomierzy, ocen.
+/− znaki są zawsze widoczne i wystarczająco kontrastowe; podkreślają negatywne wartości nie tylko w kolorze (ikona/strzałka/pogrubienie).
Dla wartości pieniężnych użyj wąskiej przestrzeni jako cienkiego separatora bitowego (lub formatu lokalnego).
w tabelach, wyrównać do punktu po przecinku; dla kolumn mono - czcionka monospaced.
Wykresy podpisu osi ≥ 12 px (mobilny) i ≥ 13-14 px (pulpit), LH 1. 3; legendy ≥ 4. 5:1 do tła.

7) Formularze, dane wejściowe, wiadomości

Etykiety 12-14 px, LH 1. 3–1. 4, regularne lub średnie.
Łożysko nie powinno być „szare powietrze” - celem jest 3:1 do tła, wizualnie odróżnialne od tekstu.
Błędy/sukces/pomoc tekst 12-14 px; nie polegać tylko na kolorze (ikona/tekst).

8) Ciemne/jasne tematy

W ciemnym temacie, unikaj # FFF na # 000: podnieś tło do L-0. 14–0. 18, i obniżyć tekst do L-0. 9 - mniej olśnienia.
Prowadzenie w ciemności może być + 0. 05 powyżej dla komfortu.
Linki/akcenty w ciemności - zmniejszyć nasycenie i zwiększyć lekkość o 0. 02–0. 04.

9) Lokalizacja i wielojęzyczność

Wybierz rodziny z pełnym cyrylicą/łaciną/greką, znakiem akcentu i wsparciem waluty.
RTL: ikony lustrzane/wyrównania, ale nie liczby i łacina; Transfery testowe.
Automatyczne transfery („hyphens: auto”), które mają być uwzględnione tylko w strefach długich treści; w przyciskach interfejsu użytkownika - zakazać transferu.
W przypadku języka tureckiego/azerbejdżańskiego należy sprawdzić formularze „Δ/ı”.
Dla gruzińskiego i tajskiego, podnieść pin podstawowy o 1 px (cechy stylu).

10) Dostępność (A11y)

Kontrast tekstu: zob. § 2.
Style ostrości - widoczne bez koloru: podkreślenie, granica, cień, przesunięcie.
Rozmiar czcionki jest skalowany systemowo (obsługa rozmiaru tekstu systemu operacyjnego).
Nie koduj znaczenia tylko przez kolor/wagę - dodaj wyraźne napisy i ikony.

11) Ładowanie czcionek i wydajność

Cele: aby zminimalizować blokady, zapewnić przewidywalne FOUT i stabilne CLS.

Podzbiory: łacina, cyrylica, liczby/symbole - poszczególne pliki.
Formaty: 'woff2' (główny), 'woff' jako fallback.
„font-display: swap” (lub „optional” dla rodzin drugorzędnych).

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

Zmienna czcionka zamiast 3-4 statyków - często bardziej opłacalna waga.
Budżet: ≤ 150-200 KB łącznie dla ścieżki krytycznej (po gzip/brotli).
Render: Unikaj wielu cieni/masek na tekście; używać efektów systemowych słabo.

12) Żetony typograficzne (system projektowania)

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) Układ i rytm

8-pkt moduł pionowy; odległość między paragrafami = 1 × stopień bazowy.
Listy-Nacięcie znacznika jest dostosowane do podstawy tekstu.
Przyciski i pola - Wysokość to wielokrotność linii siatki podstawowej (na przykład 40/48/56 px).

14) Specyfika iGaming (warsztat)

Szanse/kursy, salda, zegary - używać numerów tabelarnych, monospaced w kolumnach krytycznych.
Liderzy/oceny: poziomowanie według kategorii, ujednolicony format waluty, wyraźne „na/na”.
Powiadomienia krytyczne (18 +, limity, ryzyko) - minimalny AAA w przeciwieństwie, nie stosować WSZYSTKICH CAPS.
Banery promo: SMS tylko na kontrast sterowane poślizgi/nakładki.

15) Anty-wzory

Światło/cienkie na małych szpilkach.
Szary tekst na kolorowym tle bez sprawdzania kontrastu.
Dwa lub więcej słuchawek „dla piękna”.
Długie linie (> 90 znaków) i gęsta wysokość linii <1. 35.
Proporcjonalne liczby szerokości w tabelach/sumach” skaczących „.
Przesuwanie przycisków/etykiet.

16) Lista kontrolna

Czytelność

• Bodysuits 16-18 px; LH ≥ 1. 45.
• Długość łańcucha wynosi 45-80 znaków.

Hierarchia

• Skala w przyrostach ≥ 12%; indenty zgodne z siatką.

Numery/tabele

• Numery tabelaryczne dla sum/współczynników; wyrównanie dziesiętne.

Dostępność

• Osiągnięty kontrast WCAG; style ostrości są widoczne bez koloru.

Wydajność

• Subset/woff2; „font-display: swap”; budżet ≤ 200 KB.

Lokalizacja

• Wsparcie cyrylicy/łaciny/RTL; wykryta hiphenacja/diakrytyka.

17) A/B i mierniki

Test: Ciało ± 1 px pin, skala skoku, waga CTA, wiodąca.
Pomiar: czas odczytu, głębokość przewijania, CTR CTA, błędy formy, CLS (stabilność tekstu).

Krótkie podsumowanie

Typografia jest szkieletem interfejsu. Ustaw przewidywalną skalę, zachowaj kontrast i rytm, użyj zmiennych czcionek i numerów tabelarycznych, zoptymalizuj obciążenie. Wtedy UI będzie czytać szybko, pracować stabilnie i skalować do tematów i języków.