یک فونت ممکن است در پوستر زیبا باشد، اما همان فونت در متن طولانی یا دکمه کوچک خسته‌کننده شود. در فارسی، این تفاوت فقط به شکل کلی حروف مربوط نیست؛ اتصال‌ها، نقطه‌ها، فاصله واژه‌ها، ارتفاع سطر و کنار هم قرار گرفتن عدد و متن هم روی خواندن اثر دارند. برای همین، انتخاب فونت با دیدن یک تیتر خوش‌ظاهر تمام نمی‌شود.
تایپوگرافی فارسی یعنی متن را طوری سازمان بدهیم که خواننده مسیرش را پیدا کند: عنوان را تشخیص دهد، بدنه را راحت دنبال کند و اطلاعات مهم را بدون حدس‌زدن بخواند. فونت بخشی از این کار است، اما اندازه، وزن، طول سطر، رنگ، جهت متن و کیفیت خود نوشته هم در نتیجه سهم دارند. این راهنما برای تصمیم‌گیری در طراحی وب، رابط کاربری و محتوای بصری نوشته شده است.
از کاربرد شروع کنید، نه از فهرست بهترین فونت‌ها
قبل از انتخاب خانواده فونت، مشخص کنید متن کجا دیده می‌شود. یک مجله آنلاین به بدنه‌ای نیاز دارد که چند دقیقه خواندن را تحمل کند. داشبورد باید عدد، عنوان ستون و وضعیت‌ها را در فضای محدود روشن نشان دهد. صفحه معرفی یک برند هم ممکن است به تیتر متمایزتری نیاز داشته باشد. یک خانواده می‌تواند چند نقش را پوشش دهد، اما این قابلیت را باید با نمونه واقعی بررسی کرد.
برای مقایسه، یک مجموعه متن مشترک بسازید: عنوان کوتاه، عنوان بلند، دو پاراگراف، دکمه، قیمت، تاریخ و جمله‌ای با اصطلاح انگلیسی. همه گزینه‌ها را با این مجموعه ببینید. مقایسه دو فونت با دو متن و دو اندازه متفاوت، معمولاً بیشتر سلیقه بصری را نشان می‌دهد تا کیفیت کاربردی آن‌ها. اندازه اسمی یکسان هم الزاماً اندازه دیداری یکسان نمی‌سازد.
مثلاً برای یک مجله طراحی، جمله «راهنمای انتخاب فونت برای رابط کاربری» را در تیتر بگذارید و بدنه را با متن واقعی مقاله بسازید. برای یک پنل مالی، قیمت، درصد، عدد منفی و نام طولانی یک مشتری را اضافه کنید. اگر فونت در این نمونه‌ها خوب کار نکرد، زیبایی آن در صفحه معرفی خودش دلیل کافی برای انتخاب نیست.
در حروف فارسی چه چیزهایی را ببینیم؟
فارسی خطی پیوسته دارد و شکل بسیاری از حروف به جایگاهشان در واژه وابسته است. بررسی یک حرف تنها، کیفیت آن خانواده را در کلمه نشان نمی‌دهد. واژه‌هایی با ترکیب‌های مختلف اتصال و نقطه انتخاب کنید؛ مثل «پژوهش»، «ثبت‌نام»، «می‌نویسیم» و «برنامه‌ریزی». در اندازه کوچک ببینید نقطه‌ها، دندانه‌ها و فضای داخلی حروف هنوز قابل تشخیص هستند یا نه.
ریتم متن نیز مهم است. بعضی خانواده‌ها در یک جمله کوتاه جذاب‌اند، اما در چند سطر تراکم زیادی پیدا می‌کنند. وزن خیلی سبک می‌تواند روی نمایشگر و زمینه کم‌کنتراست محو شود. وزن خیلی سنگین هم ممکن است فضای داخلی حروف را ببندد. انتخاب وزن بدنه را با متن کامل انجام دهید، نه با کلمه‌ای که برای معرفی فونت طراحی شده است.
کشیده را برای پرکردن فاصله به‌صورت دستی به هر واژه اضافه نکنید. استفاده نمایشی از کشیده در یک پوستر با تنظیم عمومی متن مقاله فرق دارد. اگر محصول برای چینش حرفه‌ای متن از قابلیت‌های اختصاصی استفاده می‌کند، رفتار آن را جدا بررسی کنید. کشیده‌های تصادفی برای هم‌اندازه‌کردن سطرها می‌توانند ریتم و خوانایی را خراب کنند.
چند نام آشنا، بدون رتبه‌بندی بی‌معیار
وزیرمتن یا Vazirmatn یک خانواده فارسی و عربی است که می‌توانید فایل‌ها، نمونه‌ها و مجوز آن را در مخزن رسمی پروژه بررسی کنید. این گزینه را می‌توان وارد مقایسه برای متن و رابط کرد، اما حضورش در یک فهرست به معنی بهترین‌بودن برای همه برندها و همه اندازه‌ها نیست. نسخه‌ای را که واقعاً در پروژه استفاده می‌کنید با همان نمونه‌ها ببینید.
ایران‌سنس، شبنم و صمیم هم نام‌هایی هستند که در انتخاب فونت فارسی با آن‌ها روبه‌رو می‌شوید. برای هرکدام، منبع اصلی، فایل معتبر، وزن‌های موجود و شرایط استفاده همان نسخه را بررسی کنید. نام خانواده به‌تنهایی درباره مجوز وب، استفاده تجاری یا اجازه توزیع فایل تصمیم نمی‌گیرد. فونت را از بسته‌های ناشناس صرفاً به‌دلیل رایگان‌بودن دانلود نکنید.
برای تیتر نمایشی می‌توان گزینه‌ای با شخصیت متفاوت انتخاب کرد، اما بدنه را قربانی هماهنگی ظاهری نکنید. اگر ترکیب دو خانواده را امتحان می‌کنید، نسبت اندازه دیداری، تراکم و وزنشان را بسنجید. گاهی یک خانواده با دو وزن مناسب، هماهنگی بیشتری از ترکیب دو فونت پرشخصیت می‌سازد. تعداد خانواده‌ها را بر اساس نقش واقعی متن تعیین کنید.
سلسله‌مراتب را با نقش متن بسازید
عنوان اصلی، عنوان بخش، متن بدنه و توضیح تصویر باید از هم قابل تشخیص باشند. این تفاوت می‌تواند از اندازه، وزن و فاصله پیرامون متن بیاید؛ لازم نیست هر سطح رنگ و فونت جدا داشته باشد. اگر یک عنوان با بدنه اشتباه گرفته می‌شود، ابتدا جایگاه و فاصله آن را اصلاح کنید، بعد سراغ بزرگ‌ترکردن یا پررنگ‌ترکردن بروید.
برای طراحی سیستم، نقش‌هایی مانند عنوان صفحه، عنوان بخش، متن اصلی و متن کمکی تعریف کنید. سپس اندازه، وزن و Line Height هر نقش را ثبت کنید. ارتباط این نقش‌ها با Design Tokens کمک می‌کند تغییر تایپوگرافی در طراحی و توسعه یکسان اعمال شود. بهتر است تیم به نقش «متن کمکی» ارجاع بدهد تا هر بار یک اندازه دلخواه انتخاب کند.
تیترهای طولانی را از ابتدا در نمونه‌ها بگذارید. عنوانی که در دسکتاپ یک سطر است، در موبایل ممکن است چند سطر شود و تصویر یا دکمه را پایین ببرد. فاصله و ارتفاع سطر تیتر باید در این وضعیت هم قابل قبول باشد. اندازه‌کردن سیستم فقط با عبارت‌های دوکلمه‌ای، بسیاری از مشکلات واقعی را پنهان می‌کند.
فاصله خطوط و طول سطر نسخه ثابت ندارند
برای همه فونت‌های فارسی نمی‌توان یک Line Height ثابت تجویز کرد. ارتفاع دیداری حروف، اندازه متن، طول سطر و نوع محتوا روی انتخاب اثر دارند. فاصله کم باعث می‌شود سطرها به هم نزدیک شوند و دنبال‌کردن متن دشوار شود. فاصله بیش از حد هم ارتباط سطرهای یک پاراگراف را ضعیف می‌کند. چند مقدار نزدیک را با متن واقعی و در عرض نهایی صفحه مقایسه کنید.
طول سطر را هم با اندازه متن بسنجید. پاراگرافی که تمام عرض یک نمایشگر بزرگ را می‌گیرد، می‌تواند پیدا کردن ابتدای سطر بعدی را سخت کند. در موبایل، عرض محدود است و افزایش بی‌حساب اندازه ممکن است هر سطر را به چند واژه کاهش دهد. به‌جای یک عدد جهانی، برای مقاله، فرم و جدول نمونه جدا بسازید و عرض محتوای هرکدام را با وظیفه آن هماهنگ کنید.
فاصله میان پاراگراف‌ها و فاصله عنوان تا متن بعدی را مستقل ببینید. عنوان باید به بخشی که معرفی می‌کند نزدیک‌تر از بخش قبلی احساس شود. افزودن سطرهای خالی برای ساختن این فاصله، نگهداری محتوا را دشوار می‌کند؛ فاصله را در سبک عناصر تعریف کنید. راهنمای فضای خالی در طراحی این رابطه میان فاصله و گروه‌بندی را بیشتر توضیح می‌دهد.
Letter Spacing را از متن لاتین به فارسی تعمیم ندهید
در تیتر لاتین، تغییر فاصله حروف گاهی بخشی از سبک بصری است. در خط پیوسته فارسی، اعمال همان تصمیم می‌تواند اتصال‌ها یا ریتم واژه را نامناسب کند؛ نتیجه هم به فونت و محیط نمایش وابسته است. فاصله عمومی حروف را بدون دیدن متن فارسی تغییر ندهید. اگر قصدتان بازترشدن صفحه است، ابتدا عرض متن، اندازه، وزن و فاصله سطرها را بررسی کنید.
فاصله واژه با فاصله حروف و نیم‌فاصله یک چیز نیست. نیم‌فاصله برای ساخت نوشتاری واژه‌هایی مانند «می‌رود» و «ثبت‌نام» به کار می‌رود، نه برای تنظیم دلخواه عرض متن. یک متن با فاصله‌های ناهماهنگ حتی با فونت خوب هم آشفته دیده می‌شود. شیوه‌نامه نگارش و اصلاح محتوای ورودی، بخشی از کیفیت تایپوگرافی است.
RTL فقط راست‌چین‌کردن نیست
جهت پایه متن با تراز آن فرق دارد. راست‌چین‌کردن یک پاراگراف، به‌تنهایی ترتیب نمایش متن ترکیبی را حل نمی‌کند. در صفحه فارسی ممکن است نام محصول، URL، شماره نسخه و پرانتز کنار هم بیایند. اگر جهت این بخش‌ها روشن نباشد، علائم یا اعداد می‌توانند در جای غیرمنتظره دیده شوند. این مشکل را با جابه‌جایی دستی کلمات در محتوا حل نکنید.
راهنمای W3C برای متن دوجهته توصیه می‌کند عبارت با جهت متفاوت را در محدوده مناسب قرار دهید و جهتش را مشخص کنید. برای عبارت معلوم انگلیسی، جهت LTR مناسب است؛ برای داده‌ای که جهت آن از قبل معلوم نیست، الگوهایی مانند dir="auto" یا bdi قابل استفاده‌اند. زبان و جهت متن را نیز یکی ندانید: lang درباره زبان است و dir درباره جهت.
در طراحی، نمونه‌ای مثل «راهنمای CSS Grid، نسخه ۲» را کنار ایمیل، تاریخ و قیمت ببینید. اصطلاح انگلیسی را فقط برای رفع آشفتگی ترجمه نکنید؛ مشکل چینش باید در همان لایه حل شود. آیکون‌های جهت‌دار، ترتیب ستون‌ها و جای کنترل‌ها هم باید بر اساس معنا بررسی شوند، نه اینکه همه چیز خودکار آینه شود.
عدد، نشانه‌گذاری و متن رابط را هماهنگ کنید
درباره شکل رقم‌ها برای هر کاربرد تصمیم مشخص بگیرید. بدنه فارسی، شماره تلفن قابل کپی، کد یک محصول و ورودی فنی ممکن است نیازهای متفاوت داشته باشند. مهم است کاربر بتواند مقدار را بخواند و در صورت نیاز بدون تغییر ناخواسته کپی کند. جای واحد پول، جداکننده هزارگان و علامت منفی را با داده واقعی بررسی کنید، خصوصاً در جدول‌های راست‌به‌چپ.
به نشانه‌گذاری فارسی نیز توجه کنید: ویرگول، نقطه‌ویرگول و علامت سؤال باید با متن هماهنگ باشند. فاصله‌های اضافی قبل از نشانه‌ها یا چند نوع رقم در یک ستون، نظم دیداری را کم می‌کند. اصلاح فونت نمی‌تواند چنین مشکلات محتوایی را برطرف کند. یک فهرست کوتاه از قراردادهای نگارشی، در کنار کتابخانه کامپوننت‌ها نگه دارید.
برای دکمه و Label فرم، کوتاهی نباید معنی را حذف کند. متن «ثبت» شاید در یک جریان روشن کافی باشد، اما در صفحه‌ای با چند نوع عملیات مبهم است. «ذخیره تغییرات» رفتار را دقیق‌تر می‌گوید. اندازه کوچک را هم با کاهش افراطی وزن جبران نکنید. راهنمای طراحی Tag و Label به تفاوت متن اطلاعاتی و کنترل تعاملی می‌پردازد.
در وب، فایل فونت و بارگذاری هم بخشی از طراحی‌اند
فایل‌ها و وزن‌هایی را بارگذاری کنید که واقعاً استفاده می‌شوند. اضافه‌کردن همه وزن‌ها صرفاً برای کامل‌بودن مجموعه، هزینه انتقال ایجاد می‌کند. برای وب از فایل مناسب و معتبر خانواده استفاده کنید و Fallback منطقی داشته باشید تا متن پیش از آماده‌شدن فونت اصلی هم قابل خواندن بماند. خانواده جایگزین را از نظر اندازه دیداری و عرض واژه‌ها بررسی کنید.
ویژگی font-display رفتار نمایش متن هنگام بارگذاری فونت را کنترل می‌کند. طبق مستندات MDN، مقدار swap اجازه می‌دهد متن با فونت جایگزین نمایش داده شود و بعد فونت اصلی جای آن را بگیرد. این انتخاب می‌تواند تغییر چینش ایجاد کند؛ پس «swap همیشه بهترین است» نتیجه دقیقی نیست. تصمیم را با اهمیت فونت، رفتار شبکه و تفاوت Fallback بگیرید.
مجوز را پیش از انتشار بررسی کنید. داشتن فایل روی رایانه به معنی اجازه جاسازی آن در سایت یا انتقال به مشتری نیست. اگر فونت Variable انتخاب می‌کنید، قابلیت فایل و محدوده وزن واقعی را در نسخه مورد استفاده ببینید. وزن ساختگی مرورگر نیز الزاماً جای وزن طراحی‌شده را نمی‌گیرد؛ ظاهر نهایی باید با فایل‌هایی که تحویل داده می‌شوند هماهنگ باشد.
یک نمونه واقعی برای تصمیم نهایی بسازید
برای انتخاب نهایی، یک صفحه کوچک با تیتر، متن، کارت، فرم، قیمت و پیام خطا کافی است تا تصمیم‌های اصلی را کنار هم ببینید. آن را با محتوای کوتاه و بلند، زمینه روشن و تیره و عرض موبایل بررسی کنید. بزرگ‌نمایی متن نباید اطلاعات مهم یا کنترل‌ها را پنهان کند. خوانایی تنها از روی خروجی زیبای یک صفحه دسکتاپ معلوم نمی‌شود.
در تحویل، نام و نسخه فونت، منبع فایل، مجوز، وزن‌ها، نقش‌های تایپوگرافی و قواعد عدد و متن ترکیبی را ثبت کنید. این کار باعث می‌شود توسعه‌دهنده مجبور نباشد از روی تصویر حدس بزند. انتخاب خوب زمانی ارزشش را نشان می‌دهد که در محتوای واقعی، اندازه کوچک و شرایط متفاوت همچنان قابل استفاده بماند؛ فونت مشهور به‌تنهایی چنین نتیجه‌ای را تضمین نمی‌کند.
هنوز دیدگاهی ثبت نشده
اولین نفری باشید که نظر می‌دهد!