टाइपोग्राफी स्केल जनरेटर

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

टाइपोग्राफी स्केल जनरेटर एक बेस आकार और एक मॉड्यूलर अनुपात को एक पूर्ण, गणितीय रूप से सुसंगत टाइप स्केल में बदल देता है, जिसमें ज़रूरत के मुताबिक जितने चाहें बड़े शीर्षक चरण और छोटे कैप्शन चरण होते हैं। सादे फ़ॉन्ट आकारों के अलावा यह हर चरण के लिए मिलती-जुलती लाइन-हाइट और लेटर-स्पेसिंग निकालता है, साथ ही एक वैकल्पिक फ्लूइड clamp() एक्सप्रेशन बनाता है जो एक अलग मोबाइल अनुपात का उपयोग करते हुए मोबाइल और डेस्कटॉप व्यूपोर्ट के बीच इंटरपोलेट करता है। डिज़ाइनर और फ्रंट-एंड डेवलपर इसका उपयोग किसी डिज़ाइन सिस्टम के टाइप टोकन बनाने, आकारों को सुसंगत रखने, और तैयार CSS, Sass, Tailwind या JSON पेस्ट करने के लिए करते हैं। कोई भी कस्टम अनुपात टाइप करें या क्लासिक चुनें, बेस आकार और इकाई (px या rem) सेट करें, अपनी font-family में पूर्वावलोकन करें, फिर ज़रूरी प्रारूप कॉपी करें।

टाइपोग्राफी स्केल जनरेटर का उपयोग कैसे करें

1. अनुपात फ़ील्ड में कोई भी कस्टम अनुपात टाइप करें, या सेटिंग्स में प्रीसेट ड्रॉपडाउन से परफेक्ट फोर्थ (1.333) जैसा क्लासिक चुनें।
2. बेस आकार सेट करें; यह बॉडी टेक्स्ट का आकार और स्केल का आधार बन जाता है।
3. सेटिंग्स में चुनें कि कितने बड़े और छोटे चरण बनाने हैं; छोटे चरण बेस के नीचे कैप्शन और बारीक टेक्स्ट के लिए रहते हैं।
4. बेस और टाइट लाइन-हाइट तथा बड़े आकारों पर लेटर-स्पेसिंग समायोजित करें, और अपनी टाइपफेस में स्केल देखने के लिए एक font-family दर्ज करें।
5. रेस्पॉन्सिव टाइप के लिए न्यूनतम और अधिकतम व्यूपोर्ट चौड़ाई और एक मोबाइल अनुपात सेट करके फ्लूइड clamp() स्केल बनाएं।
6. आउटपुट प्रारूप को CSS वेरिएबल, फ्लूइड clamp(), Sass, Tailwind कॉन्फ़िग और JSON के बीच बदलें, फिर कोड या किसी एकल चरण का आकार कॉपी करें।

उदाहरण

अनुपात 1.333, बेस 16px, 5 ऊपर / 1 नीचे

--font-size-2xl: 37.897px; --line-height-2xl: 1.27; --letter-spacing-2xl: -0.017em;

बेस 16px, अनुपात 1.333, मोबाइल अनुपात 1.2, 320-1240px

--font-size-2xl: clamp(27.648px, 24.083px + 1.114vw, 37.897px);

कोई भी स्केल, Tailwind निर्यात

fontSize: { base: ['16px', { lineHeight: '1.5', letterSpacing: '0em' }] }

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

क्या मैं सिर्फ़ प्रीसेट नहीं, बल्कि कस्टम अनुपात उपयोग कर सकता हूँ?

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

छोटे (ऋणात्मक) चरण कैसे काम करते हैं?

स्केल बेस आकार (चरण 0) पर टिका होता है। बड़े चरण बेस को अनुपात से गुणा करते हैं, जबकि छोटे उसे भाग करते हैं, जिससे बेस के नीचे sm और xs जैसे कैप्शन और बारीक टेक्स्ट के आकार बनते हैं। कितने बड़े और छोटे चरण चाहिए, यह सेटिंग्स में तय करें।

लाइन-हाइट और लेटर-स्पेसिंग की गणना कैसे होती है?

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

फ्लूइड clamp() स्केल क्या है?

यह हर चरण के लिए एक font-size: clamp() बनाता है जो न्यूनतम और अधिकतम व्यूपोर्ट चौड़ाई के बीच सहज रूप से बढ़ता है, अधिकतम चौड़ाई पर आपका मुख्य अनुपात और न्यूनतम पर एक अलग मोबाइल अनुपात उपयोग करता है। इसे निर्यात करने के लिए आउटपुट प्रारूप CSS clamp() चुनें।

क्या मेरा कोई डेटा किसी सर्वर पर भेजा जाता है?

नहीं। पूरा स्केल, जिसमें आकार, लाइन-हाइट, लेटर-स्पेसिंग और फ्लूइड clamp() मान शामिल हैं, आपके ब्राउज़र में सरल अंकगणित से स्थानीय रूप से गणना होता है। कुछ भी अपलोड नहीं होता, इसलिए यह टूल ऑफ़लाइन काम करता है और आपकी सेटिंग्स को निजी रखता है।