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

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

Dave Crossland
Dave Crossland
X GitHub
Mustafa Kurtuldu
Roel Nieskens
Thomas Steiner

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

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

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

परिचय

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

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

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

Roboto फ़ैमिली के अलग-अलग स्टाइल की सूची और सैंपल कॉम्पोज़िशन.
बाईं ओर: Roboto टाइपफ़ेस फ़ैमिली का एक सैंपल. दाईं ओर: फ़ैमिली में मौजूद नाम वाले स्टाइल.

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

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

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

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

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

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

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

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

अलग-अलग वेट में दिखाया गया अक्षर 'A'.
Roboto टाइपफ़ेस के लिए, वेट ऐक्सिस की इलस्ट्रेट की गई जानकारी.

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

Roboto Flex, चौड़ाई और वज़न के अलग-अलग कॉम्बिनेशन में

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

इटैलिक

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

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

टाइपफ़ेस Amstelvar के लिए वेट ऐक्सिस का उदाहरण.
Amstelvar के "n" कॉन्टूर को इटैलिक (12 पॉइंट, रेगुलर वेट, सामान्य चौड़ाई) और रोमन में दिखाया गया है. इमेज, फ़ॉन्ट ब्यूरो के टाइप डिज़ाइनर और टाइपोग्राफर, डेविड बर्लो की दी हुई है.

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

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

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

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

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

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

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

ऐक्सिस के नाम और सीएसएस वैल्यू
वज़न wght
चौड़ाई wdth
स्लांट slnt
ऑप्टिकल साइज़ opsz
इटैलिक ital

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

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

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

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

मैंडी माइकल की ओर से घास का उदाहरण
CodePen पर यह उदाहरण देखें.

कला को दिखाने का यह शानदार उदाहरण, मैंडी माइकल के टाइपफ़ेस Decovar के बारे में जानकारी देता है.

ऐनिमेशन

टाइपफ़ेस Zycon, जिसे ऐनिमेशन के लिए डिज़ाइन किया गया है. इसे Font Bureau के टाइप डिज़ाइनर और टाइपोग्राफर, डेविड बर्लो ने डिज़ाइन किया है.

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

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

Anicon के कलर आइकॉन फ़ॉन्ट से, कर्सर घुमाने पर दिखने वाले ऐनिमेशन के कुछ उदाहरण

Finesse

Amstelvar, XTRA के छोटे-छोटे हिस्सों का इस्तेमाल, अलग-अलग दिशाओं में करता है, ताकि शब्दों की चौड़ाई एक जैसी हो

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 का इस्तेमाल किया जा रहा है, तो इन सभी चीज़ों का ध्यान रखा जाएगा. सीएसएस में सही सोर्स फ़ॉर्मैट और रेंज के साथ-साथ, Google Fonts वैरिएबल फ़ॉन्ट के काम न करने पर स्टैटिक फ़ॉलबैक फ़ॉन्ट भी भेजेगा.

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

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

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

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

.super-heavy {
  font-weight: 1000;
}
Roboto Flex के वेट ऐक्सिस को कम से ज़्यादा में बदला जा रहा है.

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

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

.super-wide {
  font-stretch: 151%;
}
Roboto Flex के चौड़ाई अक्ष को, सबसे कम से सबसे ज़्यादा में बदला जा रहा है.

इटैलिक और ऑब्लिक का इस्तेमाल करना

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;
}
Roboto Flex के स्लैंट ऐक्सिस को कम से कम से ज़्यादा से ज़्यादा में बदला जा रहा है.

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

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

अक्षर 'a' को अलग-अलग ऑप्टिकल साइज़ में दिखाया गया है.
Roboto Flex में 'a' अक्षर को अलग-अलग पिक्सल साइज़ में दिखाया गया है. इसके बाद, सभी अक्षरों को एक ही साइज़ में स्केल किया गया है. इससे डिज़ाइन में अंतर दिखता है. Codepen पर इसे खुद आज़माएं

इस ऐक्सिस के लिए, एक नई सीएसएस प्रॉपर्टी जोड़ी गई है: 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) है. ग्रेड ऐक्सिस दिलचस्प है, क्योंकि यह चौड़ाई में बदलाव किए बिना फ़ॉन्ट के वेट में बदलाव करता है. इसलिए, लाइन ब्रेक में बदलाव नहीं होता. ग्रेड ऐक्सिस में बदलाव करके, आपको वज़न ऐक्सिस में बदलाव करने की ज़रूरत नहीं पड़ती. इससे पूरी चौड़ाई पर असर पड़ता है. इसके बाद, चौड़ाई ऐक्सिस में बदलाव करने से पूरे वज़न पर असर पड़ता है.

Roboto Flex के ग्रेड ऐक्सिस को कम से कम से ज़्यादा में बदला जा रहा है.

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 की भी ज़रूरत होगी.

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

अगर 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 वज़न के लिए वगैरह.

धन्यवाद

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