تایپوگرافی رابط

1) نقش تایپوگرافی در محصول

• سرعت اسکن و کاهش بار شناختی،
• یک سلسله مراتب را تشکیل می دهد و به حرکت در دولت کمک می کند
• تبدیل (CTA، فرم ها) را افزایش می دهد و خطاها را کاهش می دهد
• رابط کاربری را در دسترس و مقاوم در برابر محلی سازی می کند.

2) پارامترهای اساسی

پین (متن بدن): 16-18 پیکسل در دسکتاپ، 15-16 پیکسل در تلفن همراه.

ارتفاع خط: 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)
• بدن/M: 16/26 (1. 55)
• بدن/S: 14/22 (1. 5)
• 12/18 (1) 5)
• مونو/UI: 12-14/18-20

• بین سطوح همسایه - یک گام قابل توجه (حداقل 12-16٪).
• سلسله مراتب با ترکیبی از اندازه، وزن، پیشرو، رنگ (با توجه به کنتراست) و فاصله تا بلوک های همسایه ساخته شده است.

4) ارتفاع کلاه، پایه و اپتیک

تراز عناصر به ارتفاع کلاه از هدر (مناسب با آیکون).
حفظ یک خط پایه متن 4/8-pt - حتی ریتم آن را آسان تر برای خواندن.
تورفتگی های نوری: سرفصل های بالای بلوک بزرگتر از زیر آن است (به عنوان مثال، + 4-8 پیکسل در بالا).

5) سبک ها و فونت های متغیر

حداقل مجموعه: منظم، متوسط، SemiBold (پررنگ اختیاری).
از Ultra-Light/Thin در UI استفاده نکنید.

• بدن: 420-470 (نوری مسطح تر از 400).
• برچسب های UI: 500-550.
• هدر/CTA: 600-650.
• اگر اندازه کاهش می یابد، کمی افزایش وزن (جبران).
• غیر فعال کردن لیگاتورهای تزئینی در شماره UI ؛ نگه داشتن لیگاتورهای سیریلیک/لاتین استاندارد.

6) اعداد، جداول و تاریخ

شامل ارقام جدولی برای مقادیر، ضرایب، تایمر، رتبه بندی.
نشانه های − همیشه قابل مشاهده و با کنتراست کافی هستند. برجسته کردن مقادیر منفی نه تنها در رنگ (آیکون/فلش/پررنگ).
برای مقادیر پولی، از یک فضای باریک به عنوان جدا کننده بیت نازک (یا فرمت محلی) استفاده کنید.
در جداول، تراز به نقطه اعشار ؛ برای ستون های مونو - فونت یکپارچه.
نمودار امضای محور ≥ 12 پیکسل (تلفن همراه) و ≥ 13-14 پیکسل (دسکتاپ)، LH 1 است. 3; افسانه ها ≥ 4 5:1 به پس زمینه.

7) فرم ها، ورودی ها، پیام ها

برچسب ها 12-14 پیکسل، LH 1. 3–1. 4، به طور منظم یا متوسط.
نگهدارنده نباید «هوای خاکستری» باشد - هدف 3:1 به پس زمینه است، بصری قابل تشخیص از متن است.
خطا/موفقیت/متن کمک 12-14 پیکسل ؛ فقط به رنگ (آیکون/متن) تکیه نکنید.

8) تم های تاریک/نور

در یک موضوع تاریک، از # FFF در # 000 اجتناب کنید: پس زمینه را به L≈0 افزایش دهید. 14–0. 18 و متن را به L≈0 کاهش دهید. 9 - تابش خیره کننده کمتر.
رهبری در تاریکی می تواند + 0 باشد. 05 بالا برای راحتی.
لینک ها/لهجه ها در تاریکی - کاهش اشباع و افزایش روشنایی توسط 0. 02–0. 04.

9) محلی سازی و چند زبانه

انتخاب خانواده با سیریلیک کامل/لاتین/یونانی، علامت لهجه و پشتیبانی ارز.

RTL: آیکون آینه/alignments، اما نه اعداد و لاتین ؛ انتقال آزمایشی

انتقال خودکار ('خط فاصله: خودکار') شامل تنها در مناطق محتوای طولانی ؛ در دکمه های UI - ممنوعیت انتقال.
برای ترکی/آذربایجانی، فرم های «İ/ı» را بررسی کنید.
برای گرجستان و تایلندی، پین پایه را با 1 پیکسل (ویژگی های سبک) بالا ببرید.

10) در دسترس بودن (A11y)

کنتراست متن: § 2 را ببینید.
سبک های تمرکز - قابل مشاهده بدون رنگ: زیر خط، مرز، سایه، افست.
اندازه قلم به صورت سیستماتیک کوچک شده است (پشتیبانی از اندازه متن OS).
معنی را فقط از طریق رنگ/وزن رمزگذاری نکنید - زیرنویس ها و آیکون های صریح را اضافه کنید.

11) بارگیری و عملکرد فونت

اهداف: برای به حداقل رساندن انسداد، ارائه FOUT قابل پیش بینی و CLS پایدار است.

زیر مجموعه ها: لاتین، سیریلیک، اعداد/نمادها - فایل های فردی.
فرمت ها: 'woff2' (اصلی)، 'woff' به عنوان جایگزین.
'font-display: swap' (یا 'optional' برای خانواده های ثانویه).

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

فونت متغیر به جای 3-4 استاتیک - اغلب در وزن سودآور است.
بودجه: ≤ 150-200 کیلوبایت در مجموع برای مسیر بحرانی (پس از 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 پین ؛ فاصله بین پاراگراف = 1 × مرحله پایه.
لیست ها - تورفتگی نشانگر با پایه متن تراز شده است.
دکمه ها و زمینه ها - ارتفاع چند برابر خط شبکه پایه (به عنوان مثال، 40/48/56 px) است.

14) ویژگی های iGaming (کارگاه)

شانس/شانس، تعادل، تایمر - استفاده از اعداد جدولی، monospaced در ستون بحرانی.
رهبران/رتبه بندی: سطح بندی بر اساس طبقه بندی، فرمت ارز واحد، صریح «↑/↓».
اطلاعیه های بحرانی (18 +، محدودیت ها، خطرات) - حداقل AAA در مقابل، از ALL CAPS استفاده نکنید.
آگهی های تبلیغاتی: متن فقط در برگه ها/پوشش های کنترل شده با کنتراست.

15) ضد الگوهای

نور/نازک در پین های کوچک.
متن خاکستری در یک پس زمینه رنگی بدون بررسی کنتراست.
دو یا چند هدست «برای زیبایی».
خطوط طولانی (> 90 کاراکتر) و ارتفاع خط متراکم <1. 35.
تعداد عرض متناسب در جداول/» پریدن« مبالغ.
انتقال را در دکمه ها/برچسب ها فشار دهید.

16) چک لیست بررسی

خوانایی

• Bodysuits 16-18 پیکسل ؛ LH ≥ 1 45.
• طول رشته 45-80 کاراکتر است.

سلسله مراتب

• مقیاس افزایش ≥ 12٪ ؛ تورها مطابق با شبکه.

اعداد/جداول

• اعداد جدولی برای مبالغ/ضرایب ؛ تراز دهدهی.

در دسترس بودن

• کنتراست WCAG به دست آورد ؛ سبک های تمرکز بدون رنگ قابل مشاهده هستند.

عملکرد

• Subset/woff2 ؛ 'font-display: swap' ؛ بودجه ≤ 200 کیلوبایت

محلی سازی

• پشتیبانی سیریلیک/لاتین/RTL ؛ hyphenation/diacritics بررسی شده است.

17) A/B و معیارهای

تست: بدن ± پین 1 پیکسل، زمین مقیاس عنوان، وزن CTA، پیشرو.
اندازه گیری: زمان خواندن، عمق پیمایش، CTR CTA، خطاهای فرم، CLS (ثبات متن).

خلاصه ای کوتاه

تایپوگرافی اسکلت رابط است. یک مقیاس قابل پیش بینی تنظیم کنید، کنتراست و ریتم را حفظ کنید، از فونت های متغیر و اعداد جدولی استفاده کنید، بارگیری را بهینه کنید. سپس UI به سرعت خوانده خواهد شد، کار پایدار و مقیاس به تم ها و زبان.