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

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

Dave Crossland

Mustafa Kurtuldu

Roel Nieskens

Thomas Steiner

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

ब्राउज़र के साथ काम करना

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

परिचय

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

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

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

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

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

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

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

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

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

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

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

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

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

इटैलिक

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

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

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

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

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

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

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

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

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

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

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

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

दिलचस्प एक्सप्रेशन

ऊपर एक कलाकृति का उदाहरण दिया गया है. इसमें मैंडी माइकल ने टाइपफ़ेस Decovar का इस्तेमाल किया है.

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

ऐनिमेशन

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

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

फ़ाइनेस

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

Amstelvar में XTRA ऐक्सिस की मदद से, हर 1,000 में "सफ़ेद" वैल्यू में बदलाव किया जा सकता है, जैसा कि ऊपर दिखाया गया है. XTRA का इस्तेमाल करके, शब्दों की चौड़ाई को बराबर किया जा सकता है. इसके लिए, 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 से 1,000 तक होती है. साथ ही, सीएसएस ऐक्सिस रेंज को सीधे font-weight स्टाइल प्रॉपर्टी पर मैप करती है. @font-face में रेंज तय करने पर, इस रेंज से बाहर की कोई भी वैल्यू, सबसे पास की मान्य वैल्यू पर "कैप" कर दी जाएगी. चौड़ाई के अक्ष की रेंज को font-stretch प्रॉपर्टी के साथ उसी तरह से मैप किया जाता है.

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

वेट और चौड़ाई का इस्तेमाल करना

फ़िलहाल, सीएसएस से wght ऐक्सिस को font-weight और wdth ऐक्सिस को font-stretch की मदद से सेट किया जा सकता है.

आम तौर पर, आपको font-weight को 100 के चरणों में, कीवर्ड (light, bold) या 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 Fonts API के यूआरएल को मैन्युअल रूप से लिखना होगा. वैरिएबल फ़ॉन्ट की खास जानकारी में सभी ऐक्सिस और वैल्यू की सूची होती है.

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 वैरिएबल फ़ॉन्ट की मदद से, किसी टाइप फ़ैमिली के कई वैरिएशन को एक फ़ॉन्ट फ़ाइल में सेव किया जा सकता है. Monotype ने 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 से पहले से कनेक्ट करना एक अच्छा विचार है. https://fonts.gstatic.com वह डोमेन है जहां Google के फ़ॉन्ट होस्ट किए जाते हैं. इससे यह पक्का किया जा सकेगा कि सीएसएस में फ़ॉन्ट मिलते समय, ब्राउज़र को यह पहले ही पता चल जाएगा कि फ़ॉन्ट कहां से मिलेंगे:

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

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

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

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

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

/* 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 पर काम नहीं करता. इसलिए, यह ब्राउज़र कोई स्टाइल नहीं दिखाएगा. अगर यह समस्या है, तो काम के पुराने ब्राउज़र को टारगेट करने के लिए, किसी भी पुराने हैक का इस्तेमाल किया जा सकता है.

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

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

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

धन्यवाद

यह लेख सिर्फ़ इन लोगों की मदद से लिखा जा सका:

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

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