تایپوگرافی

اصل

تایپوگرافی پرتو نقش دارد، نه اندازه‌ی دلخواه: عنوان صفحه، عنوان بخش، عنوان کارت، متن، متادیتا و عدد شاخص. هر نقش یک utility و یک تصمیم است و اجزای سیستم طراحی فقط از همین نقش‌ها استفاده می‌کنند. سلسله‌مراتب از نردبان کوتاه اندازه و یک وزن یگانه برای همهٔ عنوان‌ها می‌آید، مثل سوپابیس — نه از وزنی که هر جزء برای خودش انتخاب کند.

چرا این عددها: نقش‌های سوپابیس 22 / 18 / 15 / 13 / 12 با عنوان‌های 600 است، با Inter. متن 14 پیکسلی یکان‌بخ از نظر دیداری هم‌اندازهٔ 13 پیکسل Inter است و جعبهٔ خطش 1.55em است (Inter 1.21em)؛ پس متن بدنه 14 روی خط 22 است و متادیتا یک پله زیر آن، 13. عدد شاخص 24 است، نه 30 یا 32: عدد نباید از عنوان صفحه بلندتر فریاد بزند.

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

نقش‌ها

برچسب فیلد در اجزای سیستم طراحی: برچسب FormItemLayout و FormLabel 14 / 500 روی خط 21 پیکسل (leading-normal) است. Label تنها 14 / 500 با leading-none است (جعبهٔ خط 14 پیکسل، مثل shadcn): جوهر فارسی بالا و پایین از جعبه بیرون می‌زند ولی بریده نمی‌شود. برچسبی که بالای فیلد می‌گذارید با FormItemLayout بسازید، یا به Label کلاس text-label بدهید.

ارتفاع خط هر نقش یک نسبت بی‌واحد است (مثل توکن‌های خود Tailwind، مثلاً calc(22 / 14)): خط خود نقش دقیقاً همان پیکسل جدول است، و متنی درون آن که فقط اندازهٔ خودش را عوض می‌کند (استایل درون‌خطی، CSS ماژول، text-micro، ویجت بیرونی) خطی متناسب با اندازهٔ خودش می‌گیرد، نه 22 پیکسل ثابت.

یک وزن برای همهٔ عنوان‌ها: 600

• هر h1 تا h6 در لایهٔ پایه 600 است، و نقش‌های عنوان (text-display، text-heading، text-subheading) خودشان 600 را دارند. روی عنوان کلاس وزن ننویسید.
• تأکید در متن حداکثر 500 (font-medium) است.
• عدد شاخص و امتیاز 400 است (.text-stat). عدد پررنگ نداریم. شمارنده یا عددی که درون متن تأکید دارد، مثل هر تأکید متنی، حداکثر 500 است.
• برچسب متادیتایی که به‌صورت عنوان نوشته شده (<h3 className="text-meta">) 500 می‌ماند؛ کلاس وزن یا .text-meta روی عنوان بر لایهٔ پایه غلبه می‌کند. تیتر پست (خبر یا ویدیو) در Post عنوان همان پست است و روی نقش‌های عنوان می‌آید: در چیدمان card نقش عنوان کارت (text-subheading، 14 / 600) و در details نقش عنوان بخش (text-heading، 18 / 600)؛ در row و tile یک خط متن با تأکید است (text-body font-medium، 14 / 500؛ روی پنل کاشیِ بی‌رسانه نقش برچسب text-label font-medium در همان جعبهٔ 14 / 22)، نه عنوان. نام Account هم همین قاعده را دارد. عنوان نسخه‌ها در WhatsNewPanel و ReleaseTimeline روی نقش‌های عنوان (600) است.
• هیچ چیز بالاتر از 600 نیست. قانون parto/no-heavy-font-weight همین را کنترل می‌کند: font-bold و بالاتر همه‌جا، و font-semibold روی متنی که عنوان نیست.

فقط نقش‌ها

text-xs تا text-4xl هنوز اندازه‌های Tailwind‌اند (با خط فارسی بازتر)، ولی برای نقش از نام نقش استفاده کنید. اگر جایی واقعاً اندازه‌ی دیگری لازم است:

• روی جزء سیستم طراحی (<CardTitle className="text-base">): cn() نقش را با اندازهٔ شما جایگزین می‌کند و وزن همراه نقش هم می‌رود؛ عنصر آن جزء اگر h1 تا h6 باشد، لایهٔ پایه باز هم 600 می‌دهد و چیزی لازم نیست.
• روی عنصری که عنوان نیست (<p>، <span>، <div>): بعد از جایگزینی نقش، font-semibold را خودتان بنویسید.
• در className خام (بدون cn()) هر دو کلاس اعمال می‌شوند و 600 می‌ماند.

اندازه‌ی دلخواه مثل text-[18px] ممنوع است (parto/no-offscale-text).

خود سیستم طراحی هم همین قاعده را رعایت می‌کند. در اجزای سیستم طراحی هر text-xs و text-sm به text-caption و text-body تبدیل شده است (همان جعبهٔ 12 / 18 و 14 / 22). پلهٔ پیش‌فرض اندازهٔ هر جزء همیشه یک نقش است؛ مثلاً عنوان Account در چیدمان card نقش عنوان کارت (14 / 600) و در header نقش عنوان بخش (18 / 600) را دارد. اندازهٔ خام فقط در این جاها مانده است: پله‌های غیرپیش‌فرض اندازهٔ خود یک جزء (lg و xl، و xs و md در StatDisplay، md در ErrorState)، متن پلهٔ xl نردبان کنترل‌ها (16)، متنی که با یک گرافیک یا نسبت به یک عدد اندازه می‌گیرد (حروف آواتار، مرکز حلقهٔ پیشرفت، واحد کنار عدد با 0.6em)، تیتر خود پست و اندازهٔ خواندن متن پست در نمای جزئیات (15)، و کد درون‌خطی با 0.875em. آزمون text-roles-only.test.ts هر کدام را، چه نام‌دار و چه دلخواه، با دلیلش فهرست کرده است و اندازهٔ خام تازه را رد می‌کند. کدی که از اجزای سیستم طراحی کپی می‌کنید نام نقش دارد، نه اندازه.

استثنای امتیاز بزرگ: کارت امتیاز در اندازهٔ lg (CriterionScoreCard) عددش را یک پله بالاتر، 30 / 400، نشان می‌دهد؛ در sm و md (پیش‌فرض) امتیاز همان .text-stat 24 است، هم‌اندازهٔ MetricCardValue در همان ردیف. عدد رنگی زیر 24 پیکسل با وزن 400 «متن معمولی» است و کنتراست 4.5 به 1 لازم دارد؛ رنگ‌های امتیاز (--score-*) برای پرکردن و متن بزرگ کالیبره شده‌اند، برای همین امتیاز هیچ‌وقت کوچک‌تر از 24 نیست.

نمونه بصری

موارد استفاده رایج

سرِ صفحه

<PageHeader title="اینفلوئنسرها" description="248 اینفلوئنسر در فهرست شما" />
// عنوان: text-display (22 / 600)، توضیح: text-body (14) با رنگ روشن‌تر

کارت

<Card>
  <CardHeader>
    <CardTitle>نام اینفلوئنسر</CardTitle>
  </CardHeader>
  <CardContent>
    <p className="text-lighter text-body">@username · 125 هزار دنبال‌کننده</p>
  </CardContent>
</Card>

شاخص

<MetricCard>
  <MetricCardHeader>
    <MetricCardLabel>نرخ تعامل</MetricCardLabel>
  </MetricCardHeader>
  <MetricCardContent>
    <MetricCardValue>3.2٪</MetricCardValue>
  </MetricCardContent>
</MetricCard>
// برچسب: .text-meta (13 / 500)، عدد: .text-stat (24 / 400)

جدول

سرِ ستون نقش متادیتا را دارد (13 / 500، در جدول compact 12) — پاسخ فارسی به سرِ ستون‌های mono و حروف بزرگ سوپابیس: بدون uppercase و بدون tracking. متن سلول از تراکم جدول می‌آید (14، در compact 13). اندازه‌ی دستی ننویسید.

فونت و ارقام

پرتو فقط یکان بخ Variable را به کار می‌برد (وزن 100 تا 950). فونت سفارشی اضافه نکنید.

• ارقام فارسی از فونت می‌آیند، با قابلیت ss01 و فقط برای محتوای فارسی (lang="fa")؛ صفحهٔ عربی و انگلیسی رقم لاتین دارند. در متن صفحه همیشه رقم لاتین (0–9) است: هیچ کد سیستم طراحی رقم را به فارسی یا عربی تبدیل نمی‌کند. پس کسی که عددی را از صفحه کپی می‌کند رقم لاتین می‌گیرد، و Excel، ماشین‌حساب، جستجو و صفحه‌خوان آن را عدد می‌شناسند.
• شناسه‌هایی که باید همان‌طور که تایپ شده‌اند دیده شوند (نام کاربری، IP، URL، کد) را در LatinDigits بگذارید؛ این ss01 را برای همان تکه خاموش می‌کند. کد (code، pre، kbd) خودش رقم لاتین دارد. جزئیات: فارسی‌محور بودن.

امکانات فونت

یکان بخ چند قابلیت OpenType دارد (Stylistic Set و بقیه). همه را از جدول‌های خود فونت خواندیم و یکی‌یکی رندر کردیم. نتیجه یک قاعده برای هر کدام است:

• همیشه روشن: ss01 (ارقام فارسی، زیر lang="fa") و kern (فاصله‌گذاری جفت حروف). لایهٔ پایهٔ سیستم طراحی هر دو را روشن می‌کند و شما کاری لازم ندارید. خاموش‌کردنشان فقط با دلیل: ss01 برای شناسه با LatinDigits.
• خودکار: شکل‌دهی خط فارسی (rlig، init، medi، fina، mark، mkmk) و locl را مرورگر از روی زبان روشن می‌کند. دست نزنید.
• فقط روی همان تکه: ss06 (نماد تومان و ریال)، اگر محصولی واقعاً نماد می‌خواهد، فقط روی خود واحد پول.
• هرگز: ss02، ss03، salt، ss07 و aalt، و محور DOTS جز مقدار پیش‌فرض.
• در فونت نیست: tnum و liga، dlig، calt، lnum، onum، zero، frac، case، sups، subs. روشن‌کردنشان اثری ندارد.

قبل و بعد، زنده

هر نمونه یک متن را دو بار نشان می‌دهد: «قبل» بدون قابلیت و «بعد» با آن. کد زیر هر نمونه همان چیزی است که روی آن متن اعمال شده.

زمین بازی

ارقام فارسی (ss01) و kern مثل خود سیستم طراحی از اول روشن‌اند. بقیهٔ کلیدها فقط برای دیدن‌اند و در محصول خاموش می‌مانند (جز ss06 روی خود واحد پول).

رقم هم‌عرض (tnum)

فونت قابلیت tnum ندارد و عرض رقم‌هایش متناسب است (رقم فارسی از 260 تا 700 واحد در em هزارواحدی). پس tabular-nums امروز ستون عددی را تراز نمی‌کند؛ اگر پایداری چیدمان لازم است، عرض ظرف را ثابت کنید. گلیف‌های هم‌عرض در خود فونت هست و با افزودن یک قابلیت tnum به فونت، کلاس‌های tabular-nums موجود در جدول و کارت شاخص و نمودار بدون هیچ تغییری کار می‌کنند. چون یکان بخ تجاری است، این تغییر (یا نسخهٔ تازه از سازنده) منتظر بررسی مجوز است.

چه نکنیم

• وزن روی عنوان. font-bold یا font-semibold روی <h1> لازم نیست و font-bold ممنوع است؛ نقش و لایهٔ پایه 600 را می‌دهند.
• عدد پررنگ و بزرگ. text-3xl font-bold برای شاخص؛ از .text-stat (24 / 400) استفاده کنید.
• letter-spacing روی فارسی. حروف پیوسته از هم جدا می‌شوند (parto/no-tracking-on-persian-text).
• خاموش‌کردن ss01 یا kern بی‌دلیل، یا روشن‌کردن ss02، ss03، salt، ss07. check-digit-doctrine آن را رد می‌کند؛ اگر دلیلی هست، کنار همان خط parto-font-feature-ok: <دلیل> بنویسید.
• زیر 12 پیکسل برای متن فارسی. text-micro و text-mini فقط برای شمارنده‌ها و برچسب‌های عددی یا لاتین کوچک‌اند.
• آندرلاین برای لینک. با خط پیوستهٔ فارسی تداخل دارد (parto/no-text-underline).
• بیش از سه اندازه در یک کارت. نقش‌ها کافی‌اند: عنوان کارت، متن، متادیتا.

صفحات مرتبط

• اندازه و تراکم — نردبان کنترل‌ها و متن هر پله
• فارسی‌محور بودن — دکترین ارقام
• تایپوگرافی در راهنمای برند — قلم و نقش‌های متن در ارتباطات برند
• قالب‌بندی عدد و تاریخ — کدام تابع رقم را چطور برمی‌گرداند