فونت فارسی برای وب؛ انتخاب، بارگذاری و تایپوگرافی

فونت، بیشتر از هر انتخاب دیگری، حس یک رابط فارسی را می‌سازد. همان صفحه با یک فونت فارسی خوب حرفه‌ای به نظر می‌رسد و با فونت پیش‌فرض سیستم، نیمه‌کاره. ولی انتخاب فونت فقط نیمی از کار است؛ نیم دیگر، بارگذاری سریع و تایپوگرافی درست است.

#چه فونتی انتخاب کنیم؟

برای رابط کاربری، فونتی می‌خواهید که:

• واقعاً فارسی طراحی شده باشد، نه فونت لاتینی که حروف عربی پیش‌فرض دارد.
• وزن‌های کافی داشته باشد، دست‌کم ۴۰۰، ۵۰۰، ۷۰۰ و ۹۰۰، یا بهتر، متغیر (variable) باشد.
• حروف لاتین هماهنگ داشته باشد تا نام‌های انگلیسی وسط متن ناجور نباشند.
• ارقام فارسی خوانا داشته باشد، به‌خصوص در اندازه‌ی کوچک.

این سایت با یکان بخ ساخته شده است. اگر لایسنس فونت تجاری ندارید، وزیرمتن انتخاب امن و باکیفیتی است.

#بارگذاری سریع

فونت فارسی معمولاً سنگین‌تر از لاتین است. چند کار که سرعت را حفظ می‌کند:

@font-face {
  font-family: "Yekan Bakh";
  src: url("/fonts/YekanBakh-VF.woff2") format("woff2");
  font-weight: 100 950;
  font-display: swap;
}

• فقط woff2. همه‌ی مرورگرهای امروز آن را می‌شناسند و از بقیه‌ی قالب‌ها سبک‌تر است.
• یک فایل متغیر به‌جای چند فایل وزن. یک درخواست به‌جای پنج درخواست.
• font-display: swap تا متن تا رسیدن فونت با فونت سیستم دیده شود، نه سفید بماند.
• پیش‌بارگذاری فونت اصلی در :

<link rel="preload" href="/fonts/YekanBakh-VF.woff2" as="font" type="font/woff2" crossorigin>

#عددهایی که جواب می‌دهند

حروف فارسی ارتفاع کمتری از لاتین دارند و دندانه و دنباله‌شان فضای عمودی بیشتری می‌خواهد:

• متن بدنه: ۱۵ تا ۱۶ پیکسل، فاصله‌ی خط ۱٫۸ تا ۲.
• تیترها: فاصله‌ی خط ۱٫۲ تا ۱٫۳۵، وزن ۸۰۰ تا ۹۰۰ برای تیترهای بزرگ.
• برچسب‌های رابط: وزن ۵۰۰ تا ۶۰۰؛ در اندازه‌ی کوچک از ۴۰۰ خواناترند.
• هیچ‌وقت letter-spacing روی متن فارسی؛ اتصال حروف می‌شکند.
• تراز کشیده نه: text-align: justify در فارسی کشیدگی یا فاصله‌ی ناجور می‌سازد.

#ارقام در جدول

در جدول‌ها، مبلغ‌ها و زمان‌سنج‌ها از font-variant-numeric: tabular-nums استفاده کنید تا رقم‌ها زیر هم تراز بمانند. برای عددهای بزرگ تیتر، ارقام عادی زیباترند.