टाइपोग्राफी टेस्टर क्या है?

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

इस टेस्टर में फ़ॉन्ट फ़ैमिली, साइज़, वज़न (100 से 900), लाइन हाइट, लेटर स्पेसिंग, वर्ड स्पेसिंग, अलाइन्मेंट, टेक्स्ट ट्रांसफ़ॉर्म और रंग सब बदला जा सकता है। सैम्पल टेक्स्ट संपादन योग्य है, तो असली हेडलाइन या पैराग्राफ़ का प्रीव्यू मिल जाता है, और नीचे CSS आउटपुट पैनल एक क्लिक में स्टाइलशीट या styled component में चिपकाने लायक रहता है।

उपयोग कैसे करें

1. प्रीव्यू एरिया में अपना सैंपल टेक्स्ट दर्ज करें या पेस्ट करें।
2. टाइपोग्राफी कंट्रोल एडजस्ट करें: फ़ॉन्ट फैमिली, साइज़, वेट, लाइन हाइट, लेटर स्पेसिंग, और वर्ड स्पेसिंग।
3. अपने प्रोजेक्ट में सीधे टाइपोग्राफी सेटिंग्स का उपयोग करने के लिए CSS आउटपुट कॉपी करें।

कब उपयोग करें

• ब्लॉग के पैराग्राफ़ को Inter 18px और 1.6 लाइन हाइट पर सेट कर मोबाइल पर पढ़ने में आराम जाँचना।
• लम्बा लेख 16, 17 और 18px में बारी-बारी से देखकर तय करना कि कौन-सा साइज़ पाठक को बाँधे रखता है।
• ऑल-कैप्स बटन के लेबल का घुटा-घुटा दिखना लेटर-स्पेसिंग बढ़ाने से सुलझता है या नहीं देखना।

परिणाम

एक वेब डिज़ाइनर 1.6 लाइन हाइट और 0.02em लेटर स्पेसिंग के साथ 18px पर "Inter" टेस्ट करता है, फिर अपने ब्लॉग स्टाइलशीट के लिए CSS कॉपी करता है।

अक्सर पूछे जाने वाले प्रश्न

बॉडी टेक्स्ट के लिए कितनी लाइन हाइट ठीक रहती है?

16-18 px के लम्बे पैराग्राफ़ों में 1.5 से 1.7 की लाइन हाइट स्क्रीन पर आराम से पढ़ी जाती है। हेडिंग के लिए थोड़ी कसी हुई वैल्यू, आम तौर पर 1.1 से 1.3, अच्छी लगती है। सैम्पल बॉक्स में हेडिंग और पैराग्राफ़ दोनों डालकर तुलना करें।

लेटर स्पेसिंग px के बजाय em में क्यों?

em फ़ॉन्ट साइज़ के साथ स्केल होता है, इसलिए 0.02em 14px पर भी और 48px पर भी अनुपात में एक जैसा दिखता है। पिक्सेल वैल्यू एक साइज़ पर ठीक लगती है तो दूसरी पर भद्दी लगने लगती है।

वेब पर कौन-कौन से फ़ॉन्ट वज़न सुरक्षित हैं?

नए Google Fonts और वैरिएबल फ़ॉन्ट 100 से 900 तक देते हैं, पर बहुत से सेल्फ़-होस्टेड फ़ॉन्ट में सिर्फ़ 400 और 700 आते हैं। वज़न बदलने पर प्रीव्यू न बदले तो उस फ़ॉन्ट में वो वज़न ही नहीं है और ब्राउज़र नकली स्टाइल बना देता है।

क्या पेज पर पहले से लोड न हुए फ़ॉन्ट भी टेस्ट कर सकते हैं?

अंदर दिए फ़ॉन्ट मेन्यू से चुनें — इसमें सर्च बॉक्स और सैन्स / सेरिफ़ / मोनोस्पेस / सिस्टम फ़िल्टर हैं, और चुना हुआ कोई भी Google Font अपने-आप लोड हो जाता है। «गैलरी» व्यू पर जाकर अपना नमूना टेक्स्ट एक साथ सभी फ़ॉन्ट में देखें, या «तुलना» चालू करके दो टाइपफ़ेस अगल-बगल रखें। कस्टम फ़ॉन्ट फ़ाइल अपलोड यहाँ समर्थित नहीं है, उसके लिए अपनी साइट पर @font-face लगाना होगा।

CSS को React या Tailwind प्रोजेक्ट में कैसे ले जाएँ?

«Copy CSS» दबाने पर हर प्रॉपर्टी सामान्य डिक्लेरेशन की तरह मिलती है। React में styled-components के टेम्पलेट लिटरल में पेस्ट करें या हर लाइन को camelCase कुंजी में बदल लें। Tailwind में साइज़ और वज़न को यूटिलिटी क्लास से जोड़ें और कस्टम स्पेसिंग/लाइन हाइट को आरबिट्ररी वैल्यू सिंटैक्स में रखें।

संबंधित उपकरण