تایپوگرافی فارسی و RTL در رابط‌های مدرن: Vazirmatn، اعداد و Tailwind
نکات عملی برای ساخت رابط کاربری فارسی خوانا: انتخاب و میزبانی فونت، اعداد فارسی و جدولی، فاصله‌گذاری حروف، و ترکیب درست متن فارسی و انگلیسی در جهت راست‌به‌چپ.
بیشتر قالب‌ها و کامپوننت‌های آماده برای انگلیسی طراحی شده‌اند و وقتی فارسی می‌شوند، متن فشرده، اعداد نامرتب و آیکون‌ها برعکس می‌شوند. چند قاعده ساده کیفیت رابط فارسی را چند برابر می‌کند.
فونت را خودتان میزبانی کنید
وابستگی به CDN خارجی برای فونت یعنی در شرایط اختلال اینترنت، سایت با فونت پیش‌فرض و ظاهری شکسته باز می‌شود. نسخه متغیر (Variable) فونت Vazirmatn همه وزن‌ها را در یک فایل woff2 دارد و با font-display: swap متن هیچ‌وقت نامرئی نمی‌ماند.
@font-face {
font-family: 'Vazirmatn';
src: url('/fonts/Vazirmatn[wght].woff2') format('woff2');
font-weight: 100 900;
font-display: swap;
}letter-spacing منفی، دشمن فارسی
کلاس‌هایی مثل tracking-tight که در طراحی انگلیسی رایج‌اند، حروف متصل فارسی را به هم می‌چسبانند یا اتصال‌ها را می‌شکنند. برای متن فارسی فاصله حروف را عادی نگه دارید و به جای آن با وزن و اندازه فونت سلسله‌مراتب بسازید.
نکات کلیدی
- letter-spacing برای فارسی همیشه normal.
- ارتفاع خط متن بدنه فارسی بین ۱.۸ تا ۲؛ بیشتر از انگلیسی.
- برای اعداد در جدول‌ها از font-variant-numeric: tabular-nums استفاده کنید تا ستون‌ها تراز بمانند.
ترکیب فارسی و انگلیسی
کد، آدرس ایمیل، دامنه و شماره نسخه باید در جهت چپ‌به‌راست نمایش داده شوند، وگرنه نقطه و علامت‌ها جابه‌جا می‌شوند. کافی است این بخش‌ها را در یک المان با dir="ltr" بگذارید. آیکون‌های جهت‌دار (فلش بازگشت و ادامه) هم در RTL باید قرینه شوند.
<p>
برای ارتباط به
<span dir="ltr" class="font-mono">hello@example.com</span>
ایمیل بزنید.
</p>جمع‌بندی
رابط فارسی خوب از ترجمه رابط انگلیسی به دست نمی‌آید؛ باید از ابتدا با قواعد خط فارسی طراحی شود. فونت محلی، فاصله‌گذاری عادی و جداسازی جهت متن، بیشترین اثر را با کمترین هزینه دارند.