वेब पर वैरिएबल फ़ॉन्ट के बारे में जानकारी

नई फ़ॉन्ट स्पेसिफ़िकेशन, जो फ़ॉन्ट फ़ाइल के साइज़ को काफ़ी कम कर सकता है

Dave Crossland

Mustafa Kurtuldu

Roel Nieskens

Thomas Steiner

इस लेख में, हम देखेंगे कि वैरिएबल फ़ॉन्ट क्या होते हैं, इनसे क्या फ़ायदे मिलते हैं, और इन्हें अपने काम में कैसे इस्तेमाल किया जा सकता है. सबसे पहले, आइए देखते हैं कि वेब पर टाइपोग्राफ़ी कैसे काम करती है और वैरिएबल फ़ॉन्ट से क्या नया इनोवेशन आता है.

वेबसाइट का अलग-अलग ब्राउज़र पर चलना

मई 2020 से, ज़्यादातर ब्राउज़र में वैरिएबल फ़ॉन्ट काम करते हैं. क्या वैरिएबल फ़ॉन्ट इस्तेमाल किए जा सकते हैं? और फ़ॉलबैक देखें.

शुरुआती जानकारी

डेवलपर अक्सर फ़ॉन्ट और टाइपफ़ेस शब्दों का इस्तेमाल एक-दूसरे की जगह पर करते हैं. हालांकि, दोनों में कुछ अंतर है: टाइपफ़ेस एक तरह का विज़ुअल डिज़ाइन है, जो टाइपसेटिंग की कई अलग-अलग टेक्नोलॉजी में मौजूद हो सकता है. डिजिटल फ़ाइल फ़ॉर्मैट में फ़ॉन्ट का इस्तेमाल इनमें से एक है. दूसरे शब्दों में, टाइपफ़ेस वह होता है जो आपको दिखता है और फ़ॉन्ट वह होता है जिसका इस्तेमाल किया जाता है.

स्टाइल और परिवार के बीच के फ़र्क़ को ही अक्सर अनदेखा कर दिया जाता है. स्टाइल एक खास टाइपफ़ेस होता है. जैसे, बोल्ड इटैलिक. और एक फ़ैमिली, स्टाइल का पूरा सेट है.

वैरिएबल फ़ॉन्ट से पहले, हर स्टाइल को एक अलग फ़ॉन्ट फ़ाइल के तौर पर लागू किया गया था. वैरिएबल फ़ॉन्ट से, सभी स्टाइल एक ही फ़ाइल में शामिल की जा सकती हैं.

डिज़ाइनर और डेवलपर के लिए चुनौतियां

जब कोई डिज़ाइनर कोई प्रिंट प्रोजेक्ट बनाता है, तो उसे कुछ पाबंदियों का सामना करना पड़ता है. जैसे, पेज लेआउट का फ़िज़िकल साइज़, कितने रंग इस्तेमाल किए जा सकते हैं (यह इस बात पर निर्भर करता है कि प्रिंट करने के लिए किस तरह की प्रिंटिंग प्रेस का इस्तेमाल किया जाएगा) वगैरह. हालांकि, वे जितनी चाहें उतनी टाइपफ़ेस स्टाइल इस्तेमाल कर सकते हैं. इसका मतलब है कि प्रिंट मीडिया की टाइपोग्राफ़ी अक्सर बेहतर और जटिल होती है, इसलिए पढ़ने का अनुभव वाकई दिलचस्प होता है. सोचें कि पिछली बार आपको एक बेहतरीन पत्रिका ब्राउज़ करने में कब आनंद आया था.

वेब डिज़ाइनर और डेवलपर की सीमाएं प्रिंट डिज़ाइनरों से अलग होती हैं. और हमारे डिज़ाइन की बैंडविड्थ लागत एक अहम चीज़ है. बेहतर टाइपोग्राफ़िक अनुभवों के लिए यह हमारे लिए अहम रहा है, क्योंकि इस सुविधा के लिए शुल्क देना पड़ता है. पारंपरिक वेब फ़ॉन्ट में, हमारे डिज़ाइन में इस्तेमाल की जाने वाली हर स्टाइल के लिए उपयोगकर्ताओं को एक अलग फ़ॉन्ट फ़ाइल डाउनलोड करनी पड़ती है. इससे इंतज़ार का समय और पेज रेंडर होने में लगने वाला समय बढ़ जाता है. सिर्फ़ रेगुलर और बोल्ड स्टाइल और उनके इटैलिक जवाबों को शामिल करने से, 500 केबी या उससे ज़्यादा फ़ॉन्ट डेटा मिल सकता है. ऐसा, फ़ॉन्ट के रेंडर करने के तरीके, इस्तेमाल किए जाने वाले फ़ॉलबैक पैटर्न या FOIT और FOUT जैसे अनचाहे इफ़ेक्ट के बारे में जानने से पहले ही हो चुका है.

कई फ़ॉन्ट फ़ैमिली, स्टाइल की काफ़ी बड़ी रेंज उपलब्ध कराती हैं. इनमें थिन से लेकर ब्लैक वज़न, कम और ज़्यादा चौड़ाई, अलग-अलग स्टाइल की जानकारी, और छोटे या बड़े साइज़ के टेक्स्ट साइज़ के हिसाब से बनाए गए डिज़ाइन भी शामिल होते हैं. आपको हर स्टाइल (या अलग-अलग स्टाइल के कॉम्बिनेशन) के लिए, एक नई फ़ॉन्ट फ़ाइल लोड करनी होगी. इसलिए, कई वेब डेवलपर इन सुविधाओं का इस्तेमाल न करने का विकल्प चुनते हैं. इससे उनके उपयोगकर्ताओं के पढ़ने का अनुभव कम हो जाता है.

वैरिएबल फ़ॉन्ट की बनावट

वैरिएबल फ़ॉन्ट, अलग-अलग स्टाइल को एक ही फ़ाइल में पैक करके, इन समस्याओं को हल करते हैं.

यह सेंट्रल या 'डिफ़ॉल्ट' स्टाइल से शुरू करके काम करता है. आम तौर पर, रोमन डिज़ाइन वाला एक सीधा हिस्सा होता है, जिसका वज़न और चौड़ाई सामान्य टेक्स्ट के हिसाब से सबसे सही होती है. इसके बाद, इसे 'ऐक्सिस' कहा जाता है. यह एक रेंज में, अन्य स्टाइल से जुड़ी होती है. सबसे सामान्य ऐक्सिस वेट है, जो डिफ़ॉल्ट स्टाइल को बोल्ड स्टाइल से कनेक्ट कर सकता है. कोई भी स्टाइल, ऐक्सिस के साथ मौजूद हो सकती है और उसे वैरिएबल फ़ॉन्ट का 'इंस्टेंस' कहा जाता है. कुछ इंस्टेंस का नाम, फ़ॉन्ट डेवलपर ने रखा है. उदाहरण के लिए, वेट ऐक्सिस की जगह 600 को सेमीबोल्ड कहा जाता है.

वैरिएबल फ़ॉन्ट Roboto Flex के वेट ऐक्सिस के लिए, तीन स्टाइल हैं. रेगुलर स्टाइल, इसके बीच में है. ऐक्सिस के दोनों सिरों पर दो स्टाइल मौजूद हैं, एक हल्का और दूसरी भारी. इन 900 उदाहरणों में से, किसी एक को चुना जा सकता है:

फ़ॉन्ट डेवलपर, अलग-अलग ऐक्सिस का सेट ऑफ़र कर सकता है. इन्हें एक साथ मिलाया जा सकता है, क्योंकि उन सभी का डिफ़ॉल्ट स्टाइल एक ही होता है. रोबोटो की चौड़ाई वाले ऐक्सिस में तीन स्टाइल हैं: रेगुलर एक्सप्रेशन, ऐक्सिस के बीच में होता है और दो स्टाइल, संकरे और चौड़ा होते हैं. इनमें रेगुलर स्टाइल की सभी चौड़ाई दी जाती हैं. साथ ही, इन्हें वेट ऐक्सिस के साथ जोड़कर हर वज़न की सभी चौड़ाई दी जाती हैं.

इसका मतलब है कि हज़ारों स्टाइल हैं! ऐसा लगता है कि यह किताब पढ़ने में बहुत ज़्यादा नुकसान पहुंचा सकती है, लेकिन अलग-अलग तरह की स्टाइल की वजह से पढ़ने का अनुभव और बेहतर हो सकता है. और, अगर यह परफ़ॉर्मेंस पेनल्टी के बिना है, तो वेब डेवलपर जितनी चाहें उतनी स्टाइल का इस्तेमाल कर सकते हैं–यह उनके डिज़ाइन पर निर्भर करता है.

इटैलिक

वैरिएबल फ़ॉन्ट में इटैलिक को जिस तरह से हैंडल किया जाता है वह दिलचस्प है, क्योंकि इसमें दो अंतर हैं. हेल्वेट या रोबोटो जैसे टाइपफ़ेस में इंटरपोलेशन के साथ काम करने वाले कंटूर होते हैं, इसलिए उनकी रोमन और इटैलिक स्टाइल उनके बीच में इंटरपोलेट की जा सकती हैं और स्लैंट ऐक्सिस का इस्तेमाल रोमन से इटैलिक करने के लिए किया जा सकता है.

अन्य टाइपफ़ेस (जैसे कि गारामंड, बास्करविल या बोडोनी) में रोमन और इटैलिक ग्लिफ़ कंटूर हैं, जो इंटरपोलेशन के साथ काम नहीं करते. उदाहरण के लिए, आम तौर पर रोमन लोअरकेस "n" को परिभाषित करने वाले कॉन्टूर, इटैलिक लोअरकेस "n" तय करने के लिए इस्तेमाल किए गए कॉन्टूर से मेल नहीं खाते. एक कॉन्टूर को दूसरे से अलग करने के बजाय, इटैलिक ऐक्सिस, रोमन से इटैलिक कंटूर की ओर टॉगल करता है.

इटैलिक में स्विच करने के बाद, उपयोगकर्ता के लिए उपलब्ध ऐक्सिस वही होने चाहिए जो रोमन के लिए उपलब्ध हैं, ठीक वैसे ही जैसे वर्ण सेट में भी होते हैं.

ग्लिफ़ बदलने की क्षमता को अलग-अलग ग्लिफ़ के लिए भी देखा जा सकता है और वैरिएबल फ़ॉन्ट के डिज़ाइन स्पेस में कहीं भी इस्तेमाल किया जा सकता है. उदाहरण के लिए, दो वर्टिकल बार वाला डॉलर साइन डिज़ाइन बड़े पॉइंट साइज़ पर सबसे अच्छा काम करता है, लेकिन छोटे पॉइंट साइज़ पर सिर्फ़ एक बार वाला डिज़ाइन बेहतर होता है. जब ग्लिफ़ को रेंडर करने के लिए हमारे पास कम पिक्सल होते हैं, तो हो सकता है कि दो बार की डिज़ाइन को पढ़ा न जा सके. इससे निपटने के लिए, इटैलिक ऐक्सिस की तरह ही, ऑप्टिकल साइज़ ऐक्सिस के साथ दूसरे ग्लिफ़ को बदला जा सकता है. यह टाइप डिज़ाइनर तय करता है.

जवाब में, अगर कंटूर की अनुमति है, तो टाइप डिज़ाइनर ऐसे फ़ॉन्ट बना सकते हैं जो मल्टी-डाइमेंशन वाले डिज़ाइन में अलग-अलग स्टाइल के बीच इंटरपोलेट करते हैं. इससे आपको अपने टाइपोग्राफ़ी पर बारीकी से कंट्रोल मिलता है और काफ़ी हद तक फ़ायदा होता है.

ऐक्सिस की परिभाषाएं

ऐसे पांच रजिस्टर किए गए ऐक्सिस होते हैं, जो फ़ॉन्ट की जानी-पहचानी और अनुमान लगाने लायक सुविधाओं को कंट्रोल करते हैं: वज़न, चौड़ाई, ऑप्टिकल साइज़, स्लैंट, और इटैलिक. इनके अलावा, फ़ॉन्ट में पसंद के मुताबिक बनाए गए ऐक्सिस भी हो सकते हैं. ये टाइप डिज़ाइनर की पसंद के फ़ॉन्ट के किसी भी डिज़ाइन पहलू को कंट्रोल कर सकते हैं: सेरिफ़ का साइज़, स्वॉश की लंबाई, एसेंडर की ऊंचाई या i पर मौजूद डॉट का साइज़.

भले ही ऐक्सिस एक ही सुविधा को कंट्रोल कर सकते हैं, लेकिन वे अलग-अलग वैल्यू का इस्तेमाल कर सकते हैं. उदाहरण के लिए, Oswald और Hepta Salb वैरिएबल फ़ॉन्ट में सिर्फ़ एक ऐक्सिस उपलब्ध है, वज़न अलग है, लेकिन रेंज अलग हैं–Oswald की रेंज वही है जो वैरिएबल में अपग्रेड होने से पहले साल 200 से 700 के बीच थी, लेकिन हेप्टा स्लैब में हेयरलाइन का वज़न 1 है, जो 900 तक बहुत ज़्यादा है.

रजिस्टर किए गए पांच ऐक्सिस में चार वर्णों के छोटे टैग होते हैं. इनका इस्तेमाल सीएसएस में वैल्यू सेट करने के लिए किया जाता है:

फ़ॉन्ट डेवलपर यह तय करता है कि वैरिएबल फ़ॉन्ट में कौनसे ऐक्सिस उपलब्ध हैं और उनकी कौनसी वैल्यू हो सकती हैं, इसलिए यह पता लगाना ज़रूरी है कि हर फ़ॉन्ट क्या ऑफ़र करता है. फ़ॉन्ट के दस्तावेज़ों से यह जानकारी मिलनी चाहिए या Wakamai FonDue जैसे टूल का इस्तेमाल करके फ़ॉन्ट की जांच की जा सकती है.

इस्तेमाल के उदाहरण और फ़ायदे

ऐक्सिस की वैल्यू सेट करने का मतलब है, अपनी पसंद के हिसाब से कॉन्टेंट बनाना. साथ ही, टाइपोग्राफ़िक के सबसे सही तरीके लागू करें. किसी भी नई टेक्नोलॉजी के गलत इस्तेमाल का खतरा हो सकता है. साथ ही, बहुत ज़्यादा कलात्मक या एक्सप्लोरेशन वाली सेटिंग की वजह से भी असल टेक्स्ट को आसानी से पढ़ा जा सकता है. टाइटल के लिए, बेहतरीन कलात्मक डिज़ाइन बनाने के लिए अलग-अलग ऐक्सिस को एक्सप्लोर करना काफ़ी दिलचस्प होता है. हालांकि, शरीर के लिए ऐसा कॉन्टेंट कॉपी करना जिससे टेक्स्ट को पढ़ा न जा सके.

रोमांचक एक्सप्रेशन

कलात्मक अभिव्यक्ति का एक बेहतरीन उदाहरण ऊपर दिखाया गया है, मैंडी माइकल के टाइपफ़ेस डेकॉवर को एक्सप्लोर करना.

ऊपर दिए गए सैंपल के लिए, सही उदाहरण और सोर्स कोड यहां देखे जा सकते हैं.

Animation

वैरिएबल फ़ॉन्ट वाले ऐनिमेट किए गए कैरेक्टर एक्सप्लोर भी किए जा सकते हैं. ऊपर टाइपफ़ेस ज़ीकॉन के साथ इस्तेमाल किए जा रहे अलग-अलग ऐक्सिस का एक उदाहरण दिया गया है. ऐक्सिस पर आधारित ऐनिमेशन का लाइव उदाहरण देखें.

मटीरियल डिज़ाइन आइकॉन के आधार पर, एनिकॉन दुनिया का पहला ऐनिमेटेड कलर आइकॉन फ़ॉन्ट है. Anicon एक ऐसा प्रयोग है जिसमें दो आधुनिक फ़ॉन्ट टेक्नोलॉजी को एक साथ इस्तेमाल किया जाता है: वैरिएबल फ़ॉन्ट और कलर फ़ॉन्ट.

फ़ाइनैंस

Roboto Flex और Amstelvar पर "पैरामेट्रिक ऐक्सिस" का सेट मौजूद है. इन ऐक्सिस में अक्षरों को चार हिस्सों में बांटा गया है: ब्लैक या पॉज़िटिव शेप, व्हाइट या नेगेटिव शेप, और x और y डाइमेंशन. जिस तरह प्राइमरी कलर को किसी अन्य रंग से ब्लेंड करके, उसे अडजस्ट किया जा सकता है, उसी तरह इन चार पहलुओं का इस्तेमाल किसी भी अन्य ऐक्सिस को बेहतर बनाने के लिए किया जा सकता है.

Amstelvar में XTRA ऐक्सिस से, हर 1,000 व्यू के हिसाब से "सफ़ेद" वैल्यू बदली जा सकती है, जैसा कि ऊपर दिखाया गया है. XTRA के छोटे-छोटे हिस्सों का इस्तेमाल करके, शब्दों की चौड़ाई बराबर हो जाती है.

सीएसएस में वैरिएबल फ़ॉन्ट

वैरिएबल फ़ॉन्ट फ़ाइलें लोड हो रही हैं

वैरिएबल फ़ॉन्ट में @font-face का इस्तेमाल, पारंपरिक स्टैटिक वेब फ़ॉन्ट जैसा ही होता है. हालांकि, इसमें दो नई सुविधाओं को शामिल किया गया है:

@font-face {
    font-family: 'Roboto Flex';
    src: url('RobotoFlex-VF.woff2') format('woff2-variations');
    src: url('RobotoFlex-VF.woff2') format('woff2') tech('variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
}

1. सोर्स फ़ॉर्मैट: अगर ब्राउज़र वैरिएबल फ़ॉन्ट के साथ काम नहीं करता है, तो हम नहीं चाहते कि ब्राउज़र फ़ॉन्ट डाउनलोड करे. इसलिए, हम format और tech की जानकारी जोड़ते हैं: फ़्यूचर सिंटैक्स (format('woff2') tech('variations')) में एक बार, यह सुविधा अब काम नहीं करती, लेकिन ब्राउज़र सिंटैक्स (format('woff2-variations')) पर काम करती है. अगर ब्राउज़र वैरिएबल फ़ॉन्ट का इस्तेमाल करता है और आने वाले सिंटैक्स के साथ काम करता है, तो पहली घोषणा का इस्तेमाल किया जाएगा. अगर यह वैरिएबल फ़ॉन्ट और मौजूदा सिंटैक्स के साथ काम करता है, तो यह दूसरे एलान का इस्तेमाल करेगा. वे दोनों एक ही फ़ॉन्ट फ़ाइल पर ले जाते हैं.

2. स्टाइल रेंज: आप देखेंगे कि हम font-weight और font-stretch के लिए दो वैल्यू दे रहे हैं. ब्राउज़र को यह बताने के बजाय कि यह फ़ॉन्ट कौनसा खास वज़न देता है (उदाहरण के लिए, font-weight: 500;), अब हम इसे फ़ॉन्ट के साथ काम करने वाले वेट की रेंज देते हैं. Roboto Flex के लिए, वेट ऐक्सिस 100 से 1000 तक है. साथ ही, सीएसएस, ऐक्सिस रेंज को सीधे font-weight स्टाइल प्रॉपर्टी से मैप करती है. @font-face में रेंज तय करने पर, इस रेंज से बाहर की कोई भी वैल्यू "सीमित" वैल्यू पर ही सेट की जाएगी. चौड़ाई की ऐक्सिस रेंज को font-stretch प्रॉपर्टी की तरह ही मैप किया जाता है.

अगर Google Fonts API का इस्तेमाल किया जा रहा है, तो इन सभी बातों का ध्यान रखा जाएगा. सीएसएस में न सिर्फ़ सही सोर्स फ़ॉर्मैट और रेंज शामिल होंगी, बल्कि अगर वैरिएबल फ़ॉन्ट काम नहीं करते हैं, तो Google Fonts भी स्टैटिक फ़ॉलबैक फ़ॉन्ट भेजेंगे.

वज़न और विड्थों का इस्तेमाल करना

फ़िलहाल, आप सीएसएस से जिन ऐक्सिस को सेट कर सकते हैं वे font-weight के ज़रिए wght ऐक्सिस हैं और font-stretch से wdth ऐक्सिस हैं.

आम तौर पर, font-weight को कीवर्ड (light, bold) के तौर पर या 100 के चरणों में 100 से 900 के बीच की किसी संख्या वाली वैल्यू के तौर पर सेट किया जाता है. वैरिएबल फ़ॉन्ट की मदद से, फ़ॉन्ट की चौड़ाई की रेंज में कोई भी वैल्यू सेट की जा सकती है:

.kinda-light {
  font-weight: 125;
}

.super-heavy {
  font-weight: 1000;
}

इसी तरह, हम font-stretch को कीवर्ड (condensed, ultra-expanded) या प्रतिशत वैल्यू के साथ सेट कर सकते हैं:

.kinda-narrow {
  font-stretch: 33.3%;
}

.super-wide {
  font-stretch: 151%;
}

इटैलिक और तिरछियों का इस्तेमाल करना

ital ऐक्सिस ऐसे फ़ॉन्ट के लिए है जिनमें सामान्य और इटैलिक स्टाइल, दोनों होते हैं. ऐक्सिस को चालू/बंद स्विच करने के लिए बनाया गया है: वैल्यू 0 बंद है और सामान्य स्टाइल दिखाएगी. 1 वैल्यू इटैलिक करेगी. अन्य ऐक्सिस से अलग, में कोई ट्रांज़िशन नहीं होता. 0.5 की वैल्यू से आपको "हाफ़ इटैलिक" नहीं मिलेगा.

slnt ऐक्सिस, इटैलिक टेक्स्ट से इस तरह अलग है कि यह नई स्टाइल नहीं है, बल्कि इसमें सामान्य स्टाइल है. डिफ़ॉल्ट रूप से, इसकी वैल्यू 0 होती है. इसका मतलब है कि अक्षर के डिफ़ॉल्ट आकार, ऊपर की ओर बने हुए हैं. Roboto Flex का ज़्यादा से ज़्यादा स्लैंट -10 डिग्री है, इसका मतलब है कि 0 से 10 तक जाने पर अक्षर दाईं ओर मुड़ जाएंगे.

font-style प्रॉपर्टी से इन ऐक्सिस को सेट करना आसान होगा, लेकिन अप्रैल 2020 से, इसे ठीक करने का तरीका अब भी तय किया जा रहा है. फ़िलहाल, आपको इन्हें कस्टम ऐक्सिस के तौर पर मानना चाहिए और इन्हें font-variation-settings के ज़रिए सेट करना चाहिए:

i, em, .italic {
    /* Should be font-style: italic; */
    font-variation-settings: 'ital' 1;
}

.slanted {
    /* Should be font-style: oblique 10deg; */
    font-variation-settings: 'slnt' 10;
}

ऑप्टिकल साइज़ का इस्तेमाल करना

टाइपफ़ेस को बहुत छोटा (12 पिक्सल फ़ुटनोट) या बहुत बड़ा (80 पिक्सल वाली हेडलाइन) रेंडर किया जा सकता है. फ़ॉन्ट के अक्षर के आकार को बदलकर, इसके साइज़ के हिसाब से फ़ॉन्ट में होने वाले बदलावों को देखा जा सकता है. बारीकियों के बिना छोटा साइज़, बेहतर दिख सकता है जबकि बड़े साइज़ के लिए ज़्यादा बारीकियां और ज़्यादा पतले स्ट्रोक का फ़ायदा मिल सकता है.

इस ऐक्सिस के लिए, एक नई सीएसएस प्रॉपर्टी लॉन्च की गई है: font-optical-sizing. यह डिफ़ॉल्ट रूप से auto पर सेट होता है. इससे ब्राउज़र, font-size के आधार पर ऐक्सिस वैल्यू सेट करता है. इसका मतलब है कि ब्राउज़र अपने-आप सबसे सही ऑप्टिकल साइज़ चुन लेगा. हालांकि, अगर आपको इसे बंद करना है, तो font-optical-sizing को none पर सेट करें.

अगर आपको जान-बूझकर ऐसे ऑप्टिकल साइज़ की ज़रूरत है जो फ़ॉन्ट साइज़ से मेल न खाता हो, तो opsz ऐक्सिस के लिए कस्टम वैल्यू भी सेट की जा सकती है. इस सीएसएस की वजह से टेक्स्ट बड़े साइज़ में, लेकिन ऑप्टिकल साइज़ में भी दिखेगा, जैसे कि 8pt में प्रिंट किया गया हो:

.small-yet-large {
  font-size: 100px;
  font-variation-settings: 'opsz' 8;
}

कस्टम ऐक्सिस का इस्तेमाल करना

रजिस्टर किए गए ऐक्सिस से अलग, कस्टम ऐक्सिस को किसी मौजूदा सीएसएस प्रॉपर्टी के साथ मैप नहीं किया जाएगा. इसलिए, आपको उन्हें हमेशा font-variation-settings की मदद से सेट करना होगा. कस्टम ऐक्सिस के टैग हमेशा अपरकेस में होते हैं, ताकि उन्हें रजिस्टर किए गए ऐक्सिस से अलग किया जा सके.

Roboto Flex कुछ कस्टम ऐक्सिस देता है और सबसे अहम, ग्रेड (GRAD) है. ग्रेड ऐक्सिस दिलचस्प होता है, क्योंकि यह चौड़ाई बदले बिना फ़ॉन्ट का वज़न बदलता है और लाइन ब्रेक नहीं बदलता. ग्रेड ऐक्सिस से गेम खेलने पर, आपको वज़न की ऐक्सिस में बदलाव करने के लिए मजबूर होने से बचाया जा सकता है, जिससे कुल चौड़ाई पर असर पड़ता है. इसके बाद, विड्थ ऐक्सिस में बदलाव होने से, पूरे वज़न पर असर पड़ता है.

ऐसा इसलिए, क्योंकि GRAD एक कस्टम ऐक्सिस है और Roboto Flex में इसकी रेंज -200 से 150 तक होती है. हमें इस समस्या को font-variation-settings से ठीक करना होगा:

.grade-light {
    font-variation-settings: `GRAD` -200;
}

.grade-normal {
    font-variation-settings: `GRAD` 0;
}

.grade-heavy {
    font-variation-settings: `GRAD` 150;
}

Google Fonts पर वैरिएबल फ़ॉन्ट

Google Fonts ने वैरिएबल फ़ॉन्ट के साथ अपने कैटलॉग को बड़ा किया है और नियमित तौर पर नए फ़ॉन्ट जोड़े हैं. फ़िलहाल, इंटरफ़ेस में फ़ॉन्ट से सिर्फ़ एक इंस्टेंस चुना जाता है: अपनी पसंद का वैरिएशन चुनें और "यह स्टाइल चुनें" पर क्लिक करें. इसके बाद, इसे <link> एलिमेंट में जोड़ दिया जाएगा, जो Google Fonts से सीएसएस और फ़ॉन्ट फ़ेच करता है.

सभी उपलब्ध ऐक्सिस या वैल्यू की रेंज का इस्तेमाल करने के लिए, आपको Google फ़ॉन्ट एपीआई में यूआरएल को मैन्युअल रूप से कंपोज़ करना होगा. वैरिएबल फ़ॉन्ट की खास जानकारी में सभी ऐक्सिस और वैल्यू की सूची होती है.

Google वैरिएबल फ़ॉन्ट लिंक टूल से आपको पूरे वैरिएबल फ़ॉन्ट के लिए सबसे नए यूआरएल भी मिल सकते हैं.

फ़ॉन्ट-वैरिएशन-सेटिंग इनहेरिटेंस

रजिस्टर किए गए सभी ऐक्सिस जल्द ही मौजूदा सीएसएस प्रॉपर्टी के ज़रिए काम करेंगे. हालांकि, हो सकता है कि कुछ समय के लिए आपको font-variation-settings पर फ़ॉलबैक के तौर पर भरोसा करना पड़े. और अगर आपके फ़ॉन्ट में कस्टम ऐक्सिस हैं, तो आपको font-variation-settings की भी ज़रूरत होगी.

हालांकि, यह रहा font-variation-settings के बारे में कुछ जानकारी. हर उस प्रॉपर्टी को अपने-आप डिफ़ॉल्ट पर रीसेट कर दिया जाएगा जिसे आपने साफ़ तौर पर सेट नहीं किया है. पहले से सेट की गई वैल्यू इनहेरिट नहीं की जाती हैं! इसका मतलब है कि ये नतीजे उम्मीद के मुताबिक काम नहीं करेंगे:

<span class="slanted grade-light">
    I should be slanted and have a light grade
</span>

सबसे पहले ब्राउज़र, .slanted क्लास से font-variation-settings: 'slnt' 10 को लागू करेगा. इसके बाद, .grade-light क्लास के font-variation-settings: 'GRAD' -200 लागू होंगे. हालांकि, इससे slnt, डिफ़ॉल्ट रूप से 0 पर रीसेट हो जाएगा! नतीजा हल्के ग्रेड का टेक्स्ट होगा, लेकिन तिरछा नहीं होगा.

अच्छी बात यह है कि हम सीएसएस वैरिएबल का इस्तेमाल करके यह काम कर सकते हैं:

/* Set the default values */
:root {
    --slnt: 0;
    --GRAD: 0;
}

/* Change value for these elements and their children */
.slanted {
    --slnt: 10;
}

.grade-light {
    --grad: -200;
}

.grade-normal {
    --grad: 0;
}

.grade-heavy {
    --grad: 150;
}

/* Apply whatever value is kept in the CSS variables */
.slanted,
.grade-light,
.grade-normal,
.grade-heavy {
    font-variation-settings: 'slnt' var(--slnt), 'GRAD' var(--GRAD);
}

सीएसएस वैरिएबल कैस्केड किए जाएंगे. इसलिए, अगर किसी एलिमेंट (या उसके किसी पैरंट) ने slnt को 10 पर सेट किया है, तो वह वैल्यू बनाए रखेगा. भले ही, आपने GRAD को किसी और पर सेट किया हो. इस तकनीक के बारे में ज़्यादा जानने के लिए, वैरिएबल फ़ॉन्ट इनहेरिटेंस को ठीक करना देखें.

ध्यान दें कि डिज़ाइन के हिसाब से, सीएसएस वैरिएबल को ऐनिमेट करने से काम नहीं होता. इसलिए, यह ऐसा कुछ काम नहीं करता:

@keyframes width-animation {
   from { --wdth: 25; }
   to   { --wdth: 151; }
}

ये ऐनिमेशन सीधे font-variation-settings पर होने चाहिए.

परफ़ॉर्मेंस में बढ़ोतरी

OpenType वैरिएबल फ़ॉन्ट की मदद से हम किसी टाइप फ़ैमिली के कई वैरिएंट को एक ही फ़ॉन्ट फ़ाइल में स्टोर कर सकते हैं. मोनोटाइप ने इटैलिक और रोमन, दोनों शैलियों में तीन विड्थों में आठ वेट जनरेट करने के लिए 12 इनपुट फ़ॉन्ट को मिलाकर एक प्रयोग किया. एक ही वैरिएबल फ़ॉन्ट फ़ाइल में 48 अलग-अलग फ़ॉन्ट सेव करने का मतलब है कि फ़ाइल के साइज़ में 88% की कमी हुई.

हालांकि, अगर आप Roboto regular जैसे किसी एक फ़ॉन्ट का इस्तेमाल कर रहे हैं और कुछ नहीं कर रहे हैं, तो हो सकता है कि कई ऐक्सिस वाले वैरिएबल फ़ॉन्ट पर स्विच करने से आपको फ़ॉन्ट के साइज़ में कुल बढ़ोतरी न दिखे. हमेशा की तरह, यह आपके इस्तेमाल के उदाहरण पर निर्भर करता है.

दूसरी तरफ़, सेटिंग के बीच में फ़ॉन्ट ऐनिमेट करने से परफ़ॉर्मेंस से जुड़ी समस्याएँ हो सकती हैं. हालांकि, जब ब्राउज़र में वैरिएबल फ़ॉन्ट सपोर्ट ज़्यादा हो जाता है, तब इसमें सुधार हो जाता है, लेकिन समस्या को कुछ हद तक सिर्फ़ उन फ़ॉन्ट को ऐनिमेट करके कम किया जा सकता है जो फ़िलहाल स्क्रीन पर मौजूद हैं. Dinamo का यह काम का स्निपेट, vf-animation क्लास वाले एलिमेंट में ऐनिमेशन को तब रोकता है, जब वे स्क्रीन पर नहीं दिखते:

var observer = new IntersectionObserver(function(entries, observer) {
  entries.forEach(function(entry) {
    // Pause/Play the animation
    if (entry.isIntersecting) entry.target.style.animationPlayState = "running"
    else entry.target.style.animationPlayState = "paused"
  });
});

var variableTexts = document.querySelectorAll(".vf-animation");
variableTexts.forEach(function(el) { observer.observe(el); });

अगर आपका फ़ॉन्ट उपयोगकर्ता इंटरैक्शन पर प्रतिक्रिया देता है, तो इनपुट इवेंट को थ्रॉटल या अपशब्द करने का अच्छा आइडिया है. यह ब्राउज़र को वैरिएबल फ़ॉन्ट के ऐसे इंस्टेंस रेंडर करने से रोकेगा जो पिछले इंस्टेंस से बहुत कम बदले गए हैं. इससे मानवीय आंख को अंतर नहीं दिखेगा.

अगर Google Fonts का इस्तेमाल किया जा रहा है, तो बेहतर होगा कि आप उस डोमेन को https://fonts.gstatic.com से प्रीकनेक्ट करें, जिस पर Google के फ़ॉन्ट होस्ट किए जाते हैं. इससे ब्राउज़र को पहले से पता चल जाएगा कि सीएसएस में फ़ॉन्ट कहां से मिलेंगे:

<link rel="preconnect" href="https://fonts.gstatic.com" />

यह सलाह दूसरे सीडीएन के लिए भी काम करती है: जितनी जल्दी ब्राउज़र को नेटवर्क कनेक्शन सेट अप करने की अनुमति दी जाएगी, उतनी जल्दी आपके फ़ॉन्ट डाउनलोड हो सकेंगे.

सबसे तेज़ Google फ़ॉन्ट में, Google Fonts लोड करने से जुड़ी और सलाह पाएं.

फ़ॉलबैक और ब्राउज़र सहायता

सभी मॉडर्न ब्राउज़र वैरिएबल फ़ॉन्ट के साथ काम करते हैं. अगर आपको पुराने ब्राउज़र पर काम करना है, तो अपनी साइट को स्टैटिक फ़ॉन्ट के साथ बनाया जा सकता है. साथ ही, प्रोग्रेसिव एन्हैंसमेंट के तौर पर वैरिएबल फ़ॉन्ट का इस्तेमाल किया जा सकता है:

/* Set up Roboto for old browsers, only regular + bold */
@supports not (font-variation-settings: normal) {
  @font-face {
    font-family: Roboto;
    src: url('Roboto-Regular.woff2');
    font-weight: normal;
  }

  @font-face {
    font-family: Roboto;
    src: url('Roboto-Bold.woff2');
    font-weight: bold;
  }

  body {
    font-family: Roboto;
  }

  .super-bold {
    font-weight: bold;
  }
}

/* Set up Roboto for modern browsers, all weights */
@supports (font-variation-settings: normal) {
  @font-face {
    font-family: 'Roboto';
    src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
         url('RobotoFlex-VF.woff2') format('woff2-variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
  }

  .super-bold {
    font-weight: 1000;
  }
}

पुराने ब्राउज़र के लिए, .super-bold क्लास वाला टेक्स्ट सामान्य बोल्ड में रेंडर किया जाएगा, क्योंकि हमारे पास सिर्फ़ यही बोल्ड फ़ॉन्ट उपलब्ध है. जब वैरिएबल फ़ॉन्ट काम करते हैं, तो हम असल में 1,000 के सबसे ज़्यादा वज़न का इस्तेमाल कर सकते हैं.

@supports नियम Internet Explorer पर काम नहीं करता, इसलिए यह ब्राउज़र कोई स्टाइल नहीं दिखाएगा. अगर यह समस्या है, तो आपके पास किसी पुराने ब्राउज़र को टारगेट करने के लिए, किसी भी oldschool हैक का इस्तेमाल करने का विकल्प है.

अगर Google Fonts API का इस्तेमाल किया जा रहा है, तो यह आपकी वेबसाइट पर आने वाले लोगों के ब्राउज़र के लिए सही फ़ॉन्ट लोड करेगा. मान लें कि आपने Oswald फ़ॉन्ट का अनुरोध 200 से 700 तक की रेंज में किया है, जैसे:

<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">

वैरिएबल फ़ॉन्ट को हैंडल कर सकने वाले मॉडर्न ब्राउज़र को वैरिएबल फ़ॉन्ट मिलेगा और इनमें 200 से 700 के बीच की हर मोटाई उपलब्ध होगी. पुराने ब्राउज़र में हर वज़न के हिसाब से, अलग-अलग स्टैटिक फ़ॉन्ट मिलते हैं. इस मामले में, इसका मतलब है कि वे छह फ़ॉन्ट फ़ाइलें डाउनलोड करेंगे: एक फ़ाइल का वज़न 200 है, दूसरा वज़न 300 के लिए, और इसी तरह जारी रखना है.

धन्यवाद

यह लेख शायद इन लोगों की मदद से ही बन पाया है:

• मुस्तफ़ा कुर्तुल्दू, Google में UX डिज़ाइनर और डिज़ाइन एडवोकेट
• रोल निस्केंस, Kabisa में UX डिज़ाइनर/डेवलपर और टाइपोग्राफ़ी एक्सपर्ट हैं
• डेव क्रॉसलैंड, प्रोग्राम मैनेजर, Google Fonts
• डेविड बर्लो, फ़ॉन्ट ब्यूरो में टाइप डिज़ाइनर और टाइपोग्राफ़र
• लॉरेंस पेनी, ऐक्सिस-prxi.org की डेवलपर
• मैंडी माइकल, variablefonts.dev के डेवलपर

Unsplash पर ब्रूनो मार्टिन्स की हीरो इमेज.