आपकी वेबसाइट का फ़ॉन्ट दिखने से कहीं ज़्यादा महँगा पड़ता है

एक क्लाइंट ने मुझे घबराहट भरा ईमेल भेजा। फ़ॉन्ट कंपनी ने उनकी साइट पकड़ ली थी और लाइसेंस का अंतर वसूला था: 4 हज़ार रियाल से ज़्यादा, क्योंकि ट्रैफ़िक तीन साल पहले तय की गई सीमा पार कर गया था। टीम में किसी को पता ही नहीं था कि कोई सीमा है। साइट का फ़ॉन्ट एक बिल बन चुका था।

यह आपकी सोच से ज़्यादा बार होता है। साइट का फ़ॉन्ट उन फ़ैसलों में से है जो पूरी तरह सजावटी लगते हैं, जो कोई Figma में पाँच मिनट में ले लेता है, और जो बाद में तीन मोर्चों पर ब्याज वसूलते हैं: पैसा, रफ़्तार और पहचान। तीनों खोलकर बताता हूँ।

फ़ॉन्ट का बिल पेजव्यू से क्यों जुड़ा होता है

फ़ॉन्ट सॉफ़्टवेयर है। आप उसे खरीदते नहीं, लाइसेंस लेते हैं। और वेबफ़ॉन्ट लाइसेंस आमतौर पर मासिक पेजव्यू के स्लैब के हिसाब से बिकते हैं।

काम कुछ ऐसे करता है:

• डेस्कटॉप लाइसेंस: Figma, Illustrator, PowerPoint में इस्तेमाल। सस्ता।
• वेब लाइसेंस: ब्राउज़र में सर्व करना। ट्रैफ़िक स्लैब के हिसाब से शुल्क।
• ऐप लाइसेंस: किसी ऐप्लिकेशन में एम्बेड करना। इंस्टॉल की संख्या के हिसाब से शुल्क।

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

बड़ी फ़ाउंड्री में एक पूरी फ़ैमिली, औसत ट्रैफ़िक के वेब लाइसेंस के साथ, 500 से 3 हज़ार डॉलर के बीच पड़ती है। अगर आपके पास साइट, ऐप और प्रिंट सामग्री है, तो गुणा कर लीजिए। अच्छी कमाई वाली कंपनी के लिए यह मामूली है। शुरुआत कर रहे SaaS के लिए यह एक महीने का इंफ़्रा है।

मुफ़्त फ़ॉन्ट अब सचमुच अच्छे हो गए हैं

दस साल पहले "मुफ़्त फ़ॉन्ट" का मतलब था Arial, या Google Fonts से कुछ ऐसा जो चीख-चीखकर "टेम्पलेट" कहता था। वह बदल गया।

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

यह अकेली नहीं है। Inter, Geist, Public Sans, Instrument Sans, Söhne (यह पेड है, पर बताता हूँ क्योंकि बहुत लोग उलझ जाते हैं)। बात यह है कि "ढंग की टाइपोग्राफ़ी के लिए महँगा भुगतान करना ही पड़ेगा" वाला तर्क अब मर चुका है।

महँगा फ़ॉन्ट प्रोडक्ट को अच्छा नहीं बनाता। गलत फ़ॉन्ट प्रोडक्ट को धीमा बना देता है।

वह वज़न जिसे कोई नहीं नापता

अब वह हिस्सा जो परफ़ॉर्मेंस रिपोर्ट ठीक से नहीं बतातीं।

चार वज़न वाली एक फ़ॉन्ट फ़ैमिली, WOFF2 फ़ॉर्मैट में, लैटिन और लैटिन-एक्सटेंडेड कवर करते हुए, 60 से 120 KB के बीच पड़ती है। सुनने में कुछ भी नहीं। पर फ़ॉन्ट रेंडरिंग रोकता है। ब्राउज़र CSS डाउनलोड करता है, पाता है कि फ़ॉन्ट चाहिए, फ़ॉन्ट माँगता है, और जब तक वह नहीं आता टेक्स्ट या तो अदृश्य रहता है या रूप बदलते हुए झिलमिलाता है। "साइट लोड हुई और टेक्स्ट उछल गया" वाले असर का नाम है: फ़ॉन्ट देर से आया और लेआउट को दोबारा बहा ले गया।

यह सीधे Cumulative Layout Shift में जाता है, जो Google की रैंकिंग वाली मेट्रिक्स में से एक है। और यह यूज़र की धारणा में जाता है, जो उससे भी ज़्यादा मायने रखने वाली मेट्रिक है।

तीन चीज़ें जो लगभग सब हल कर देती हैं:

1. फ़ॉन्ट अपने डोमेन पर होस्ट करें। Google Fonts से लोड करना एक और सर्वर से कनेक्शन जोड़ता है। जब से ब्राउज़रों ने कैश को हर साइट के लिए अलग कर दिया, "यूज़र के पास दूसरी साइट का कैश पहले से होगा" वाला तर्क बेकार हो गया है।
2. वेरिएबल फ़ॉन्ट इस्तेमाल करें। चार की जगह एक फ़ाइल। कम रिक्वेस्ट, कम वज़न।
3. फ़ॉलबैक ठीक से सेट करें। font-display: swap और साथ में मिलती-जुलती मेट्रिक्स वाला सिस्टम फ़ॉन्ट। टेक्स्ट तुरंत दिखता है, और बदलाव लगभग अदृश्य रहता है।

पिछले साल मैंने एक ई-कॉमर्स साइट पर यही किया। बाहरी CDN से लोड होती तीन फ़ॉन्ट फ़ाइलों से हम एक लोकल वेरिएबल फ़ाइल पर आए। Largest Contentful Paint 2.8s से घटकर 1.6s हो गया। सिर्फ़ फ़ॉन्ट। और कोई बदलाव नहीं।

असली मुद्दा: क्या साइट आपकी लगती है?

अब वह हिस्सा जिसे मानना असहज है। अगर आप वही मुफ़्त फ़ॉन्ट इस्तेमाल करते हैं जो सब करते हैं, तो आपकी साइट भी सबकी जैसी ही दिखेगी।

एक SaaS सौंदर्यबोध है जो डिज़ाइनरों के बीच अंदरूनी मज़ाक बन चुका है। टेक्स्ट में Inter, बैंगनी ग्रेडिएंट, आइसोमेट्रिक इलस्ट्रेशन, गोल किनारों वाला "नया" बैज। सुंदर? हाँ। याद रहने वाला? नहीं। ऐसी तीन साइटों के लोगो मैं आपस में बदल दूँ, तो किसी को पता नहीं चलेगा।

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

• बॉडी टेक्स्ट के लिए एक तटस्थ सैन्स, क्योंकि पठनीयता रचनात्मकता दिखाने की जगह नहीं है।
• शीर्षकों के लिए व्यक्तित्व वाला फ़ॉन्ट। कोई सेरिफ़, कोई डिस्प्ले, या अजीब डिटेल वाली कोई ग्रोटेस्क। ब्रांड यहीं दिखता है।
• एकसमान स्केल। छह मनमाने साइज़ नहीं, सिर्फ़ इसलिए कि हर स्क्रीन अलग दिन बनी थी।

दो फ़ॉन्ट का यह मेल, एक तटस्थ और एक राय रखने वाला, 90% मामले हल कर देता है। और मुफ़्त विकल्पों में से ठीक चुनें तो लागत शून्य है।

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

अगर आप अभी कोई प्रोडक्ट बना रहे हैं या दोबारा बना रहे हैं, तो छोटा रास्ता यह है:

पढ़ने से शुरू करें। उम्मीदवार फ़ॉन्ट में अपना असली टेक्स्ट खोलिए, "Lorem ipsum" नहीं। अपने FAQ का एक पैराग्राफ़, एक प्राइसिंग टेबल, एक एरर स्क्रीन। पढ़ते हुए थकान हो तो हटा दीजिए।

अंकों की जाँच करें। ज़्यादातर SaaS रकम, तारीख़ें, मेट्रिक्स दिखाते हैं। अलग-अलग चौड़ाई वाले अंकों से टेबल का कॉलम टेढ़ा हो जाता है। tabular-nums सपोर्ट देखिए। दस सेकंड की यह जाँच एक स्थायी विज़ुअल बग बचा देती है।

स्क्रिप्ट सपोर्ट परखें। देवनागरी में लिखकर देखिए: मात्राएँ, संयुक्ताक्षर, नुक़्ता। कई विदेशी प्रीमियम फ़ॉन्ट यहीं गिर जाते हैं, अक्षरों की जोड़-तोड़ बेढंगी हो जाती है।

डाउनलोड से पहले लाइसेंस पढ़ें। अगर SIL Open Font License है, तो आप आज़ाद हैं: वेब, ऐप, कमर्शियल प्रोडक्ट, ट्रैफ़िक की कोई सीमा नहीं। अगर फ़ाउंड्री लाइसेंस है, तो पेजव्यू वाली लाइन खोजिए और अपने Analytics से मिलाइए। और लाइसेंस की PDF ऐसी जगह रखिए जहाँ आपकी टीम को दो साल बाद मिल जाए।

एक हफ़्ते में तय करें। सच में। फ़ॉन्ट का चुनाव उन बहसों में से है जो अनंत तक खिंचती हैं, क्योंकि राय सबकी होती है और कसौटी किसी के पास नहीं। ऊपर वाली कसौटियाँ तय कीजिए, तीन विकल्प परखिए, चुनिए, आगे बढ़िए। गलत निकले तो बाद में बदला जा सकता है। यह तो एक CSS वेरिएबल है।

आपकी जगह मैं क्या करता

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

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

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

एक क्लाइंट ने मुझे घबराहट भरा ईमेल भेजा: साइट के फ़ॉन्ट की वजह से 4 हज़ार रियाल से ज़्यादा का पिछला बकाया बिल।

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

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

पर पैसा तो छोटा हिस्सा है। गलत तरीके से लोड हुआ फ़ॉन्ट रेंडरिंग रोकता है, लेआउट खिसकाता है और आपके Core Web Vitals गिरा देता है। पिछले साल एक ई-कॉमर्स में मैंने बाहरी CDN की तीन फ़ाइलों की जगह एक लोकल वेरिएबल फ़ाइल रखी: LCP 2.8s से घटकर 1.6s हो गया। और कोई बदलाव नहीं।

और वह सवाल जो लगभग कोई नहीं पूछता: क्या यह फ़ॉन्ट आपकी कंपनी के बारे में कुछ कहता है? अगर जवाब "पता नहीं" है, तो शायद आपकी साइट बाकी सबकी जैसी ही दिखती है।

पूरा तरीका मैंने ब्लॉग पर लिखा है, डाउनलोड करने से पहले लाइसेंस कैसे पढ़ें यह भी। अपना मामला देखना हो तो मुझे लिखिए।

#टाइपोग्राफ़ी #WebPerformance #प्रोडक्टडिज़ाइन #CoreWebVitals #ब्रांडिंग