Nebula Sans: आपके SaaS के लिए मुफ़्त फ़ॉन्ट

आपके प्रोडक्ट में सात स्क्रीन हैं और पाँच अलग-अलग फ़ॉन्ट। यह किसी ने चुना नहीं था। बस होता चला गया: डेवलपर ने फ़्रेमवर्क का डिफ़ॉल्ट फ़ॉन्ट लगाया, फ़्रीलांस डिज़ाइनर दूसरा ले आया, किसी ने लाइब्रेरी का एक कंपोनेंट चिपकाया जो तीसरा फ़ॉन्ट लेकर आया, और ट्रांज़ैक्शनल ईमेल Arial में निकल गया क्योंकि किसी ने देखा ही नहीं। Nebula Sans, इंटरफ़ेस के लिए बनी एक मुफ़्त और ओपन सोर्स फ़ॉन्ट, इसका बड़ा हिस्सा एक ही फ़ैसले से सुलझा देती है। और यही वह फ़ैसला है जिसे ज़्यादातर छोटे SaaS तब तक टालते हैं जब तक वह दोबारा काम बनकर सामने न आ जाए।

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

आपके SaaS की फ़ॉन्ट मामूली बात क्यों नहीं है

SaaS 90% टेक्स्ट होता है। फ़ील्ड का नाम, बटन, टेबल, एरर मैसेज, डैशबोर्ड का नंबर, बिलिंग की चेतावनी। यूज़र पूरा दिन वही पढ़ता है जो आपने लिखा है, छोटी स्क्रीन पर, जल्दबाज़ी में, अक्सर मोबाइल पर किसी और काम के बीच।

जब फ़ॉन्ट इंटरफ़ेस के लिए खराब होती है, उसकी कीमत ऐसी जगहों पर दिखती है जिन्हें कोई डिज़ाइन से नहीं जोड़ता:

• 1 दिखता है l जैसा और ग्राहक गलत कोड टाइप कर देता है।
• कॉलम में नंबर एक सीध में नहीं आते, और बिलिंग टेबल की तुलना करना मुश्किल हो जाता है।
• 12px का टेक्स्ट धुंधला दिखता है, और इंसान पढ़ने के बजाय ज़ूम बढ़ाता है।
• "semibold" वेट होता ही नहीं, तो सब कुछ या तो बहुत पतला है या बहुत भारी।

इनमें से कुछ भी प्रोडक्ट को गिराता नहीं। बस उसे शौकिया दिखाता है और ज़्यादा थकाता है। थकान सपोर्ट टिकट बनती है, और सपोर्ट टिकट ऐसी लागत बनता है जिसका नाम और उपनाम दोनों होता है।

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

Nebula Sans क्या लाती है

Nebula Sans एक नियो-ग्रोटेस्क सैन्स-सेरिफ़ है, वही परिवार जिसे Helvetica ने लोकप्रिय किया। तटस्थ आकार, बिना चीखते व्यक्तित्व के, इस तरह बनी कि खुद गायब हो जाए और कंटेंट सामने आए। यह मुफ़्त है, ओपन सोर्स है, और व्यावसायिक उपयोग के लिए खुली है।

प्रोडक्ट के लिए जो बिंदु मायने रखते हैं:

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

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

अच्छी फ़ॉन्ट वही है जो आपको दिखती ही नहीं। अगर यूज़र का ध्यान फ़ॉन्ट पर गया, तो उसने बाधा डाली।

"पर क्या मुफ़्त फ़ॉन्ट खराब नहीं होती?"

दस साल पहले होती थी। मुफ़्त फ़ॉन्ट का मतलब था तीन वेट, टेढ़े एक्सेंट और ऐसा ç जो टेप से चिपकाया लगता था।

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

मैं जो टेस्ट करता हूँ वह हमेशा एक ही है, और आप उसे पाँच मिनट में कर सकते हैं:

1. अपने प्रोडक्ट का सबसे उबाऊ टेक्स्ट उस फ़ॉन्ट में लिखिए। कुछ ऐसा: "भुगतान संसाधित नहीं हो सका। कार्ड की जानकारी जाँचें और फिर कोशिश करें।"
2. उसे 13px में रखिए, मध्यम ग्रे रंग, सफ़ेद बैकग्राउंड।
3. मोबाइल पर देखिए, कम ब्राइटनेस के साथ।
4. बगल में मूल्यों का एक कॉलम लिखिए: 1,480.00 / 990.00 / 12,375.50.

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

और एक उबाऊ हिस्सा है जिसे लगभग कोई नहीं जाँचता: आपकी भाषा के अक्षर और चिह्न। हिंदी में मात्राएँ, नुक़्ते और संयुक्ताक्षर होते हैं। बहुत सी विदेशी फ़ॉन्ट इन्हें सजावट मानती हैं। अगर मात्रा अक्षर से चिपक जाए या छोटे साइज़ में नुक़्ता गायब हो जाए, आपका प्रोडक्ट Google Translate से अनूदित लगेगा। कुछ भी तय करने से पहले "सदस्यता की जानकारी उपलब्ध नहीं है" लिखकर जाँचिए।

छिपी लागत: वज़न और गति

यहाँ वह हिस्सा आता है जो सीधे राजस्व पर असर डालता है।

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

मैं व्यवहार में क्या करता हूँ:

• ज़्यादा से ज़्यादा दो या तीन वेट लोड करता हूँ। Regular, medium और bold किसी भी इंटरफ़ेस का 95% हल कर देते हैं।
• woff2 फ़ॉर्मेट इस्तेमाल करता हूँ, जो सबसे हल्का है और हर ज़रूरी जगह चलता है।
• फ़ॉन्ट अपने ही डोमेन पर होस्ट करता हूँ, बाहरी सेवा से खींचने के बजाय। एक निर्भरता कम, एक रिक्वेस्ट कम, और कोई मुफ़्त में आपके यूज़र को ट्रैक भी नहीं करता।
• एक सिस्टम फ़ॉन्ट को बैकअप के तौर पर तय करता हूँ, ताकि मुख्य फ़ॉन्ट लोड होते समय टेक्स्ट तुरंत दिख जाए।

इससे पहला पढ़ने लायक टेक्स्ट आने का समय आमतौर पर आधा रह जाता है। यह किसी नर्ड का माइक्रो-ऑप्टिमाइज़ेशन नहीं है: यही तय करता है कि विज़िटर रुकेगा या टैब बंद कर देगा।

एक फ़ैसला, कोई प्रोजेक्ट नहीं

मैं चाहता हूँ कि ज़्यादा लोग यह समझें: टाइपोग्राफी मानकीकृत करना जल्दी करने पर सस्ता है और देर से करने पर महंगा।

जल्दी: आप एक परिवार चुनते हैं, पाँच साइज़ तय करते हैं, तीन वेट, और यह सब एक फ़ाइल में लिख देते हैं। आधे दिन का काम।

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

जो स्केल मैं लगभग हमेशा इस्तेमाल करता हूँ, और जो किसी भी SaaS के लिए काफ़ी है:

• 12px कैप्शन
• 14px इंटरफ़ेस बॉडी
• 16px पढ़ने वाली बॉडी
• 20px सेक्शन शीर्षक
• 28px पेज शीर्षक

पाँच साइज़। अगर आपको छठा चाहिए, तो समस्या शायद लेआउट की है, टाइपोग्राफी की नहीं।

इसे इस हफ़्ते कैसे लागू करें

अगर आप कोई प्रोडक्ट चलाते हैं और यहाँ तक यह सोचते हुए पढ़ आए कि "मेरा तो सच में बिखरा हुआ है", सबसे दिखने वाली चीज़ से शुरू कीजिए:

1. वह स्क्रीन खोलिए जिसे आपके ग्राहक सबसे ज़्यादा इस्तेमाल करते हैं। सिर्फ़ वही।
2. गिनिए कि वहाँ कितने टेक्स्ट साइज़ और वेट दिखते हैं।
3. उन्हें घटाकर ज़्यादा से ज़्यादा चार संयोजनों तक लाइए।
4. एक ही फ़ॉन्ट परिवार चुनिए, लागू कीजिए, और अगले हफ़्ते अगली स्क्रीन पर बढ़िए।

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

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

आपके SaaS में सात स्क्रीन हैं और पाँच अलग-अलग फ़ॉन्ट। यह किसी ने चुना नहीं था, बस होता चला गया।

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

छोटी बात लगती है। पर SaaS 90% टेक्स्ट ही होता है। जब "1" दिखता है "l" जैसा, ग्राहक गलत कोड टाइप करता है। जब नंबर एक सीध में नहीं आते, बिलिंग टेबल अंदाज़े का खेल बन जाती है। यह सपोर्ट टिकट बनता है, और टिकट की लागत का नाम और उपनाम दोनों होते हैं।

अच्छी खबर: आज यह मुफ़्त और ओपन सोर्स फ़ॉन्ट से हल हो जाता है, जैसे Nebula Sans। पूरे वेट, टैबुलर नंबर, बिना किसी छिपी शर्त वाला लाइसेंस।

टाइपोग्राफी मानकीकृत करने में आधा दिन लगता है, अगर आप जल्दी करें। बाद के लिए छोड़ा तो वह डिज़ाइन नहीं रहता, पुरातत्व बन जाता है।

अगर आपका प्रोडक्ट काम तो करता है पर कुछ भी एक ही जगह का नहीं लगता, मुझे लिखिए। हम देखते हैं कि पहले क्या ठीक करना है।

#SaaS #टाइपोग्राफी #प्रोडक्टडिज़ाइन #UX #MicroSaaS