एक टाइपफ़ेस का प्रदर्शन-बजट

इस शृंखला के पिछले निबंध की दलील थी कि कई एप्लिकेशनों को कोई फ़ॉन्ट भेजना ही नहीं चाहिए। यह निबंध उन सतहों के लिए है जहाँ टाइपफ़ेस अपनी बाइटों का हक़ अदा करता है — क्योंकि "यह लोड करने लायक है" वह जगह है जहाँ इंजीनियरिंग शुरू होती है, ख़त्म नहीं। वेबफ़ॉन्ट पृष्ठ की सबसे महत्वपूर्ण सामग्री के लिए एक रेंडर-अवरोधक डिपेंडेंसी है। उसका बजट भी वैसे ही बनाइए।

एक फ़ाइल, हर वज़न

सबसे अधिक प्रतिफल देने वाला अकेला निर्णय है फ़ाइल-आर्किटेक्चर। पारंपरिक परिवार स्टैटिक रूपों में जाता है — रेगुलर, इटैलिक, बोल्ड, शायद एक डिस्प्ले कट — हर एक अपना अलग अनुरोध, कुल मिलाकर आराम से 300–400KB। एक वैरिएबल फ़ॉन्ट (variable font) वही दायरा (प्रायः अधिक: 100 से 900 तक हर वज़न) एक ऐसी फ़ाइल में ढोता है जिसका वज़न आम तौर पर दो स्टैटिक फ़ाइलों से कम होता है।

380KB का चार-फ़ाइल स्टैटिक परिवार बनाम वही दायरा ढोता 92KB का एक सबसेट वैरिएबल फ़ॉन्ट।

कम फ़ाइलों का अर्थ है आंशिक लोडिंग के कम अवसर — बोल्ड फ़ाइल के पिछड़ने पर असली-इटैलिक-नक़ली-बोल्ड की कोई झलक नहीं। और वैरिएबल फ़ाइल की अतिरिक्त अक्षें कार्यात्मक हैं: छोटे टेक्स्ट के लिए ऑप्टिकल साइज़िंग, डार्क थीमों के लिए ग्रेड — क्षमताएँ, बोझ नहीं।

सबसेटिंग पूरी संजीदगी से

अधिकांश फ़ॉन्ट फ़ाइलें ज़्यादातर उन अक्षरों से बनी होती हैं जिन्हें आपका इंटरफ़ेस कभी रेंडर नहीं करेगा। सबसेटिंग — फ़ाइल को उन्हीं लिपियों और अक्षरों तक काटना जो आप वास्तव में इस्तेमाल करते हैं — किसी लैटिन फ़ॉन्ट को आराम से आधा कर देती है, और unicode-range आपको व्यापक कवरेज बिना अग्रिम कीमत चुकाए रखने देता है: लैटिन सबसेट और विस्तारित सबसेट को अलग-अलग फ़ेस के रूप में घोषित कीजिए, और ब्राउज़र विस्तारित हिस्सा तभी उतारेगा जब कोई मेल खाता अक्षर दिखे। pyftsubset/fonttools जैसे औज़ार इसे एक बिल्ड-स्टेप बना देते हैं, कोई हस्तशिल्प परियोजना नहीं। WOFF2 तो कहने की ज़रूरत ही नहीं; अगर आप 2026 में कुछ और भेज रहे हैं, तो शुरुआत वहीं से कीजिए।

`font-display`, ईमानदारी से चुना हुआ

लोडिंग-व्यवहार दरअसल CSS की पोशाक पहने एक उत्पाद-निर्णय है:

block फ़ॉन्ट लोड होने तक टेक्स्ट छिपा देता है। लगभग कभी उचित नहीं — आप अपने पाठकों का समय अपने ब्रांड के दिखावे के बदले बेच रहे हैं।
swap तुरंत फ़ॉलबैक दिखाता है और फ़ॉन्ट आने पर बदल देता है। पढ़ने की सतहों के लिए सही — लेकिन इससे स्वैप का क्षण आपकी समस्या बन जाता है, जो अगला अनुभाग है।
optional फ़ॉन्ट तभी इस्तेमाल करता है जब वह पहले से कैश में हो (मोटे तौर पर: तुरंत या कभी नहीं)। जो उच्च-प्रदर्शन एप्लिकेशन वेबफ़ॉन्ट पर अड़े हों, उनके लिए यही ईमानदार सेटिंग है — पहली यात्रा फ़ॉलबैक में पढ़ी जाती है, हर बाद की यात्रा को ब्रांड-टाइपफ़ेस मिलता है, और कुछ भी कभी खिसकता नहीं।

समय-रेखा पर तीन font-display रणनीतियाँ: block टेक्स्ट छिपाता है, swap फ़ॉलबैक दिखाकर खिसकाता है, optional कभी नहीं खिसकाता।

स्वैप को अदृश्यता तक इंजीनियर करना

अगर आप swap चुनते हैं, तो लेआउट शिफ़्ट मिटाना आपका काम है। आधुनिक टूलकिट इसे लगभग पूर्णता से करता है: किसी स्थानीय सिस्टम फ़ॉन्ट पर बना एक फ़ॉलबैक @font-face, जिसके size-adjust, ascent-override और descent-override इस तरह सधे हों कि फ़ॉलबैक ठीक उतनी ही जगह घेरे जितनी वेबफ़ॉन्ट। टेक्स्ट समायोजित फ़ॉलबैक में तुरंत रेंडर होता है; वेबफ़ॉन्ट आता है; कुछ नहीं हिलता। यह साइट ठीक यही करती है — डिस्प्ले टाइपफ़ेस का Georgia फ़ॉलबैक मीट्रिक रूप से इस तरह स्केल किया गया है कि स्वैप आवाज़ का बदलाव हो, लेआउट का नहीं।

दो टाइपफ़ेसों में एक ही नाममात्र आकार: एक्स-हाइटें असहमत रहती हैं, जब तक font-size-adjust फ़ॉलबैक को सामान्य नहीं कर देता।

अंत में वितरण की स्वच्छता: स्वयं होस्ट कीजिए (तीसरे पक्ष का फ़ॉन्ट CDN एक निजता-प्रश्न भी है और एक ऐसा कनेक्शन-सेटअप भी जिसकी आपको ज़रूरत नहीं), उस एक महत्वपूर्ण फ़ाइल को प्रीलोड कीजिए, और अपरिवर्तनीय कैश-हेडर सेट कीजिए ताकि कीमत प्रति उपयोगकर्ता बस एक बार चुकानी पड़े, हमेशा के लिए।

इस तरह किए गए एक गंभीर टेक्स्ट-टाइपफ़ेस का पूरा बजट: एक प्रीलोडेड वैरिएबल WOFF2, आपकी भाषाओं तक सबसेट, ~40–90KB, मीट्रिक-संगत फ़ॉलबैक के साथ swap या सीधे optional। यह अधिकांश हीरो-छवियों से सस्ता है — और यही वह मानक है जिस पर टाइपफ़ेस को शुरू से खरा उतरना था।