تایپوگرافی
سیستم تایپوگرافی پرتو — فونت یکان بخ Variable، مقیاس اندازه، وزن، و راهنمای استفاده
اصل
تایپوگرافی در پرتو یک انتخاب آگاهانه است، نه پیشفرض مرورگر. فارسی نیاز به فاصله خط بیشتر، letter-spacing صفر، و اعداد بومی دارد — اینها از روز اول در سیستم تنظیم شدهاند. یکان بخ Variable تنها فونتی است که در پرتو استفاده میشود؛ فونت سفارشی اضافه نکنید.
قوانین اجباری
<p className="text-sm text-light">توضیح</p><p style={{ fontSize: '14px', color: '#888' }}>توضیح</p><h1 className="text-2xl font-bold leading-snug">عنوان</h1><h1 className="tracking-widest">عنوان فارسی</h1>formatNumber(1234567) // → "۱٬۲۳۴٬۵۶۷"num.toString().replace(/\d/g, d => '۰۱۲۳۴۵۶۷۸۹'[d])فونت پیشفرض
پرتو از فونت یکان بخ Variable استفاده میکند — یک فونت متغیر فارسی که از وزن ۱۰۰ تا ۹۵۰ پشتیبانی میکند. این فونت به صورت پیشفرض در سیستم بارگذاری میشود و نیازی به تنظیم دستی ندارد.
کیک تازه با 123456 ریال - یی یی پی پژ
تنظیمات اصلی
ویژگیهای OpenType
فاصلهگذاری و ترکیب
اعداد
Stylistic Sets
font-variation-settings: "wght" 400, "DOTS" 0;
font-feature-settings: "kern" 1, "liga" 1, "ss01" 0;ویژگیهای OpenType
اعداد فارسی — ss01
مهمترین ویژگی: برای نمایش اعداد فارسی از OpenType استفاده کنید، نه JavaScript:
/* پرتو این را به صورت پیشفرض تنظیم کرده */
body {
font-feature-settings: 'ss01' 1;
}// این کد را ننویسید
const fa = num.toString().replace(/\d/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[d])
// از utility پرتو استفاده کنید (فقط برای فرمتدهی، نه تبدیل)
import { formatNumber } from '@parto-system-design/ui'
formatNumber(1234567) // → "۱٬۲۳۴٬۵۶۷"سایر ویژگیهای فونت
font-variation-settings:
'wght' 400,
'DOTS' 0;
font-feature-settings:
'kern' 1,
'liga' 1,
'ss01' 1;| ویژگی | توضیح |
|---|---|
wght ۱۰۰–۹۵۰ | وزن فونت — محور متغیر اصلی |
DOTS 0/1 | نقطههای حروف — چسبیده (0) یا جدا (1) |
ss01 | اعداد فارسی |
kern | فاصلهگذاری هوشمند بین حروف |
مقیاس اندازه (Type Scale)
| کلاس Tailwind | اندازه | کاربرد |
|---|---|---|
text-xs | 12px | متادیتا، timestamp، badge |
text-sm | 14px | متن توضیحی، label فرم، table cell |
text-base | 16px | متن بدنه، پاراگراف اصلی |
text-lg | 18px | lead paragraph، توضیحات برجسته |
text-xl | 20px | عنوان section، card title |
text-2xl | 24px | عنوان صفحه فرعی |
text-3xl | 30px | عنوان صفحه اصلی |
text-4xl | 36px | hero title |
نمونه بصری
text-xs — ۲ ساعت پیش · ۱۲۴۵ نمایش
text-sm — توضیح کوتاه و متن راهنما
text-base — متن اصلی و محتوای بدنه
text-lg — توضیح برجسته
text-xl — عنوان کارت
text-2xl — عنوان صفحه
text-3xl — عنوان اصلی
وزن فونت
| کلاس | وزن عددی | کاربرد |
|---|---|---|
font-normal | 400 | متن بدنه، توضیحات |
font-medium | 500 | label، item فعال در nav |
font-semibold | 600 | card title، section header |
font-bold | 700 | page title، metric value |
قانون ساده
- متن بدنه →
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-base font-semibold">نام اینفلوئنسر</h3>
<p className="text-light text-sm mt-1">@username · ۱۲۵ هزار دنبالکننده</p>
</div>MetricCard
<div className="bg-surface-100 p-4 rounded-lg border border-default">
<p className="text-muted text-xs font-medium uppercase tracking-wide">نرخ تعامل</p>
<p className="text-foreground text-3xl font-bold mt-1">۳.۲٪</p>
<p className="text-light text-sm mt-1">نسبت به ماه گذشته</p>
</div>PageHeader
<div>
<h1 className="text-foreground text-2xl font-bold">اینفلوئنسرها</h1>
<p className="text-light text-sm mt-1">۲۴۸ اینفلوئنسر در لیست شما</p>
</div>Table
<>
{/* header */}
<th className="text-muted text-xs font-medium text-start">نام کاربری</th>
{/* cell اصلی */}
<td className="text-foreground text-sm">@ali.ahmadi</td>
{/* cell ثانویه */}
<td className="text-light text-sm">۴۵٬۲۰۰</td>
</>Alert / Toast
<div>
<p className="text-foreground text-sm font-medium">تغییرات ذخیره شد</p>
<p className="text-light text-xs mt-0.5">کمپین «تابستان ۱۴۰۳» بهروزرسانی شد</p>
</div>راهنمای فارسی
فاصله خط (line-height)
فارسی به فاصله خط بیشتری نسبت به انگلیسی نیاز دارد — حروف کشیدهتر و نقطهها بیشتر هستند:
// برای متن بدنه — leading-relaxed (1.625)
<p className="text-base leading-relaxed">متن طولانی فارسی...</p>
// برای عناوین — leading-snug (1.375) کافی است
<h2 className="text-2xl font-bold leading-snug">عنوان</h2>
// پیشفرض Tailwind (leading-normal = 1.5) برای فارسی کمی تنگ استفاصله بین حروف (letter-spacing)
در فارسی، letter-spacing مثبت خوانایی را کاهش میدهد:
// درست
<h1 className="tracking-normal">عنوان فارسی</h1>
// نادرست — حروف از هم فاصله میگیرند و زشت میشود
<h1 className="tracking-widest">عنوان فارسی</h1>شکستن خط
/* برای جلوگیری از overflow در متن فارسی */
word-break: normal;
overflow-wrap: break-word;بهترین روشها
- از
text-mutedبرای اطلاعات کماهمیت (timestamp، متادیتا) استفاده کنید - هرگز بیش از ۳ اندازه متن در یک card نداشته باشید
- اعداد متریک مهم را با
font-boldو اندازه بزرگ نمایش دهید تا سریع خوانده شوند - در table، header با
text-xs font-medium text-mutedو cell باtext-smبهترین خوانایی را دارد