‏چطور فونت مناسب رابط کاربری رو انتخاب کنی؛ ۱۰ جایگزین برای Inter

نویسنده که یه طراح محصول باتجربه‌ست، می‌گه خیلی از تیم‌ها بعد از مدتی کار با فونت Inter (که این روزها همه‌جا هست) دنبال یه جایگزین می‌گردن، اما اغلب فونتی که انتخاب می‌کنن ظاهرش شبیه Inter نمی‌شه چون تراز عمودی حروفش درست نیست. به گفته‌ی نویسنده، از بین بیش از ۶۰ فونت neo-grotesk که بررسی کرده، فقط کمتر از یک‌سومشون دو ویژگی کلیدی Inter رو دارن.

معیار اول اینه که فاصله‌ی بالای حروف بزرگ تا سقف باکس فونت، با فاصله‌ی زیر خط پایه (baseline) تا کف باکس برابر باشه؛ به این می‌گن «cap-centered vertical metrics» یا تراز عمودی متقارن. وقتی این تراز درست باشه، متن روی دکمه‌ها دقیقاً وسط‌چین می‌شه و با آیکون کنارش هم‌تراز می‌مونه، و کافیه یه توکن پدینگ واحد براش تعریف کنی، نه اینکه برای هر سایز فونت جداگونه دستی تنظیمش کنی.

معیار دوم، ارتفاع حروف کوچیکه (x-height) که باید حدود ۷۰ تا ۷۵ درصد ارتفاع حروف بزرگ باشه؛ خود Inter و San Francisco اپل هر دو رو ۷۵ درصد هستن. نویسنده توضیح می‌ده اگه این عدد کمتر از ۷۰ باشه، کلمه انگار پایین‌تر از جاش نشسته به نظر می‌رسه، و اگه به ۱۰۰ درصد برسه، حروف کوچیک و بزرگ فرقی با هم ندارن و متن شکل غیرعادی پیدا می‌کنه.

یه راه‌حل تازه هم تو راهه: ویژگی CSS به اسم text-box-trim که به‌زودی می‌تونه این مشکل تراز رو حتی تو فونت‌های نامتقارن حل کنه، چون مستقیم باکس فونت رو به ارتفاع حروف بزرگ و خط پایه برش می‌زنه:

.font-with-nonequal-vertical-metrics {
  text-box: trim-both cap alphabetic;
}

نویسنده هشدار می‌ده این ویژگی هنوز تو فایرفاکس پشتیبانی نمی‌شه (پشتیبانی جهانیش حدود ۷۹ درصده)، برای همین فعلاً بهتره سراغ فونت‌هایی بری که خودشون از اول تراز درستی دارن.

در ادامه‌ی مقاله ده تا جایگزین برای Inter و San Francisco معرفی شده که همه‌شون تراز عمودی متقارن دارن، از جمله Innovator Grotesk و Universal Sans با x-height دقیقاً ۷۵ درصد، و گزینه‌های دیگه مثل Plain، SwissNow، Muoto، Aktiv Grotesk، Akkurat، Basier، CoFo Sans و Unifora که x-heightشون بین ۷۰ تا ۷۳ درصده.

نکات کلیدی:

• دو معیار مهم فونت UI: تراز عمودی متقارن (cap-centered) و x-height حدود ۷۰ تا ۷۵ درصد
• Inter و San Francisco هر دو x-height ۷۵ درصد دارن؛ این عدد استاندارد طلایی محسوب می‌شه
• ویژگی CSS جدید text-box-trim می‌تونه تراز فونت‌های نامتقارن رو اصلاح کنه ولی هنوز تو فایرفاکس کار نمی‌کنه (پشتیبانی جهانی حدود ۷۹٪)
• ۱۰ فونت جایگزین معرفی شدن: از Innovator Grotesk و Universal Sans (۷۵٪) تا CoFo Sans و Unifora (۷۰٪)