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

1. परिचय

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

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

आप इन चीज़ों के बारे में जानेंगे

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

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

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

• स्केल टाइप की जानकारी.
• फ़िग्मा का ज्ञान.
• एचटीएमएल और सीएसएस की बुनियादी जानकारी.

आपको इनकी ज़रूरत होगी

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

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

सेटअप

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

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

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

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

फ़ाइल लेआउट

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

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

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

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

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

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

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

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

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

फ़ायदे

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

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

ऐक्सिस बदलना

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

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

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

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

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

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

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

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

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

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

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

मटीरियल थीम बिल्डर का इस्तेमाल करके, डिफ़ॉल्ट मटीरियल टाइप स्केल को Figma स्टाइल के तौर पर जनरेट किया जा सकता है. इसके अलावा, M3 डिज़ाइन किट की कॉपी बनाकर भी इस्तेमाल किया जा सकता है.

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

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

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

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

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

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

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

*फ़ॉन्ट-स्टाइल में स्लैंट (स्लैंट) और इटैलिक (इटैलिक) भरोसेमंद नहीं हैं.

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

हम सिर्फ़ Roboto का इस्तेमाल कर रहे हैं, लेकिन हम Font.google.com पर जो फ़ॉन्ट उपलब्ध हैं उन सभी को देखते हैं.

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

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

<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>

2. पिछली बार हेडलाइन, टाइटल, मुख्य हिस्से, और लेबल के लिए, स्टाइल से जुड़ी बातों को ध्यान में रखें. उन्हें ध्यान में रखते हुए, Roboto Flex के पेज पर जाएं. Figma में सेट की गई खास जानकारी के हिसाब से स्लाइडर सेट करें. इसके बाद, साइड पैनल में जोड़ने के लिए यह स्टाइल चुनें.
3. ड्रॉर के अंदर, चुनी गई शैलियों के नीचे, 'वेब पर इस्तेमाल करें' खोजें. अपने कोड में फ़ॉन्ट जोड़ने के दो तरीके हैं: <link> या @Import पर जाएं. आपको सिर्फ़ एक ट्रैकिंग कोड की ज़रूरत है, आइए @Import को चुनें.
4. @Import से सेमीकोलन में कॉपी करें और इंपोर्ट टिप्पणी के बाद उसे स्टाइल टैग में चिपकाएं.
5. 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 सीएसएस प्रॉपर्टी की जानकारी भी देख पाएंगे.

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

Figma, फ़ॉन्ट-स्ट्रेच के बजाय, चौड़ाई (wdth) के लिए फ़ॉन्ट-वैरिएशन-सेटिंग का इस्तेमाल करता है.

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

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

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

10. बधाई हो

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

अगले चरण

• मटीरियल 3 टाइप के लिए दिशा-निर्देश देखें.
• Roboto Flex के बारे में और पढ़ें.
• अपने खुद के डिज़ाइन लागू करें!

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

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