प्रोडक्शन में वेरिएबल फ़ॉन्ट: परफ़ॉर्मेंस बिगाड़े बिना उन्हें कैसे शिप करें

वेरिएबल फ़ॉन्ट यानी एक फ़ाइल में अनगिनत वेट, और जो टीमें इन्हें सही तरीके से शिप करती हैं वे बाइट्स बचा रही हैं और एक्सप्रेसिवनेस भी खोल रही हैं। जो टीमें इन्हें गलत तरीके से शिप करती हैं वे 800 किलोबाइट के फ़ॉन्ट लोड कर रही हैं और ऐसे एनिमेशन के लिए first paint रोक रही हैं जिन्हें कोई देखेगा भी नहीं। फ़र्क फ़ॉन्ट के चुनाव में नहीं है। फ़र्क प्रोडक्शन की रणनीति में है।

वेरिएबल फ़ॉन्ट यानी एक फ़ाइल में अनगिनत वेट

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

फ़ॉर्मेट OpenType है जिसमें वेरिएशन डेटा एम्बेड होता है। ब्राउज़र रेंडर के समय एक्सिस के सिरों के बीच इंटरपोलेट करता है, यानी आपको font-weight: 350 या font-weight: 723 मुफ़्त मिलते हैं, सिर्फ़ वही पूर्णांक नहीं जो टाइप फ़ाउंड्री ने शिप करने के लिए चुने थे। इसी से hover-weight एनिमेशन पैटर्न संभव होता है, और इसी से लापरवाह इम्प्लीमेंटेशन ऐसी साइट के लिए 600 किलोबाइट की फ़ाइल लोड कर देता है जो सिर्फ़ दो वेट इस्तेमाल करती है।

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

वेट, स्लैंट, ऑप्टिकल साइज़, विड्थ। ज़्यादातर प्रोडक्शन साइट्स को इनमें से दो या तीन चाहिए, और जितने एक्सिस आप इस्तेमाल करते हैं उससे ज़्यादा शिप करना बेकार बाइट्स हैं।

OpenType स्पेक पाँच रजिस्टर्ड एक्सिस परिभाषित करता है: वेट (wght), विड्थ (wdth), स्लैंट (slnt), इटैलिक (ital) और ऑप्टिकल साइज़ (opsz)। इनके अलावा फ़ाउंड्रियाँ ग्रेड से लेकर एक्सप्रेसिवनेस तक किसी भी चीज़ के लिए कस्टम एक्सिस बना सकती हैं। कस्टम एक्सिस टाइप स्पेसिमेन में मज़ेदार लगते हैं। प्रोडक्शन में फ़ाइल साइज़ के लायक वे लगभग कभी नहीं होते। जब तक आपका डिज़ाइन साफ़ तौर पर कुछ और न माँगे, रजिस्टर्ड चार पर टिके रहें।

वेट है असली वर्कहॉर्स

वेट एक्सिस उन चार से सात स्टैटिक वेट फ़ाइलों की जगह लेता है जो ज़्यादातर साइट्स शिप करती हैं, और यही वह एक्सिस है जो अकेले वेरिएबल फ़ॉन्ट की कीमत वसूल कर देता है। जो साइट Regular, Medium, SemiBold, Bold और ExtraBold स्टैटिक फ़ाइलों के रूप में शिप करती है वह पाँच फ़ॉन्ट रिक्वेस्ट कर रही है। वेट एक्सिस वाला वेरिएबल फ़ॉन्ट एक करता है, और बीच की हर वैल्यू मुफ़्त देता है।

CSS किसी भी एलिमेंट पर font-weight: 300 से font-weight: 900 तक है। font-weight: 450 जैसी बीच की वैल्यू वैध हैं और सही रेंडर होती हैं। यह मान लेने से पहले कि वेरिएबल फ़ॉन्ट पूरी 100 से 900 रेंज कवर करता है, फ़ाउंड्री का एक्सिस रेंज डॉक्यूमेंटेशन देख लें। कुछ फ़ॉन्ट छोटी रेंज शिप करते हैं और चुपचाप क्लैम्प कर देते हैं, जिससे स्मूद ट्रांज़िशन की जगह हल्के लेकिन भद्दे स्टेप दिखते हैं।

स्लैंट से मिलते हैं असली इटैलिक

असली स्लैंट एक्सिस आपको सीधे से इटैलिक तक किसी भी वैल्यू पर जाने देता है, जो ज़्यादातर स्टैटिक फ़ॉन्ट जोड़ियाँ दूसरी फ़ाइल के बिना नहीं कर सकतीं। slnt (स्लैंट) और ital (इटैलिक) का फ़र्क मायने रखता है: स्लैंट सीधे से ऑब्लीक तक की लगातार रेंज है, जबकि इटैलिक एक बाइनरी स्विच है जो अलग, ऑप्टिकली सुधारे गए इटैलिक डिज़ाइन पर चला जाता है।

बॉडी टेक्स्ट के लिए सही ऑप्टिकल इटैलिक वाला इटैलिक एक्सिस लगभग हमेशा सही चुनाव है। जिन हेडलाइनों को आप एनिमेट करने की योजना बना रहे हैं, उनके लिए स्लैंट वह एक्सिस है जो आपको चाहिए। CSS है font-style: oblique -10deg, जहाँ डिग्री वैल्यू एक्सिस रेंज से मैप होती है। कोई वैल्यू पक्की करने से पहले स्लैंट को अपने असली हेडलाइन साइज़ पर टेस्ट करें। चरम स्लैंट एंगल छोटे साइज़ पर उससे बदतर दिखते हैं जितना फ़ाउंड्री का टाइप स्पेसिमेन बताता है।

ऑप्टिकल साइज़ डिस्प्ले टाइप में जान रखता है

ऑप्टिकल साइज़ रेंडर किए गए साइज़ के हिसाब से कॉन्ट्रास्ट, x-height और डिटेल एडजस्ट करता है, यानी डिस्प्ले फ़ेस और बॉडी फ़ेस का फ़र्क एक ही फ़ॉन्ट के भीतर। 12px बॉडी टेक्स्ट के लिए डिज़ाइन किए गए टाइपफ़ेस में सरल डिटेल, खुले काउंटर और उदार स्पेसिंग होती है। 80px का डिस्प्ले कट तीखा कॉन्ट्रास्ट, कसी स्पेसिंग और ज़्यादा निखरे डिटेल रखता है। ऑप्टिकल साइज़ आपको दोनों एक ही फ़ाइल से देता है।

CSS प्रॉपर्टी font-optical-sizing: auto है, जो ब्राउज़र को घोषित font-size के आधार पर सही ऑप्टिकल सेटिंग लगाने देती है। आप 72px की हेडिंग के लिए font-variation-settings: 'opsz' 72 से इसे मैन्युअली भी सेट कर सकते हैं। जो फ़ॉन्ट इस एक्सिस को ठीक से सपोर्ट करते हैं, Inter Display बनाम Inter Text जिसका क्लासिक उदाहरण है, उन्हें ऑप्टिकल साइज़ को फ़र्स्ट-क्लास फ़ीचर मानकर डिज़ाइन किया गया था। जो फ़ॉन्ट opsz एक्सिस बाद में जोड़ देते हैं वे शायद ही कोई सार्थक विज़ुअल फ़र्क देते हैं। जान लें कि आप कौन सा ख़रीद रहे हैं।

विड्थ है एडिटोरियल एक्सिस

विड्थ एक्सिस फ़ॉन्ट बदले बिना हेडलाइन को सिकोड़ने और पुल कोट को फैलाने देता है, यही वह चाल है जो एडिटोरियल लेआउट को गाने लगाती है। CSS प्रॉपर्टी font-stretch है और यह प्रतिशत वैल्यू लेती है: कंडेन्स्ड के लिए font-stretch: 75%, एक्सपैंडेड के लिए font-stretch: 125%।

यह एक्सिस रिस्पॉन्सिव एडिटोरियल लेआउट वाली साइट्स पर अपना फ़ाइल साइज़ वसूल करता है। डेस्कटॉप पर 120px की हेडलाइन को 375px मोबाइल के कॉलम में फ़िट होने के लिए कंडेन्स्ड होना पड़ सकता है, और विड्थ एक्सिस इसे दूसरा फ़ॉन्ट लोड किए बिना एक @media क्वेरी से संभाल लेता है। Roboto Flex प्रोडक्शन-रेडी वेरिएबल फ़ॉन्ट में सबसे चौड़ी विड्थ एक्सिस रेंज में से एक शिप करता है, और अगर आप इस एक्सिस को गंभीरता से इस्तेमाल करने वाले हैं तो इसे पढ़ना सार्थक है। फ़िक्स्ड-विड्थ हेडर वाली मार्केटिंग साइट्स के लिए इसे पूरी तरह छोड़ दें।

वेरिएबल बनाम स्टैटिक, फ़ैसले का पेड़

वेरिएबल फ़ॉन्ट तब जीतते हैं जब आप तीन या ज़्यादा वेट इस्तेमाल करते हैं, टाइप को एनिमेट करते हैं, या ऑप्टिकल साइज़ चाहिए। वरना स्टैटिक पर रहें। ब्रेक-ईवन पॉइंट आमतौर पर दो से तीन वेट पर होता है, और गणित आपकी भाषा कवरेज की ज़रूरतों के हिसाब से बदलता है।

Regular और Bold शिप करने वाली साइट के लिए 40 से 60 किलोबाइट की दो स्टैटिक फ़ाइलें शायद 120 से 200 किलोबाइट के एक वेरिएबल फ़ॉन्ट से बेहतर हैं। जैसे ही आप तीन वेट पार करते हैं या ज़रूरतों में एनिमेशन जोड़ते हैं, गणित निर्णायक रूप से वेरिएबल की ओर झुक जाता है।

सबसेटिंग फ़ाइल को आधा कर देती है

सबसेटिंग उन ग्लिफ़ को हटा देती है जो आप इस्तेमाल नहीं करते, और मार्केटिंग साइट पर इसका मतलब है कि 600 किलोबाइट का वेरिएबल फ़ॉन्ट बिना किसी दिखने वाले बदलाव के 200 किलोबाइट का हो जाता है। पूरा वेरिएबल फ़ॉन्ट हर वह ग्लिफ़ शिप करता है जो फ़ाउंड्री ने डिज़ाइन किया: Latin, Latin Extended, Cyrillic, Greek, गणितीय ऑपरेटर, करेंसी सिंबल और ऐसी लिगेचर जो आप कभी इस्तेमाल नहीं करेंगे। सबसेट किया हुआ वेरिएबल फ़ॉन्ट सिर्फ़ वही शिप करता है जो आपके कंटेंट को चाहिए।

इसके लिए टूल fonttools लाइब्रेरी का pyftsubset है। एक बेसिक Latin सबसेट कमांड:

pyftsubset font.woff2 \ --output-file=font-subset.woff2 \ --flavor=woff2 \ --unicodes=U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD \ --layout-features="kern,liga,calt,rlig"

kern, liga, calt और rlig लेआउट फ़ीचर रखें। बाकी सब हटा दें, जब तक डिज़ाइन साफ़ तौर पर उसे इस्तेमाल न करे। अगर टूल ने कंप्रेशन अपने आप नहीं किया, तो आउटपुट को WOFF2 कंप्रेसर से गुज़ारें।

Latin, Latin-extended और भाषा रेंज

सही सबसेटिंग रणनीति है एक Latin फ़ाइल और हर लोकेल के लिए एक भाषा एक्सटेंशन फ़ाइल, जो सिर्फ़ ज़रूरत पड़ने पर लोड हो। ज़्यादातर मार्केटिंग और प्रोडक्ट साइट्स मुख्यतः Latin कंटेंट परोसती हैं। Latin सबसेट को डिफ़ॉल्ट के रूप में शिप करें, और एक्सटेंडेड कैरेक्टर सेट @font-face में unicode-range डिस्क्रिप्टर से लोड करें, जो ब्राउज़र को बताता है कि फ़ाइल तभी फ़ेच करे जब पेज पर मेल खाते कैरेक्टर मिलें।

@font-face { font-family: 'YourFont'; src: url('/fonts/yourfont-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'YourFont'; src: url('/fonts/yourfont-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

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

बिना झटके के लोडिंग

जो वेरिएबल फ़ॉन्ट first paint के बाद लोड होता है वह लेआउट को खिसका देगा, और लोडिंग रेसिपी है preload, साथ में font-display swap, साथ में मेट्रिक-मैच्ड फ़ॉलबैक। यह वैकल्पिक नहीं है। वेरिएबल फ़ॉन्ट किसी एक स्टैटिक वेट से बड़ा होता है, यानी उसे पहुँचने में ज़्यादा समय लगता है, यानी लेआउट शिफ़्ट की खिड़की ज़्यादा चौड़ी होती है।

Preload लिंक <head> में, किसी भी स्टाइलशीट से पहले जाता है:

<link rel="preload" href="/fonts/yourfont-latin.woff2" as="font" type="font/woff2" crossorigin >

आपके @font-face में font-display: swap घोषणा ब्राउज़र को बताती है कि फ़ॉलबैक से तुरंत रेंडर करे और वेरिएबल फ़ॉन्ट आने पर उसे बदल दे। वेरिएबल फ़ॉन्ट यानी एक फ़ाइल में अनगिनत वेट, और गलत लोडिंग रणनीति उसे बेवजह दो बार लोड कर देगी अगर आप स्टाइलशीट्स में preload और non-preload घोषणाएँ मिला दें। हर सबसेट फ़ाइल के लिए एक preload। बस यही पूरा नियम है।

---

ऐसे वेरिएबल फ़ॉन्ट चाहिए जो आधे बाइट्स में शिप हों और पेज को कभी न झटकाएँ? Brainy को हायर करें और हम सही एक्सिस, सही सबसेट और Lighthouse को हरा रखने वाली लोडिंग रेसिपी के साथ आपका प्रोडक्शन टाइपोग्राफ़ी स्टैक शिप करेंगे।

---

मेट्रिक-मैच्ड फ़ॉलबैक

मेट्रिक-मैच्ड सिस्टम फ़ॉलबैक size-adjust, ascent-override और descent-override का इस्तेमाल करता है ताकि फ़ॉलबैक वेरिएबल फ़ॉन्ट जैसी ही लय में रेंडर हो। इसके बिना font-display: swap अदृश्य टेक्स्ट को लेआउट शिफ़्ट से बदल देता है जब वेरिएबल फ़ॉन्ट आता है। मेट्रिक मैचिंग के साथ स्वैप आँख से पकड़ में नहीं आता।

@font-face { font-family: 'YourFont Fallback'; src: local('Arial'); ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; size-adjust: 107%; }

सटीक वैल्यू आपके वेरिएबल फ़ॉन्ट पर निर्भर करती हैं। Fontaine और next/font जैसे टूल ये वैल्यू अपने आप जनरेट करते हैं। अगर आप Next.js पर बना रहे हैं, तो next/font पूरी फ़ॉलबैक चेन संभाल लेता है। अगर नहीं, तो हाथ से गणना किए बिना सही ओवरराइड वैल्यू तक पहुँचने का सबसे तेज़ रास्ता Fontaine है।

चार एनिमेशन पैटर्न जो वेरिएबल फ़ॉन्ट खोलते हैं

Hover-weight, scroll-weight, hover-slant और reveal-width। ये चारों एनिमेशन सिर्फ़ वेरिएबल फ़ॉन्ट से संभव हैं, और कम इस्तेमाल करने पर वे अपना फ़ाइल साइज़ वसूल करते हैं। चारों एक पेज पर डाल दें तो वह डिज़ाइन नहीं, टेक डेमो लगेगा।

Hover-weight hover पर font-weight को 400 से 700 तक ट्रांज़िशन करता है। इंटरपोलेशन स्मूद होता है क्योंकि एक्सिस डेटा फ़ॉन्ट में ही है। एलिमेंट पर transition: font-weight 0.15s ease ही पूरा CSS है। यह नेविगेशन लिंक, कॉल-टू-एक्शन टेक्स्ट और इंटरैक्टिव लेबल पर काम करता है।

Scroll-weight स्क्रॉल पोज़िशन से font-weight चलाता है, एक JavaScript स्क्रॉल लिसनर के ज़रिए जो scrollY को एक्सिस रेंज की वैल्यू से मैप करता है। रेंज कसी रखें: 300 से 700 सोचा-समझा लगता है, 100 से 900 बग लगता है। यह हीरो सेक्शन में फ़िट बैठता है जहाँ यूज़र के कंटेंट में स्क्रॉल करते ही टाइप भारी होता जाता है।

Hover-slant hover पर font-style: oblique 0deg से font-style: oblique -10deg में ट्रांज़िशन करता है। यह hover-weight का सूक्ष्म विकल्प है और नेविगेशन लिंक और इनलाइन इंटरैक्टिव एलिमेंट पर ज़्यादा निखरा लगता है। इसे hover-weight के साथ तभी मिलाएँ जब टाइपफ़ेस दोनों को एक साथ सपोर्ट करने के लिए डिज़ाइन किया गया हो।

Reveal-width एंट्री एनिमेशन के हिस्से के रूप में font-stretch को एनिमेट करता है। टेक्स्ट font-stretch: 75% पर आता है और 400ms में font-stretch: 100% तक फैल जाता है। फ़ेड-इन के साथ यह सबसे साफ़ टाइपोग्राफ़िक रिवील पैटर्न में से एक है। बॉडी टेक्स्ट पर इसे छोड़ दें। यह सिर्फ़ डिस्प्ले टाइप और हीरो हेडलाइन का है।

सात साइट्स जो बड़े पैमाने पर वेरिएबल फ़ॉन्ट शिप करती हैं

GitHub, Stripe Press, Vercel, Linear, The New York Times, Apple Music और Figma, सब प्रोडक्शन में वेरिएबल फ़ॉन्ट शिप करते हैं, और जो पैटर्न वे साझा करते हैं वही नकल करने लायक हैं।

GitHub Mona Sans और Hubot Sans शिप करता है, दोनों GitHub ब्रांड के लिए बने कस्टम वेरिएबल फ़ॉन्ट। ज़्यादातर UI संदर्भों में सिर्फ़ वेट एक्सिस। कभी-कभार मार्केटिंग सेक्शन के अलावा कोई एनिमेशन नहीं। फ़ाइल साइज़ कसे हुए हैं क्योंकि वे भाषा समूह के हिसाब से आक्रामक सबसेटिंग करते हैं।

Stripe Press एडिटोरियल हेडलाइन के लिए कस्टम डिस्प्ले वेरिएबल फ़ॉन्ट इस्तेमाल करता है। वे वेट एक्सिस को ज़ोर से धकेलते हैं, डिस्प्ले हेडलाइन भारी वेट में और कैप्शन हल्के वेट में, एक ही फ़ाइल से। बड़े हेडलाइन साइज़ पर ऑप्टिकल साइज़िंग साफ़ दिखती है। इस सूची में यह वेरिएबल फ़ॉन्ट का सबसे एडिटोरियल-महत्वाकांक्षी इस्तेमाल है।

Vercel अपना खुद का वेरिएबल फ़ॉन्ट Geist शिप करता है, Geist Sans और Geist Mono दोनों में। वेट एक्सिस पूरी रेंज कवर करता है। फ़ॉन्ट ओपन सोर्स है, Latin सबसेटिंग साफ़ है, और यह इतना तेज़ लोड होता है कि प्रोडक्शन Next.js ऐप में अच्छी तरह शिप किया वेरिएबल फ़ॉन्ट कैसा दिखता है, इसका संदर्भ बन सकता है।

Linear Inter को वेरिएबल फ़ॉन्ट के रूप में शिप करता है। वेट एक्सिस UI वेट की रेंज में चलता है, और घने UI के लिए उपयुक्त संकरी ऑप्टिकल वेट रेंज में रहता है। यह इस सूची का सबसे रूढ़िवादी इस्तेमाल है और डेटा-घने प्रोडक्ट इंटरफ़ेस के लिए सबसे सही इस्तेमालों में से भी एक, जहाँ एनिमेशन बस शोर होता।

The New York Times डिस्प्ले टाइप के लिए कस्टम वेरिएबल सेरिफ़ इस्तेमाल करता है। वेट और ऑप्टिकल साइज़ दोनों एक्सिस सक्रिय हैं, और डिस्प्ले और बॉडी के बीच के ट्रांज़िशन कैरेक्टर रेंडरिंग बदलने के लिए ऑप्टिकल साइज़ एक्सिस का इस्तेमाल करते हैं। एडिटोरियल स्केल पर वेरिएबल फ़ॉन्ट का प्रोडक्शन इस्तेमाल इससे ज़्यादा परिष्कृत नहीं होता।

Apple Music San Francisco को उसके वेरिएबल रूप में शिप करता है, जिसमें वेट और ऑप्टिकल साइज़ दोनों एक्सिस सक्रिय हैं। बड़े और छोटे टाइप के बीच एक्सिस ट्रांज़िशन इतने स्मूद हैं कि ज़्यादातर यूज़र को पता ही नहीं चलता कि फ़ॉन्ट वेरिएबल है, और यही सही लक्ष्य है। फ़ॉन्ट को पढ़ने के अनुभव में गायब हो जाना चाहिए।

Figma पूरे एप्लिकेशन में Inter Display को वेरिएबल फ़ॉन्ट के रूप में शिप करता है। अगर आप प्रोडक्ट UI के लिए डिस्प्ले टाइपफ़ेस चयन कर रहे हैं, तो देखें कि Figma छोटे UI वेट पर Inter और बड़े हेडिंग साइज़ पर Inter Display को कैसे संतुलित करता है। वेट रेंज का अनुशासन सीधे नकल करने लायक है।

डिप्लॉय से पहले की वेरिएबल फ़ॉन्ट चेकलिस्ट

वेरिएबल फ़ॉन्ट शिप करने से पहले इसे चलाएँ और आप वे बग पकड़ लेंगे जो प्रोडक्शन में काटते हैं।

• सबसेटिंग सत्यापित। अपनी टारगेट यूनिकोड रेंज के साथ pyftsubset चलाएँ। पक्का करें कि Latin सबसेट फ़ाइल 200KB से कम है। जाँचें कि आपके कंटेंट के कैरेक्टर आउटपुट में मौजूद हैं।
• एक्सिस दर्ज। जानें कि फ़ॉन्ट कौन से एक्सिस शिप करता है और हर एक की न्यूनतम और अधिकतम रेंज क्या है। अगर एक्सिस 700 पर खत्म होता है तो font-weight: 800 घोषित न करें। वह चुपचाप क्लैम्प होगा और आपका डिज़ाइन गलत निकलेगा।
• Preload सेट। हर सबसेट फ़ाइल के लिए एक <link rel="preload">, <head> में, crossorigin एट्रिब्यूट के साथ, सिर्फ़ मुख्य Latin फ़ाइल की ओर इशारा करता हुआ। जो फ़ाइल आप इस्तेमाल नहीं करते उसे preload करना बैंडविड्थ बर्बाद करता है।
• font-display कॉन्फ़िगर। हर @font-face ब्लॉक में font-display: swap है। DevTools के Network टैब में पक्का करें कि फ़ॉन्ट किसी क्रिटिकल पाथ रिसोर्स को रेंडर-ब्लॉक नहीं कर रहे।
• फ़ॉलबैक मेट्रिक्स मैच्ड। सिस्टम फ़ॉलबैक के लिए @font-face ब्लॉक जिसमें size-adjust, ascent-override और descent-override की गणना की गई हो। DevTools में Slow 3G पर थ्रॉटल करके और लोड पर लेआउट शिफ़्ट देखकर जाँचें। CLS 0 या उसके पास होना चाहिए।
• डिज़ाइन में इस्तेमाल होने वाले एक्सिस पक्के। CSS में घोषित हर एक्सिस वास्तव में अंतिम डिज़ाइन में इस्तेमाल हो रहा है। फ़ॉन्ट फ़ाइल में मौजूद लेकिन CSS में न इस्तेमाल होने वाले एक्सिस भी बाइट्स जोड़ते हैं। अगर आप विड्थ इस्तेमाल नहीं कर रहे, तो उन बाइट्स को छाँटने के लिए एक्सिस-रेंज सबसेटिंग पर विचार करें।
• Lighthouse स्कोर जाँचा। फ़ॉन्ट लगाकर प्रोडक्शन URL पर Lighthouse चलाएँ। फ़ॉन्ट से जुड़े LCP और CLS हरे होने चाहिए। अगर नहीं हैं, तो फ़ॉलबैक मेट्रिक्स गलत हैं या preload गायब है।
• CORS हेडर पक्के। CDN या बाहरी ऑरिजिन से लोड होने वाले वेरिएबल फ़ॉन्ट को Access-Control-Allow-Origin हेडर चाहिए। CORS एरर के लिए Network टैब देखें। CORS फ़ेल होने पर चुपचाप फ़ॉन्ट फ़ॉलबैक हो जाता है जिसे प्रोडक्शन में पकड़ना मुश्किल है।

FAQ

वेरिएबल फ़ॉन्ट क्या है और यह स्टैटिक फ़ॉन्ट से कैसे अलग है?

वेरिएबल फ़ॉन्ट एक अकेली फ़ॉन्ट फ़ाइल है जिसमें टाइपफ़ेस के डिज़ाइन की पूरी रेंज होती है, जिसे वेट, विड्थ, स्लैंट और ऑप्टिकल साइज़ जैसे एक्सिस नियंत्रित करते हैं। स्टैटिक फ़ॉन्ट एक वेट और स्टाइल पर एक अकेला स्नैपशॉट है। व्यावहारिक फ़र्क यह है कि वेरिएबल फ़ॉन्ट में आप font-weight: 350 इस्तेमाल कर सकते हैं या CSS में वेट को स्मूद तरीके से एनिमेट कर सकते हैं, जबकि स्टैटिक फ़ॉन्ट सिर्फ़ वही ख़ास वैल्यू देते हैं जिन्हें फ़ाउंड्री ने अलग फ़ाइलों के रूप में शिप करना चुना।

क्या वेरिएबल फ़ॉन्ट सच में परफ़ॉर्मेंस सुधारते हैं?

यह इस पर निर्भर करता है कि आप कितने वेट लोड कर रहे हैं। अगर आप कुल 60KB के दो स्टैटिक वेट शिप कर रहे हैं, तो 180KB के वेरिएबल फ़ॉन्ट पर जाना परफ़ॉर्मेंस में गिरावट है। अगर आप कुल 300KB के पाँच वेट शिप कर रहे हैं, तो 120KB के सबसेट किए वेरिएबल फ़ॉन्ट पर जाना साफ़ जीत है। वेरिएबल फ़ॉन्ट के पक्ष में परफ़ॉर्मेंस का तर्क असली है, लेकिन यह तभी लागू होता है जब आप तीन-वेट की सीमा पार करें और सही से सबसेट करें।

UI डिज़ाइन के लिए सबसे अच्छा वेरिएबल फ़ॉन्ट कौन सा है?

Inter UI डिज़ाइन में सबसे ज़्यादा तैनात वेरिएबल फ़ॉन्ट है। इसका वेट एक्सिस स्क्रीन इस्तेमाल के लिए अच्छी तरह कैलिब्रेट है, यह साफ़ सबसेट होता है, और Figma इसे प्रोडक्शन संदर्भ के रूप में शिप करता है। जब रिस्पॉन्सिव एडिटोरियल लेआउट के लिए चौड़ी एक्सिस रेंज चाहिए तो Roboto Flex सही चुनाव है। अगर आप एक ही टाइप फ़ैमिली से वेरिएबल सैन्स और वेरिएबल मोनो दोनों चाहते हैं तो Recursive देखने लायक है। जिन वेब डिज़ाइन सिद्धांतों को ज़्यादा एक्सप्रेसिव डिस्प्ले फ़ेस चाहिए, उनके लिए Fraunces और Playfair Display दोनों मज़बूत ऑप्टिकल साइज़ और वेट एक्सिस शिप करते हैं।

CSS में font-variation-settings का इस्तेमाल कैसे करूँ?

font-variation-settings वेरिएबल फ़ॉन्ट एक्सिस को सीधे चार अक्षर के एक्सिस टैग और संख्यात्मक वैल्यू से सेट करने वाली लो-लेवल प्रॉपर्टी है: font-variation-settings: 'wght' 450, 'wdth' 85। वेट और विड्थ जैसे रजिस्टर्ड एक्सिस के लिए हाई-लेवल CSS प्रॉपर्टी (font-weight, font-stretch) को तरजीह दें क्योंकि वे सही तरह से इनहेरिट और कंपोज़ होती हैं। font-variation-settings सिर्फ़ उन कस्टम एक्सिस के लिए इस्तेमाल करें जिनकी कोई हाई-लेवल CSS प्रॉपर्टी नहीं है।

क्या वेरिएबल फ़ॉन्ट लेआउट शिफ़्ट पैदा कर सकते हैं?

हाँ, और स्टैटिक फ़ॉन्ट की तुलना में उनसे लेआउट शिफ़्ट होने की संभावना ज़्यादा है क्योंकि फ़ाइल बड़ी है और लोड होने में ज़्यादा समय लेती है। इसका हल है font-display: swap के साथ मेट्रिक-मैच्ड फ़ॉलबैक। यह संयोजन स्वैप को आँख से अदृश्य कर देता है। मेट्रिक-मैच्ड फ़ॉलबैक के बिना font-display: swap अदृश्य टेक्स्ट को फ़ॉन्ट आने पर दिखने वाली लेआउट छलाँग से बदल देता है। दोनों समस्याएँ साथ में हल होती हैं या बिल्कुल नहीं।

क्या वेरिएबल फ़ॉन्ट सभी ब्राउज़र में सपोर्टेड हैं?

वेरिएबल फ़ॉन्ट सभी आधुनिक ब्राउज़र में सपोर्टेड हैं: Chrome, Firefox, Safari और Edge। बेसलाइन इतनी ठोस है कि ब्राउज़र संगतता के लिए आपको स्टैटिक फ़ॉन्ट फ़ॉलबैक की ज़रूरत नहीं। ज़्यादातर प्रोडक्शन साइट्स पर वेरिएबल फ़ॉन्ट सपोर्ट न करने वाले ब्राउज़र पर यूज़र का प्रतिशत एक प्रतिशत से कम है। उस किनारे के मामले के लिए सिस्टम फ़ॉन्ट फ़ॉलबैक दें, स्टैटिक फ़ॉन्ट स्टैक नहीं।

वेरिएबल फ़ॉन्ट सबसेटिंग कैसे काम करती है?

सबसेटिंग फ़ॉन्ट फ़ाइल से वे ग्लिफ़ हटा देती है जो आपका कंटेंट कभी रेंडर नहीं करेगा, Python की fonttools लाइब्रेरी के pyftsubset जैसे टूल से। आप जो यूनिकोड कैरेक्टर रेंज चाहते हैं वह बताते हैं, और टूल बाकी सब हटा देता है। पूरा वेरिएबल फ़ॉन्ट 3,000 ग्लिफ़ शिप कर सकता है। सिर्फ़ Latin सबसेट लगभग 250 रखता है। नतीजा Latin कंटेंट के लिए एक जैसा विज़ुअल आउटपुट है, लगभग एक-तिहाई फ़ाइल साइज़ पर। पूरे कमांड रेफ़रेंस के लिए सबसेटिंग ग्लॉसरी एंट्री देखें।

वह बदलाव जो वेरिएबल फ़ॉन्ट असल में खोलते हैं

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

Figma वेरिएबल्स आर्किटेक्चर जो आधुनिक डिज़ाइन सिस्टम चलाता है, वेरिएबल फ़ॉन्ट एक्सिस से स्वाभाविक रूप से मेल खाता है। Figma में एक font-weight टोकन फ़ॉन्ट में एक एक्सिस वैल्यू है। अच्छी तरह संरचित टोकन सिस्टम को सही से सबसेट किए वेरिएबल फ़ॉन्ट के साथ जोड़ें और आपको ऐसे डिज़ाइन फ़ैसले मिलते हैं जो डिज़ाइन फ़ाइल से प्रोडक्शन तक बिना किसी अस्पष्टता के पहुँचते हैं। इसे hover स्टेट पर OKLCH कलर सिस्टम के साथ जोड़ें और आप ऐसे प्रोडक्ट इंटरैक्शन बनाते हैं जो जोड़े हुए नहीं, सोचे-समझे लगते हैं।

प्रोडक्शन वेरिएबल फ़ॉन्ट का पैमाना "क्या हमने वेरिएबल फ़ॉन्ट शिप किया" नहीं है। पैमाना है: सही सबसेट, ठीक से preload, फ़ॉलबैक मेट्रिक्स मैच्ड, और सिर्फ़ वे एक्सिस जो डिज़ाइन इस्तेमाल करता है। यही वह मानक है जो प्रोडक्शन टाइपोग्राफ़ी करने वाली टीमों को टाइपोग्राफ़ी थिएटर करने वाली टीमों से अलग करता है।

ऐसे वेरिएबल फ़ॉन्ट चाहिए जो आधे बाइट्स में शिप हों और पेज को कभी न झटकाएँ? Brainy को हायर करें और हम सही एक्सिस, सही सबसेट और Lighthouse को हरा रखने वाली लोडिंग रेसिपी के साथ आपका प्रोडक्शन टाइपोग्राफ़ी स्टैक शिप करेंगे।