فونتهای متغیر؛ یک فایل، بینهایت حالت
فرانتاندClaude Opus 4.8خلاصهٔ کاملتر
این راهنمای WE AND THE COLOR توضیح میده که فونتهای متغیر (variable fonts) دیگه یه چیزِ نوظهور نیستن و دارن به استانداردِ حرفهای تو طراحیِ تایپ، عملکردِ وب و تایپوگرافیِ برند تبدیل میشن. ایدهٔ اصلی اینه که یه فایلِ OpenType بهجای فایلهای جدا برای Light و Regular و Bold، یه بازهٔ پیوسته از همهٔ حالتها رو نگه میداره — و هر مقدارِ بینشون رو هم.
هستهٔ این فناوری مفهومِ «محورِ تغییر» (axis) ـه؛ هر محور یه کمینه، یه مقدارِ پیشفرض و یه بیشینه داره و موتورِ رندر بینشون رو نرم درونیابی میکنه، طوری که میتونی وزن رو مثلاً روی ۴۳۷ تنظیم کنی. مشخصاتِ OpenType پنج محورِ استاندارد تعریف کرده: وزن (wght)، عرض (wdth)، ایتالیک (ital)، شیب (slnt) و اندازهٔ نوری (opsz). فراتر از اینها، طراحها میتونن محورهای سفارشیِ خودشون رو هم بسازن.
به گفتهٔ نویسنده، مهمترین مزیت برای وب صرفهجوییه: یه سیستمِ تایپ با شش وزن یعنی شش درخواستِ HTTP و شش فایل، ولی یه فونتِ متغیر جای همهشون رو میگیره. وقتی سه وزن یا بیشتر لازم باشه، فونتهای متغیر معمولاً حجمِ کل رو ۳۰ تا ۶۵٪ کم میکنن. پشتیبانیِ مرورگرها هم حدود ۹۲ از ۱۰۰ ـه و طبق HTTP Archive حدود ۴۰٪ سایتها دستِکم یه فونتِ متغیر دارن.
مزیتِ جالبتر خلاقانهست: تایپوگرافی میتونه به متن واکنشِ بلادرنگ نشون بده — مثلاً وزن با عرضِ صفحه عوض بشه یا محورِ اندازهٔ نوری باعث بشه حروف چه روی صفحهٔ ساعت چه روی بیلبورد درست دربیان. برای سیستمهای برند هم یه مشکلِ همیشگی رو حل میکنه: چون همهٔ حالتها از یه طرحِ مادر میآن، دیگه اون ناهماهنگیِ بینِ فایلهای جدا پیش نمیآد.
برای استفاده تو CSS، محورهای استاندارد به خاصیتهای سطحبالا نگاشت میشن — font-weight برای وزن، font-stretch برای عرض و font-style برای ایتالیک و شیب — و مرورگر خودش مدیریتشون میکنه. برای محورهای سفارشی باید از font-variation-settings با تگِ چهارحرفی استفاده کرد. چون مقدارِ این محورها عددیه، میشه با ترنزیشن و انیمیشنِ CSS هم نرم بینشون حرکت داد، و برای وب بهتره فونت به فرمتِ WOFF2 فشرده بشه.
نویسنده برای نمونه به Helvetica Now Variable مونوتایپ اشاره میکنه که تو یه فایل بیش از ۱.۲ میلیون حالتِ مجزای هلوتیکا داره، و به Inter که از اول بهصورتِ متغیر طراحی شده و سورسش روی گیتهاب بازه. به نظرِ نویسنده، محورهای سفارشی کمکشفشدهترین قلمروی خلاقانهٔ طراحیِ تایپ امروزن؛ مثلاً محورِ GRAD که وزنِ ظاهری رو بدونِ تغییرِ عرضِ حروف عوض میکنه و برای حالتِ تاریک بدونِ بههمریختنِ چیدمان بهدرد میخوره.
نکات کلیدی:
- فونتِ متغیر یه فایلِ OpenType ـه که بازهٔ پیوستهای از وزن، عرض و... رو نگه میداره
- پنج محورِ استاندارد: wght، wdth، ital، slnt، opsz + محورهای سفارشی
- صرفهجوییِ ۳۰ تا ۶۵٪ تو حجم وقتی سه وزن یا بیشتر لازم باشه
- در CSS: font-weight/font-stretch/font-style برای محورهای استاندارد و font-variation-settings برای سفارشی
- پشتیبانیِ مرورگر حدود ۹۲٪ و استفاده تو نزدیکِ ۴۰٪ سایتها
