تایپوگرافی

اصل

تایپوگرافی در پرتو یک انتخاب آگاهانه است، نه پیش‌فرض مرورگر. فارسی نیاز به فاصله خط بیشتر، letter-spacing صفر، و اعداد بومی دارد — این‌ها از روز اول در سیستم تنظیم شده‌اند. یکان بخ Variable تنها فونتی است که در پرتو استفاده می‌شود؛ فونت سفارشی اضافه نکنید.

قوانین اجباری

فونت پیش‌فرض

پرتو از فونت یکان بخ Variable استفاده می‌کند — یک فونت متغیر فارسی که از وزن ۱۰۰ تا ۹۵۰ پشتیبانی می‌کند. این فونت به صورت پیش‌فرض در سیستم بارگذاری می‌شود و نیازی به تنظیم دستی ندارد.

ویژگی‌های OpenType

اعداد فارسی — ss01

مهم‌ترین ویژگی: برای نمایش اعداد فارسی از OpenType استفاده کنید، نه JavaScript:

/* پرتو این را به صورت پیش‌فرض تنظیم کرده */
body {
  font-feature-settings: 'ss01' 1;
}

// این کد را ننویسید
const fa = num.toString().replace(/\d/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[d])

// از utility پرتو استفاده کنید (فقط برای فرمت‌دهی، نه تبدیل)
import { formatNumber } from '@partodata/ui'
formatNumber(1234567) // → "۱٬۲۳۴٬۵۶۷"

سایر ویژگی‌های فونت

font-variation-settings:
  'wght' 400,
  'DOTS' 0;
font-feature-settings:
  'kern' 1,
  'liga' 1,
  'ss01' 1;

مقیاس اندازه (Type Scale)

پرتو یک مقیاس معنایی واحد دارد — شش utility که مستقیماً از توکن‌های --text-* در @theme ساخته می‌شوند. اندازه و line-height هر کدام یک‌جا و هماهنگ تعریف شده و line-height ها برای خوانایی فارسی کمی بازتر از پیش‌فرض لاتین تنظیم شده‌اند. کف خوانایی فارسی ۱۲px است (text-caption).

نمونه بصری

وزن فونت

قانون ساده

• متن بدنه → font-normal
• عناوین درون محتوا → font-semibold
• عناوین صفحه → font-bold
• اعداد متریک → font-bold با text-2xl یا بالاتر

ترکیب‌های رایج

Card

<div className="bg-surface-100 p-4 rounded-lg border border-default">
  <h3 className="text-foreground text-subheading font-medium">نام اینفلوئنسر</h3>
  <p className="text-lighter text-body mt-1">@username · ۱۲۵ هزار دنبال‌کننده</p>
</div>

MetricCard

اعداد متریک با text-stat (چهره‌ی جدا برای اعداد؛ ارقام tabular). برچسب با text-caption — بدون uppercase و بدون tracking (هر دو خوانایی فارسی را خراب می‌کنند):

<div className="bg-surface-100 p-4 rounded-lg border border-default">
  <p className="text-lighter text-caption font-medium">نرخ تعامل</p>
  <p className="text-foreground text-stat mt-1">۳.۲٪</p>
  <p className="text-lighter text-caption mt-1">نسبت به ماه گذشته</p>
</div>

PageHeader

<div>
  <h1 className="text-foreground text-heading font-semibold">اینفلوئنسرها</h1>
  <p className="text-lighter text-body mt-1">۲۴۸ اینفلوئنسر در لیست شما</p>
</div>

Table

سرستون جدول از الگوی meta-label استفاده می‌کند: text-caption font-medium text-lighter — پاسخ مناسبِ فارسی به سرستون‌های mono/uppercase سوپابیس (بدون uppercase، بدون tracking). سلول‌ها اندازه‌شان را از تراکم خودِ Table (data-size) می‌گیرند.

<>
  {/* header — meta-label */}
  <th className="text-lighter text-caption font-medium text-start">نام کاربری</th>

  {/* cell اصلی — اندازه از data-size جدول */}
  <td className="text-foreground">@ali.ahmadi</td>

  {/* cell ثانویه */}
  <td className="text-lighter">۴۵٬۲۰۰</td>
</>

Alert / Toast

<div>
  <p className="text-foreground text-body font-medium">تغییرات ذخیره شد</p>
  <p className="text-lighter text-caption mt-0.5">کمپین «تابستان ۱۴۰۳» به‌روزرسانی شد</p>
</div>

راهنمای فارسی

فاصله خط (line-height)

فارسی به فاصله خط بیشتری نسبت به انگلیسی نیاز دارد — حروف کشیده‌تر و نقطه‌ها بیشتر هستند. توکن‌های مقیاس معنایی این فاصله را از قبل در خود دارند (مثلاً text-body با line-height ۱٫۶)، پس معمولاً نیازی به leading-* دستی نیست:

// درست — line-height مناسب فارسی داخل خود توکن است
<p className="text-body">متن طولانی فارسی...</p>
<h2 className="text-heading font-semibold">عنوان</h2>

// فقط در موارد خاص که به فاصله‌ی متفاوت نیاز دارید، leading-* دستی اضافه کنید

فاصله بین حروف (letter-spacing)

در فارسی، letter-spacing مثبت خوانایی را کاهش می‌دهد:

// درست
<h1 className="tracking-normal">عنوان فارسی</h1>

// نادرست — حروف از هم فاصله می‌گیرند و زشت می‌شود
<h1 className="tracking-widest">عنوان فارسی</h1>

شکستن خط

/* برای جلوگیری از overflow در متن فارسی */
word-break: normal;
overflow-wrap: break-word;

بهترین روش‌ها

• از text-lighter (نه text-muted) برای متن ثانویه‌ی خوانا مثل timestamp و متادیتا استفاده کنید؛ text-muted تیر faint و مخصوص حالت‌های غیرفعال است
• هرگز بیش از ۳ اندازه متن در یک card نداشته باشید
• اعداد متریک مهم را با text-stat نمایش دهید تا سریع خوانده شوند
• در table، header با text-caption font-medium text-lighter (الگوی meta-label) و سلول‌ها با اندازه‌ی data-size جدول بهترین خوانایی را دارند