इस पेज का अनुवाद Cloud Translation API से किया गया है.

वैरिएबल फ़ॉन्ट पर माइग्रेट करना

1. परिचय

पिछली बार अपडेट किया गया: 05/11/22

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

आपको क्या सीखने को मिलेगा

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

ज़रूरी शर्तें

इस लैब में, हम डिज़ाइन के कुछ बुनियादी कॉन्सेप्ट पर काम करेंगे.

टाइप स्केल के बारे में जानकारी.
Figma के बारे में जानकारी.
एचटीएमएल और सीएसएस की बुनियादी जानकारी.

आपको किन चीज़ों की ज़रूरत होगी

Figma खाता
Figma designlab फ़ाइल
वेब के लिए पसंदीदा कोड एडिटर

2. अपनी प्रोफ़ाइल बनाना शुरू करें

सेटअप

शुरू करने के लिए, आपको Designlab की Figma फ़ाइल को ऐक्सेस करना होगा. लैब के लिए ज़रूरी सभी चीज़ें, Figma फ़ाइल में मौजूद हैं. फ़ाइल को डाउनलोड और इंपोर्ट किया जा सकता है या Figma कम्यूनिटी से उसका डुप्लीकेट बनाया जा सकता है.

सबसे पहले, Figma में साइन इन करें या खाता बनाएं.

Figma कम्यूनिटी से डुप्लीकेट

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

फ़ाइल का लेआउट

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

इस कोडलैब में, इन कॉन्सेप्ट और एक्सरसाइज़ के बारे में ज़्यादा जानकारी दी गई है. Material You की नई सुविधाओं के बारे में ज़्यादा जानने के लिए, कोडलैब के साथ पढ़ें.

Intro आर्टबोर्ड से शुरू होकर, आर्टबोर्ड को क्रम से लिंक करने वाले बटन होते हैं. लिंक को ऐक्सेस करने के लिए, बटन पर क्लिक करें.

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

शुरू करने से पहले, हमें यह पक्का करना होगा कि हमारे पास वैरिएबल फ़ॉन्ट है! इस फ़ाइल में Roboto Flex का इस्तेमाल किया गया है, जो पहले से ही Figma में उपलब्ध है. इसके अलावा, इसे fonts.google.com से भी डाउनलोड किया जा सकता है

3. वैरिएबल फ़ॉन्ट क्या हैं?

वैरिएबल फ़ॉन्ट, फ़ॉन्ट का एक नया और बेहतर फ़ॉर्मैट है. इससे उपयोगकर्ता, अपने टाइप और आइकॉन को कंट्रोल कर सकते हैं. Roboto Serif और Roboto Flex, वैरिएबल फ़ॉन्ट टेक्नोलॉजी के लिए बनाए गए नए टाइपफ़ेस हैं. इनमें से हर एक में कई तरह के ऐक्सिस हैं.

एस्थेटिक एक्सप्रेशन और ऐक्सिस

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

फ़ायदे

वैरिएबल फ़ॉन्ट की मदद से, एक ही फ़ॉन्ट फ़ाइल में कई स्टाइल डिलीवर की जा सकती हैं. इससे वेबसाइटें ज़्यादा बेहतर, छोटी, और तेज़ बनती हैं. साथ ही, डिज़ाइनर को ज़्यादा कंट्रोल मिलता है.

4. डिज़ाइन में वैरिएबल फ़ॉन्ट का इस्तेमाल करना

ऐक्सिस बदलना

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

वज़न से किसी अक्षर की मोटाई तय होती है. यह स्ट्रोक की मोटाई की पूरी रेंज उपलब्ध कराता है.

चौड़ाई का मतलब है कि टाइपफ़ेस के वर्णों के लिए, हॉरिज़ॉन्टल स्पेस कितना है.

स्टाइल को सीधा से तिरछा करें. टाइपोग्राफ़र इसे ‘तिरछा' स्टाइल कहते हैं. हालांकि, ऐसा बहुत कम होता है, लेकिन स्लैंट दूसरी दिशा में भी काम कर सकता है. इसे ‘बैकस्लैंट' या ‘रिवर्स ऑब्लिक' स्टाइल कहा जाता है.

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

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

Figma के बाहर वैरिएबल फ़ॉन्ट के ऐक्सिस के साथ खेलने के लिए, वैरिएबल फ़ॉन्ट का डेमो देखें.

5. स्टाइल को बेहतर बनाना

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

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

चलिए, मुख्य कॉपी के साथ टाइप स्केल को पसंद के मुताबिक बनाने की प्रोसेस शुरू करते हैं. इससे, हम साइट के बेस टाइप साइज़ को पहले सेट कर सकते हैं और फिर उसमें ऑप्टिकल तरीके से बदलाव कर सकते हैं. बड़ी टेक्स्ट फ़ील्ड के लिए डिफ़ॉल्ट साइज़ 18 पॉइंट है. इसे Roboto Flex पर सेट किया गया है. टेक्स्ट को आसानी से पढ़ने के लिए, फ़ॉन्ट के साइज़ और वेट में बदलाव किया जाता था. इसका मतलब था कि एक और फ़ॉन्ट फ़ाइल का इस्तेमाल करना. हालांकि, अब हम कुछ ऐक्सिस में बदलाव कर सकते हैं. ऑप्टिकल साइज़, ग्रेड, और वज़न में बदलाव करें.
लेबल के साथ जारी रखें. लेबल ज़्यादा काम के होते हैं और इनका इस्तेमाल बटन जैसे छोटे कॉन्टेक्स्ट में किया जाता है. ऑप्टिकल तरीके से ग्रेड अडजस्ट करें, ताकि लेबल बटन कंटेनर और चिप पर सही तरीके से दिखे.
टाइटल, हेडलाइन, और डिसप्ले का इस्तेमाल करके, अपने विज्ञापन को बेहतर बनाते रहें. इन तीनों का इस्तेमाल, कम से ज़्यादा ज़ोर देने वाले छोटे टेक्स्ट के लिए किया जाता है. जैसे, पेज के टाइटल और सेक्शन. हेडलाइन और डिसप्ले, अपने साइज़ और ज़्यादा अहमियत की वजह से ज़्यादा असरदार हो सकते हैं. यहां दिए गए सभी ऐक्सिस को आज़माएं!
टाइप चुनने के बाद, टेक्स्ट स्टाइल सेट करने के लिए चार बिंदुओं और जोड़ें (+) पर क्लिक करें. इससे, बार-बार इस्तेमाल की जा सकने वाली टाइप सेटिंग को एक जैसा रखने में मदद मिलती है.

Material Theme Builder की मदद से या M3 डिज़ाइन किट को डुप्लीकेट करके, डिफ़ॉल्ट Material टाइप स्केल को Figma स्टाइल के तौर पर जनरेट किया जा सकता है.

6. यूज़र इंटरफ़ेस (यूआई) पर लागू

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

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

7. कोड में लागू करना

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

हम इसे लागू करने के लिए, बुनियादी एचटीएमएल और सीएसएस का इस्तेमाल करेंगे, न कि MWC या किसी फ़्रेमवर्क का.

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

अपनी वेबसाइट पर कई तरह के फ़ॉन्ट इस्तेमाल करने के लिए, Google Fonts को फ़ॉन्ट डिलीवरी सेवा के तौर पर इस्तेमाल करें. इनमें वैरिएबल फ़ॉन्ट भी शामिल हैं!

fonts.google.com पर जाकर, देखें कि कौनसे वैरिएबल फ़ॉन्ट उपलब्ध हैं. फ़िल्टर करने के लिए, खोज में जाकर सिर्फ़ वैरिएबल फ़ॉन्ट दिखाएं को चुनें. वैरिएबल फ़ॉन्ट में, पेज के सबसे नीचे एक प्लेलैंड होता है. यहां फ़ैमिली में मौजूद हर ऐक्सिस के लिए स्लाइडर सेट किए जा सकते हैं.

सीएसएस की मदद से स्टाइल करना

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

इन्हें वैरिएबल फ़ॉन्ट से पहले मौजूद, सीएसएस फ़ॉन्ट की बुनियादी प्रॉपर्टी के साथ सेट किया जा सकता है. मई 2022 तक, अभी तक सभी चीज़ें काम नहीं करतीं. हालांकि, नई प्रॉपर्टी font-variation-settings का इस्तेमाल करके, सभी ऐक्सिस को भरोसेमंद तरीके से सेट किया जा सकता है.

`Axes`	`Abbreviation`	`CSS property`
`Weight`	`wght`	`font-weight`
`Width`	`wdth`	`font-stretch`
`Slant`	`slnt`	`font-style*`
`Italic`	`ital`	`font-style*`
`Optical Size`	`opsz`	`font-optical-sizing`

*फ़ॉन्ट-स्टाइल में स्लैंट (slnt) और इटैलिक (ital) का इस्तेमाल नहीं किया जा सकता.

8. Google Fonts API की मदद से इंपोर्ट करना

हमने अब तक सिर्फ़ Roboto का इस्तेमाल किया है. हालांकि, fonts.google.com पर अब हमारे लिए सभी फ़ॉन्ट उपलब्ध हैं.

हम कोडलैब के बाकी हिस्से के लिए, Roboto का ही इस्तेमाल करेंगे. साथ ही, पिछले एक्सरसाइज़ के आधार पर, नीचे दिए गए कार्ड में टाइप को पसंद के मुताबिक बनाएंगे.

कार्ड के सैंपल यूज़र इंटरफ़ेस (यूआई) वाले इस कोड को, अपनी पसंद के वेब आईडीई में कॉपी करें.

<html>
 <title>Migrating to Variable fonts</title>
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/* imports __________________ */


/* body __________________________ */
body {
 font-size: 18px;
 color: #21005D;
 background: #E8DEF8;
}
/* typography __________________________ */

h1 {   
   line-height: 0;
/* add font styles for headline */
}

h2 {
   line-height: 0;
/* add font styles for care titles */
}

p {
   margin: 0;
   line-height: 150%;
/* add font styles for body copy */
}

.label {
/* add font styles for labels */
}

/* layout __________________________ */
article {
   margin: 16px auto;
   padding: 16px 24px;
   width: 30%;
   background: #FFFFFF;
   border: 1px solid #4F8438;
   border-radius: 24px;
}
div.labels {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 12px;
}
span.label {
   margin: 8px 0;
   padding: 4px 8px;
   background: #C4EED0;
   border-radius: 8px;
}
article.care {
   padding: 8px 24px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
}
</style>
  <body>
   <article>
     <h1>philodendron</h1>
     <p>The philodendron is part of a large family of plants comprising 489 spcies. Known for their large interesting leaves, growing mainly in tropical climates. Most philodendron make for ideal houseplants, with some more rare exceptions are easy to propogate and require less attention as some fussier plant families</p>
     <div class="labels">
       <span class="label">easy care</span>
       <span class="label">tropical</span>
     </div>
   </article>

   <article class="care">
       <span class="material-icons">water</span>
       <h2>water</h2>
       <p>Water when dry</p>
   </article>

   <article class="care">
       <span class="material-icons">light</span>
       <h2>light</h2>
       <p>Bright indirect light</p>
   </article>
 </body>
 </html>

हेडलाइन, टाइटल, बॉडी, और लेबल के लिए, पिछले एक्सरसाइज़ में सेट की गई स्टाइल के स्पेसिफ़िकेशन नोट करें. इन बातों को ध्यान में रखते हुए, Roboto Flex के पेज पर जाएं. Figma में सेट की गई खास बातों के हिसाब से स्लाइडर सेट करें. इसके बाद, साइड ड्रॉअर में जोड़ने के लिए, हर स्लाइडर के लिए यह स्टाइल चुनें.
ड्रॉअर में, चुनी गई स्टाइल में जाकर, 'वेब पर इस्तेमाल करें' को ढूंढें. अपने कोड में फ़ॉन्ट जोड़ने के दो तरीके हैं: <link> या @import का इस्तेमाल करके. आपको सिर्फ़ एक विकल्प चुनना है. @import चुनें.
@import से सेमीकोलन तक कॉपी करें और उसे इंपोर्ट टिप्पणी के बाद स्टाइल टैग में चिपकाएं.
Roboto Flex ही इस्तेमाल किया जाने वाला एकमात्र फ़ॉन्ट है. इसलिए, बॉडी को फ़ॉन्ट-फ़ैमिली को कॉल करने के लिए सेट करें. इसके लिए, इंपोर्ट कोड में शामिल "फ़ैमिली तय करने के लिए सीएसएस नियम" जोड़ें.

body {
 font-family: 'Roboto Serif', sans-serif;
 font-size: 18px;
 color: #0C332A;
 background: rgb(247, 245, 245);
}

इससे चुने गए फ़ॉन्ट और स्टाइल सेट इंपोर्ट हो जाते हैं. हालांकि, ऐक्सिस रेंज का इस्तेमाल करके, अलग-अलग स्टाइल के बजाय स्टाइल की लगातार रेंज का इस्तेमाल किया जा सकता है. रेंज बनाने के लिए, दो वैल्यू को .. से जोड़ें. उदाहरण के लिए, 100..900). पक्का करें कि सिर्फ़ वे रेंज जोड़ी जा रही हों जो फ़ॉन्ट के स्लाइडर में मौजूद हैं. ऐसा न करने पर, फ़ॉन्ट ठीक से लोड नहीं होगा.

इसका इस्तेमाल, ऐनिमेशन ट्रांज़िशन को आसानी से करने और ब्राउज़र में एक्सपेरिमेंट करने के लिए किया जाता है. ऐसा इसलिए, क्योंकि यह पूरी रेंज में लोड होता है और डाउनलोड के अनुरोध को बड़ा बनाता है.

9. सीएसएस वैरिएबल फ़ॉन्ट प्रॉपर्टी

फ़ॉन्ट इंपोर्ट हो जाने के बाद, स्टाइल के लिए कुछ सीएसएस प्रॉपर्टी खींचने के लिए, Figma पर वापस जाएं और font-variation-settings सीएसएस प्रॉपर्टी देखें.

दाएं पैनल में चुनी गई हेडलाइन h1 से शुरू करके, सबसे ऊपर मौजूद जांच करें टैब को चुनें. इससे, पैनल को डेवलपर को हैंडओफ़ करने के लिए, कोड की जांच करने वाले मोड पर स्विच कर दिया जाता है. कोड, आखिरी सेक्शन है.
अगर आपने अब तक ऐसा नहीं किया है, तो फ़ॉर्मैट को ड्रॉपडाउन से सीएसएस में बदलें. अगर स्टैंडर्ड एट्रिब्यूट का इस्तेमाल किया जाता है, तो उन्हें सूची में (font-weight, font-stretch, font-style, font-optical-sizing) शामिल किया जाता है. इसके बाद, लो-लेवल font-variation-settings को शामिल किया जाता है. इसमें रजिस्टर नहीं किए गए कस्टम ऐक्सिस होते हैं. font-variation-settings का इस्तेमाल करने से पहले, स्टैंडर्ड एट्रिब्यूट का इस्तेमाल करें.

Figma, font-stretch के बजाय चौड़ाई (wdth) के लिए font-variation-settings का इस्तेमाल करता है.

हमारे h1 सिलेक्टर को स्टाइल करने के लिए, टाइप से जुड़ा यह सीएसएस कोड कॉपी करें.

h1 {    
    line-height: 0;
    font-size: 36px;
    font-weight: 125;
    font-stretch: 167%;
}

सहायता कार्ड के टाइटल का स्टाइल, h2 में कॉपी किया जा सकता है. मुख्य कॉपी के लिए भी ऐसा ही करें. इसे p में कॉपी करें. लेबल स्टाइल को .label में कॉपी किया जा सकता है

10. बधाई हो

वैरिएबल फ़ॉन्ट का इस्तेमाल करने, उन्हें अपने डिज़ाइन में इस्तेमाल करने का तरीका जानने, और उन्हें वेब के लिए लागू करने के लिए बधाई.

अगर आपका कोई सवाल है, तो Twitter पर@MaterialDesign का इस्तेमाल करके, हमसे किसी भी समय पूछें.

youtube.com/MaterialDesign पर, डिज़ाइन से जुड़ा ज़्यादा कॉन्टेंट और ट्यूटोरियल देखने के लिए हमारे साथ बने रहें