فونت متغیر چیست، از کجا آمده، آمدنش بهر چه بود؟
فونت متغیر چیست؟
فونت متغیر (Variable Font) تکنولوژی جدیدیه که اجازه میده شکل گلیفها و ویژگیای دیگشون مثل عرض، محل اِعراب و مقادیر کرنینگ بین چندین حالت پیوسته یا گسسته داخل محدودۀ تعریف شده توسط چند فونت جداگانه اصلی(Master) که در نهایت تبدیل به یه فونت میشن به صورت پایدار تغییر کنه.
این تغییرات میتونه در طول یک یا چندین محور(Axis) مثل وزن، عرض، کنتراست، اندازۀ نوری، کشیدگی و … اتفاق بیفته (اسامی محورها با چهار حرف نشون داده میشه، به طور مثال wght برای وزن و wdth برای عرض، علاوه بر این اسامی انتخاب شدۀ استاندارد، محورها میتونن هر اسمی داشته باشن، ظاهراً برای تعداد محورها هم محدودیتی وجود نداره) میشه نقاطی از محور رو انتخاب و نامگذاری کرد تا بهشون دسترسی بهتری داشت(instance) حتی میشه این نقاط رو به صورت یه فونت مستقل استخراج کرد.
در واقع شکل نهایی گلیفها که قبلاً به صورت مجموعهای ثابت از گرهها و سگمنتها(خط واصل بین گرهها) تعریف میشد با اومدن این تکنولوژی میتونه تو یه محدودۀ قابل تغییر تنظیم بشه.
بهترین پشتیبانی تو مرورگرا انجام میشه(کروم، فایرفاکس و اج جدید بهترن)، بعضی از محصولات ادوبی هم از سال ۲۰۱۸ شروع کردن به پشتیبانی(اوایل خیلی مشکل داشتن تو نمایش درست عربی ولی تو نسخههای جدید بهتر شدن)
فعلاً به نظر میاد اصلیترین مشکل برای چاپ، پشتیبانی نکردن فرمت PDF باشه، البته این فرمت میتونه instance ها رو شناسایی کنه، اما احتمال داره کلاً نشه از embedded subset برای فونتای متغیر استفاده کرد(بروزرسانی:احتمال داره PDF هیچوقت از فونتهای متغیر پشتیبانی نکنه، شاید کارکردش تو سیستمهای قدیمی که اغلب برای چاپ از اونا استفاده میکنن اهمیت بیشتری داشته باشه، اما نکتۀ جالب اینه که برنامهای که PDF رو تولید میکنه میتونه در همون لحظۀ ذخیره فایل، یه instance از حالت فعلی فونت متغیر بسازه و تو فایل PDF مثل یه فونت معمولی قرار بده، درست مثل عکس انداختن!)
تو ویندوز ۱۰ فونتهای متغیر تو بخش پیشنمایش جدید شناسایی میشن (و پشتیبانی از عربی هم خوبه) اما تا این تاریخ هنوز هیچکدوم از نرمافزارای مایکروسافت از این تکنولوژی پشتیبانی نمیکنن.
از کجا آمده؟
تکنولوژی فونتهای متغیر یکی از آپدیتای اُپنتایپ نسخۀ 1.8 هست که سال 2016 بیرون اومد، البته ایدۀ طراحی فونتهای میانی بین دو وزن با درون یابی(interpolation) که یه جورایی پایۀ فونتهای متغیر هم بود مال خیلی وقت پیشه؛ قبل از multiple masters و حتی قبل از تاسیس ادوبی! که بعدها تبدیل به روش خیلی خوبی شد.
برای مثال قبل از شکل گرفتن تکنولوژی فونتهای متغیر تا همین الان برنامهای تو سیستم عامل مکینتاش وجود داشت و داره به اسم superpolator که برای استخراج حالات دیگهای از یه تایپفیس، مثل کلاسهای گسسته وزنی، عرضی و … به کار میره، این برنامه با درونیابی میتونه تو فضای تبدیل بین فونتهای اصلی(master) حرکت کنه، حالات پیوستهای از نحوه تبدیل رو نمایش بده و هر نقطه دلخواهی رو استخراج کنه، ایدۀ اصلی فونت متغیر هم همینه، حرکت پیوسته یا گسسته بین چند فونت اصلی با دسترسی به تمام نقاط تبدیل(فرمت designspace هم احتمالاً از ابداعات همین برنامست)
آمدنش بهر چه بود؟
راجع به کاربرد فونتهای متغیر میشه یه مقالۀ جداگانه نوشت، ولی به صورت خلاصه میشه به چند مورد اشاره کرد:
۱- اصلی ترین مزیت یه فونت متغیر بستهبندی چندین فونت جداگانۀ اصلی تو یه بسته با دسترسی کامل به تمام نقاط تبدیله، بنابراین شما میتونین به طور مثال توی وب هم برای متن و هم برای عناوین از یه فایل فونت استفاده کنین، این روش هم انعطاف بیشتری داره، هم حجمش از مجموع دو یا چند فایل فونت کمتره و هم تعداد فراخوانی از سرور رو کاهش میده، همچنین توی یه نرمافزار طراحی یا صفحهآرایی میتونین بهترین انتخاب رو از نقاط محورهای ارائه شده انجام بدین و در نهایت به نقاطی از محورها و به تبع اون به ترکیباتی از شکل گلیفها دسترسی پیدا کنین که با فونتهای معمولی سخت یا غیرممکنه.
۲- مزیت دیگه خود خاصیت تبدیل حالات فونت متغیره که میشه توی انیمیشن ازش استفاده کرد، این انیمیشنها توی وب هم پشتیبانی میشن بنابراین میشه به عنوان بخشی از تجربه کاربری (UX) ازشون بهره گرفت. برای مثال میشه تغییرات محور رو با کمک یکی از کتابخونههای جاوااسکریپت به وضعیت نشانگر موس ارتباط داد، رضا قبلاً اینجا این کار رو انجام داده، یه نمونه از فونت میخک هم این پایین هست:
انتظار میره پشتیبانی از فونتهای متغیر به نرمافزارایی مثل After Effects هم اضافه بشه، بنابراین به زودی میشه از خواصشون، از جمله همین قابلیت انیمیشنسازی، تو محیطهای ساخت ویدیو هم بهره گرفت.
کاربردای خلاقانهتری هم از فونتهای متغیر ساخته شده، مثلا underware با HOI تونسته نوشتن رو شبیهسازی کنه و اسم این سبک از فونتها رو گذاشته Grammato
فونتهای فارسی متغیر هم چند مدتیه که دارن ساخته و استفاده میشن، آذرمهر ، دانا ، فرهنگ، مارلیک و به تازگی انجمن، نمونهای از فونتهای متغیر تجاری هستن، همچنین فونتهای استعداد، ساحل، میخک و مرکزی تکست فونتهای آزادی هستن که نسخۀ متغیر هم دارن.(میتونین تو آزمایشگاه فونتامین اونا رو ببینین و بررسی کنین)
سلام وقتــتون بخیر
بابت ،قسمتی از وبسایتـــتون که تغییر سایز و ضخامت فونت و …سوالی داشتـــم
از چه پلاگینی استفاده کردین بزرگوار ؟
خیلی واسم جالب بود ، چون خودم طراح وبسایت هستم و خیلی به دنبال همچین امکاناتی واسه تغییر سایز فونت میگشتم ….
ممنون میشم اگر تمایل داشتید بهم بگین استاد🌹🙏🙏
سلام ، امکانش هست از روی نسخه وریبل ، یک استایل رو به دلخاه انتخاب کنیم و بعد به صورت یک فونت جداگونه ازش استخراج کنیم؟
سلام. امکانش وجود داره ولی معمولاً نتیجۀ بدون اشکالی بدست نمیاد. نرمافزار Slice رو امتحان کنین.
سلام آقای عابدی ببخشید من به یه مشکلی بر خوردم و اینه که فونت های وریبل فارسی کلا جدا جدا نوشتا میشه و نمیتونم حلش کنم در صورتی که فونت های دیگه درست کار میکنه خواهش میکنم کمکم کنید سپاس از شما
سلام به شما. از نسخۀ آخر نرمافزارها استفاده کنین.(نسخههای اولیۀ ادوبی که از فونتهای متغیر پشتیبانی میکنن حروف عربی رو جدا از هم تایپ میکنن)
سلام خسته نباشید، من فونت میخک رو میخواستم تو سایتم استفاده کنم ، وزن فونت به راحتی تغییر میکنه ولی نقطه هاشو نمیتونم تغییر بدم ، میشه بفرمایین کجای سینتکس من اشتباهه ؟
font-variation-settings: ‘wght’ ۶۰۰, ‘dots’ 2;
سلام، خیلی ممنونم. باید اینطوری واردش کنین:
font-variation-settings: 'wght' 600, 'DSTY' 2;سلام آقای عابدی. ممنون بابت توضیحات خوبتون و فونت های قشنگتون. اگه میشه توضیح بدین وریبل فونت را چجوری میسازن؟ نرم افزار خاصی داره؟ خیلی دنبالش گشتم ولی چیزی پیدا نکردم
راههای مختلفی داره، میتونین از نرمافزارهای ساخت فونت پیشرفته مثل glyphs و fontlab 7 استفاده کنین. نرمافزار fontmake هم هست که میتونه از فونتهایی که از قبل آماده شدن به همراه یه فایل designspace، نسخۀ متغیر رو بسازه. متاسفانه اینجا بیشتر از این نمیتونم توضیح بدم.
سلام، جناب عابدینی. خیلی مخلصیم 🙋🏻♂️. انشاءالله که همیشه با قدرت به توسعهٔ قلمهای دیجیتال رایانهای فارسی توی محیط رایانه ادامه بدین.
سلام عادل جان، قربانت 🙂 ممنون از محبتت 😀🌹