טיפוגרפיה ממשק

1) תפקיד הטיפוגרפיה במוצר

• מאיץ סריקה ומפחית עומס קוגניטיבי,
• נוצר היררכיה ועוזר לנווט את המדינה,
• מגביר את ההמרה (CTA, טופס) ומפחית שגיאות,
• הופך את הממשק לנגיש ועמיד בפני לוקליזציה.

2) פרמטרים בסיסיים

סיכה (טקסט גוף): 16-18 px בשולחן עבודה, 15-16 px בנייד.
גובה הקו: 1. 45–1. 6 עבור טקסט, 1. 2–1. 35 עבור תארים.
אורך קו (מדד): 45-80 תווים; בסורגים - 36-60.
מעקב: 0-1% עבור טקסט רגיל; עבור כמוסות - + 2-4%.
חדות (WCAG) - טקסט Plain mind 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)
• גוף/M: 16/26 (1. 55)
• גוף/S: 14/22 (1. 5)
• כותרת: 12/18 (1. 5)
• מונו/יו: 12-14/18-20

• בין רמות שכנות - צעד בולט (לפחות 12-16%).
• ההיררכיה בנויה על ידי שילוב של גודל, משקל, מוביל, צבע (לוקח בחשבון את הניגודיות) ומרחקים לבלוקים שכנים.

4) גובה כובע, קו בסיס ואופטיקה

יישר את היסודות לגובה הכובע של הכותרות (נוח עם סמלים).
שמור על בסיס טקסט 4/8 פט - אפילו מקצבים מקלים על הקריאה.
חריצים אופטיים: הראש מעל הבלוק גדול יותר מאשר מתחתיו (לדוגמה, + 4-8 px מעל).

5) סגנונות וגופנים משתנים

סט מינימלי: רגיל, בינוני, נועז (אופציונלי נועז).
אין להשתמש אולטרה-אור/דק UI.

• גוף: 420-470 (אופטי יותר מ-400).
• תוויות: 500-550.
• כותרות/CTA: 600-650.
• אם הגודל יורד, קצת להגדיל את המשקל (פיצוי).
• בטל קשירות דקורטיביות במספרי UI; החזיקו ליגטורות קיריליות/לטיניות סטנדרטיות.

6) מספרים, שולחנות ותאריכים

כולל נתונים טבעיים עבור סכומים, מקדמים, טיימרים, רייטינג.
הסימנים תמיד נראים לעין ובניגוד מספק; הדגש על ערכים שליליים לא רק בצבע (אייקון/חץ/נועז).
עבור ערכים כספיים, השתמש במרחב צר כמפריד סיביות דק (או פורמט מקומי).
בשולחנות, להתיישר לנקודה העשרונית; עבור עמודות מונו - גופן חד-ספרתי.
גרפי חתימת הציר 12 px (mobile) ו-mindo 13-14 px (desktop), LH 1. 3; אגדות 4. 5:1 לרקע.

7) טפסים, קלט, הודעות

תוויות 12-14 px, LH 1. 3–1. 4, רגיל או בינוני.
ממלא מקום לא צריך להיות ”אוויר אפור” - המטרה היא 3:1 לרקע, להבדיל חזותית מהטקסט.
שגיאות/הצלחה/עזרה בטקסט 12-14 px; לא מסתמכים רק על צבע (סמל/טקסט).

8) נושאים אפלים/בהירים

בנושא אפל, הימנע מ ־ # FFF # 000: העלה את הרקע ל ־ L watch0. 14–0. 18, ולהוריד את הטקסט ל L 0. 9 - פחות בוהק.
מוביל בחושך יכול להיות + 0. 05 מעל לנוחות.
קישורים/מבטאים כהים - להקטין את הרוויה ולהגביר את האור ב ־ 0. 02–0. 04.

9) לוקליזציה ורב ־ לשוניות

בחר משפחות עם קירילית מלאה/לטינית/יוונית, סימן מבטא ותמיכה במטבע.
RTL: סמלי מראה/מערכים, אבל לא מספרים ולטינית; העברות בדיקה.
העברות אוטומטיות (”מקפים: אוטומטי”) לכלול רק באזורי תוכן ארוכים; בכפתורי UI - איסור העברה.
עבור טורקי/אזרבייג 'אני, בדוק את הטפסים ”Fonty/ı”.
עבור גאורגית ותאילנדית, להעלות את סיכת הבסיס על ידי 1 px (מאפייני סגנון).

10) זמינות (A11y)

ניגוד טקסט: ראה # 2.
סגנונות מיקוד - נראים ללא צבע: קו תחתי, גבול, צל, קיזוז.
גודל הגופן מוערך באופן שיטתי (systemical text support).
אל תקודד משמעות רק דרך צבע/משקל - הוסף כיתובים וסמלים מפורשים.

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/brootli).
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 (סדנה)

סיכויים/סיכויים, מאזן, טיימרים - להשתמש במספרים טבעיים, חד ספרתיים בעמודות קריטיות.
מנהיגים/רייטינג: החלקה לפי קטגוריה, תבנית מטבע מאוחדת, במפורש ”locks/auth”.
הודעות קריטיות (18 +, גבולות, סיכונים) - מינימום AAA בניגוד, לא משתמשים ב-ALL CAPS.
כרזות פרומו: טקסט רק על תלושים/כיסוי מבוקר ניגוד.

15) אנטי דפוסים

אור/דק על סיכות קטנות.
טקסט אפור על רקע צבעוני ללא בדיקת ניגודיות.
שתי אוזניות או יותר ”ליופי”.
שורות ארוכות (> 90 תווים) וקו-גובה צפוף <1. 35.
מספרי רוחב פרופורציונליים בטבלאות/” קפיצה” סכומים.
לחץ על העברות בכפתורים/תוויות.

16) רשימת בדיקות

יכולת קריאה

[ ] Bodysuits 16-18 px; אל-אייץ '1. 45.

אורך [ ] מחרוזת הוא 45-80 תווים.

היררכיה

[ ] Scale במרווחים של 12%; חריצים המתאימים לרשת.

מספרים/טבלאות

[ ] Tabular-nums עבור סכומים/מקדמים; יישור עשרוני.

זמינות

[ ] WCAG הושג; סגנונות המיקוד נראים ללא צבע.

ביצועים

[ ] Subset/woff2, 'גופן תצוגה: החלפה'; תקציב של 200 קק "ש.

לוקליזציה

[ ] תמיכה קירילית/לטינית/RTL; מקף/דיאקריטיקה בדקו.

17) A/B ומדדים

בדיקה: סיכת px p1 גוף, הגשת קנה מידה כותרת, משקל CTA, מוביל.
מדידה: זמן קריאה, עומק גלילה, CTR CTA, שגיאות צורה, CLS (יציבות טקסט).

תקציר

טיפוגרפיה היא השלד של הממשק. קבע קנה מידה צפוי, שמור על ניגודיות וקצב, השתמש בגופנים משתנים ובמספרים טבעיים, ייעל את הטעינה. לאחר מכן יקראו את UI במהירות, יעבדו בצורה יציבה ויתקדמו לנושאים ולשפות.