Τυπογραφία διεπαφής

1) Ρόλος της τυπογραφίας στο προϊόν

• επιταχύνει τη σάρωση και μειώνει το γνωστικό φορτίο,
• σχηματίζει ιεραρχία και βοηθά στην πλοήγηση του κράτους,
• αυξάνει τη μετατροπή (CTA, μορφές) και μειώνει τα σφάλματα,
• καθιστά τη διεπαφή προσιτή και ανθεκτική στον εντοπισμό.

2) Βασικές παράμετροι

Pin (κείμενο σώματος): 16-18 px στην επιφάνεια εργασίας, 15-16 px στο κινητό.
Ύψος γραμμής: 1. 45–1. 6 για το κείμενο, 1. 2–1. 35 για τίτλους.
Μήκος γραμμής (μέτρο): 45-80 χαρακτήρες· σε πλευρικές ράβδους - 36-60.
Παρακολούθηση: 0-1% για απλό κείμενο. για τα καψάκια - + 2-4%.
Αντίθεση (WCAG) -Απλό κείμενο ≥ 4. 5:1, χονδρό/λιπαρό ≥ 3:1.
Μητρώο: αποφυγή μόνιμων CAPS. χρήση ετικετών/τσιπ, αντιστάθμιση ιχνηλάτησης.

3) Κλίμακα ιεραρχίας και μεγέθους

Συνιστούμε μια αρθρωτή προσέγγιση: 8-pt πλέγμα + τυπογραφική κλίμακα.

• Εμφάνιση: 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)
• Σώμα/L: 18/28 (1. 55)
• Σώµα/Μ: 16/26 (1. 55)
• Σώμα/Σ: 14/22 (1. 5)
• Λεζάντα: 12/18 (1. 5)
• Μονο/UI: 12-14/18-20

• Μεταξύ γειτονικών επιπέδων - ένα αξιοσημείωτο βήμα (τουλάχιστον 12-16%).
• Η ιεραρχία χτίζεται από ένα συνδυασμό μεγέθους, βάρους, που οδηγεί, χρώματος (λαμβάνοντας υπόψη την αντίθεση) και αποστάσεων σε γειτονικά μπλοκ.

4) Ύψος, γραμμή βάσης και οπτικά

Ευθυγραμμίστε τα στοιχεία με το ύψος του κάλυκα των κεφαλίδων (βολικό με εικονίδια).
Διατηρήστε μια γραμμή βάσης κειμένου 4/8 pt - ακόμη και ρυθμοί καθιστούν ευκολότερη την ανάγνωση.
Οπτικές περιπτώσεις: οι επικεφαλίδες πάνω από το τετράγωνο είναι μεγαλύτερες από κάτω από αυτό (π.χ. + 4-8 px παραπάνω).

5) Στυλ και μεταβλητές γραμματοσειρές

Ελάχιστο σύνολο: Κανονικό, μεσαίο, αρνητικό τόλμη (έντονο προαιρετικό).
Να µη χρησιµοποιείτε το Ultra- Light/Λεπτό σε UI.

• Σώμα: 420-470 (οπτικά κολακευτικό από 400).
• Ετικέτες UI: 500-550.
• Κεφαλίδες/CTA: 600-650.
• Εάν το μέγεθος μειωθεί, αυξάνεται ελαφρά το βάρος (αντιστάθμιση).
• Απενεργοποίηση διακοσμητικών συνδέσμων σε αριθμούς UI. κατέχουν τυποποιημένες κυριλλικές/λατινικές συνδέσεις.

6) Αριθμοί, πίνακες και ημερομηνίες

Περιλαμβάνονται πίνακες για ποσά, συντελεστές, χρονοδιακόπτες, βαθμολογίες.
Τα σημεία +/ − είναι πάντα ορατά και με επαρκή αντίθεση. επισημαίνουν αρνητικές τιμές όχι μόνο σε χρώμα (εικονίδιο/βέλος/έντονη).
Για τις νομισματικές αξίες, χρησιμοποιήστε ένα στενό χώρο ως ένα λεπτό bit διαχωριστή (ή τοπική μορφή).
στους πίνακες, ευθυγραμμίζονται με το δεκαδικό ψηφίο· για μονομερείς στήλες - μονοδιαστημική γραμματοσειρά.
Τα διαγράμματα υπογραφής του άξονα ≥ 12 px (κινητό) και ≥ 13-14 px (επιτραπέζιο), LH 1. 3; θρύλους ≥ 4. 5:1 στο φόντο.

7) Έντυπα, εισροές, μηνύματα

Ετικέτες 12-14 px, LH 1. 3–1. 4, κανονικό ή μεσαίο.
Ο κάτοχος της θέσης δεν πρέπει να είναι «γκρίζος αέρας» - ο στόχος είναι 3:1 στο φόντο, οπτικά διακριτός από το κείμενο.
Σφάλματα/επιτυχία/βοήθεια κειμένου 12-14 px; δεν βασίζονται μόνο στο χρώμα (εικονίδιο/κείμενο).

8) Σκοτεινά/ελαφρά θέματα

Σε ένα σκοτεινό θέμα, αποφύγετε το # FFF στις # 000: ανεβάστε το φόντο σε L≈0. 14–0. 18, και να μειώσει το κείμενο σε L≈0. 9 - λιγότερη λάμψη.
Οδηγώντας στο σκοτάδι μπορεί να είναι + 0. 05 παραπάνω για άνεση.
Σύνδεσμοι/προφορές στο σκοτάδι - μείωση του κορεσμού και αύξηση της ελαφρότητας κατά 0. 02–0. 04.

9) Τοπική προσαρμογή και πολυγλωσσία

Επιλέξτε οικογένειες με πλήρη κυριλλική/λατινική/ελληνική, μάρκα προφοράς και νομισματική υποστήριξη.
RTL: εικονίδια κατόπτρων/ευθυγραμμίσεις, αλλά όχι αριθμοί και λατινικά. Μεταφορές δοκιμών.
Αυτόματες μεταφορές («παύλες: auto») για να συμπεριληφθούν μόνο σε μεγάλες ζώνες περιεχομένου. σε κουμπιά UI - απαγόρευση της μεταφοράς.
Για την Τουρκία/Αζερμπαϊτζάν, ελέγξτε τα έντυπα «İ/ı».
Για τα Γεωργιανά και τα Ταϊλανδέζικα, ανεβάστε τον πείρο βάσης κατά 1 px (χαρακτηριστικά στυλ).

10) Διαθεσιμότητα (A11y)

Αντίθεση κειμένου: βλ. § 2.
Στυλ εστίασης - ορατό χωρίς χρώμα: έμφαση, σύνορο, σκιά, όφσετ.
Το μέγεθος γραμματοσειράς κλιμακώνεται συστηματικά (υποστήριξη μεγέθους κειμένου OS).
Μην κωδικοποιήσετε την έννοια μόνο μέσω χρώματος/βάρους - προσθέστε σαφείς λεζάντες και εικονίδια.

11) Φόρτωση και απόδοση γραμματοσειράς

Στόχοι: ελαχιστοποίηση των εμποδίων, παροχή προβλέψιμων FOUT και σταθερών CLS.

Υποσύνολα: Λατινικά, Κυριλλικά, αριθμοί/σύμβολα - μεμονωμένα αρχεία.
Μορφότυποι: 'woff2' (κύρια), 'woff' ως οπισθοδρόμηση.
«γραμματοσειρά: ανταλλαγή» (ή «προαιρετική» για τις δευτεροβάθμιες οικογένειες).

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

Μεταβλητή γραμματοσειρά αντί για 3-4 στατικά - συχνά πιο κερδοφόρα σε βάρος.
Προϋπολογισμός: 150-200 KB συνολικά για την κρίσιμη διαδρομή (μετά το gzip/brotli).
Απόδοση: Αποφυγή πολλαπλών σκιών/μάσκες στο κείμενο. χρήση των επιδράσεων του συστήματος με φειδώ.

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 (εργαστήριο)

Αποδόσεις/αποδόσεις, υπόλοιπα, χρονοδιακόπτες - χρησιμοποιήστε αριθμούς πίνακα, μονοδιαστημικά σε κρίσιμες στήλες.
Ηγέτες/αξιολογήσεις: ισοστάθμιση ανά κατηγορία, ενοποιημένη μορφή νομίσματος, ρητή «↑/↓».
Κρίσιμες κοινοποιήσεις (18 +, όρια, κίνδυνοι) - αντίθετα, η ελάχιστη AAA δεν χρησιμοποιεί το ALL CAPS.
Promo banners: Κείμενο μόνο σε ελεγχόμενες με αντίθεση ολισθήσεις/επικαλύψεις.

15) Αντι-μοτίβα

Φως/Λεπτό σε μικρές ακίδες.
Γκρι κείμενο σε έγχρωμο φόντο χωρίς έλεγχο αντίθεσης.
Δύο ή περισσότερα ακουστικά «για ομορφιά».
Παραγάδια (> 90 χαρακτήρες) και πυκνό ύψος γραμμής <1. 35.
Αναλογικοί αριθμοί πλάτους σε πίνακες/ποσά» άλματος «.
Πιέστε τις μεταφορές σε κουμπιά/ετικέτες.

16) Κατάλογος ελέγχου

Αναγνωσιμότητα

• Στολές σώματος 16-18 px; LH ≥ 1. 45.
• Το μήκος της χορδής είναι 45-80 χαρακτήρες.

Ιεραρχία

• Κλίμακα προσαυξήσεων ≥ 12%. περιπτώσεις που συνάδουν με το δίκτυο.

Αριθμοί/Πίνακες

• Αριθμοί πινάκων για τα ποσά/συντελεστές· δεκαδική ευθυγράμμιση.

Διαθεσιμότητα

• Επιτεύχθηκε αντίθεση WCAG· Τα στυλ εστίασης είναι ορατά χωρίς χρώμα.

Επιδόσεις

• Subset/woff2· «γραμματοσειρά: ανταλλαγή»· Προϋπολογισμός 200 KB.

Εντοπισμός

• Υποστήριξη κυριλλικής/λατινικής/RTL· Ελέγχεται η υπόνοια/διακριτικά.

17) A/B και μετρήσεις

Δοκιμή: Σώμα ± 1 px pin, βήμα κλίμακας πορείας, βάρος CTA, προβάδισμα.
Μέτρο: χρόνος ανάγνωσης, βάθος κύλισης, CTR CTA, μορφή σφαλμάτων, CLS (σταθερότητα κειμένου).

Σύντομη Περίληψη

Η τυπογραφία είναι ο σκελετός της διεπαφής. Ορίστε μια προβλέψιμη κλίμακα, κρατήστε την αντίθεση και το ρυθμό, χρησιμοποιήστε μεταβλητές γραμματοσειρές και αριθμούς πίνακα, βελτιστοποιήστε τη φόρτωση. Στη συνέχεια, ο ΚΠΕ θα διαβαστεί γρήγορα, θα εργαστεί σταθερά και θα κλιμακωθεί σε θέματα και γλώσσες.