टाइपोग्राफी स्केल जनरेटर
बेस साइज़ और रेशियो से मॉड्यूलर टाइप स्केल बनाएं, मोबाइल के लिए छोटे रेशियो के साथ। अपने फ़ॉन्ट में प्रीव्यू देखें और CSS, SCSS या Tailwind फ़ॉन्ट साइज़ एक्सपोर्ट करें।
टाइपोग्राफी स्केल जनरेटर लोड हो रहा है…
आपकी फ़ाइलें कभी आपके डिवाइस से बाहर नहीं जातीं
टाइपोग्राफी स्केल जनरेटर का इस्तेमाल कैसे करें
- 1
इस पेज पर टाइपोग्राफी स्केल जनरेटर खोलें। यह सीधे आपके ब्राउज़र में लोड होता है।
- 2
अपनी फ़ाइल, टेक्स्ट या वैल्यू जोड़ें और सेटिंग बदलें।
- 3
नतीजा कॉपी या डाउनलोड करें। कुछ भी अपलोड या स्टोर नहीं होता।
इस टूल के बारे में
टाइप स्केल फ़ॉन्ट साइज़ का ऐसा सेट है जो एक ही रेशियो से बढ़ता है, ताकि हेडिंग, बॉडी टेक्स्ट और कैप्शन बेतरतीब नहीं बल्कि आपस में जुड़े हुए लगें। यह टाइपोग्राफी स्केल जनरेटर बेस साइज़ और रेशियो से स्केल की गणना करता है, आपके चुने हुए फ़ॉन्ट में असली टेक्स्ट के साथ उसका प्रीव्यू दिखाता है, और साइज़ को कोड के रूप में एक्सपोर्ट करता है।
टाइप स्केल कैसे बनाएं
- बेस साइज़ सेट करें, आमतौर पर बॉडी टेक्स्ट के लिए 16px।
- एक रेशियो चुनें, माइनर सेकंड (1.067) से परफ़ेक्ट फ़िफ़्थ (1.5), गोल्डन रेशियो (1.618) और उससे आगे तक।
- ऊपर के स्टेप (हेडिंग) और नीचे के स्टेप (छोटा टेक्स्ट) की संख्या सेट करें।
- छोटा मोबाइल रेशियो सेट करें ताकि हेडिंग छोटी स्क्रीन पर हावी न हों।
- फ़ॉन्ट चुनें और प्रीव्यू के लिए सैंपल टेक्स्ट लिखें, फिर CSS, SCSS या Tailwind कोड कॉपी करें।
रेशियो कैसे चुनें
| रेशियो | नाम | प्रभाव |
|---|---|---|
| 1.125 | मेजर सेकंड | हल्का, घने ऐप्स के लिए अच्छा |
| 1.2 | माइनर थर्ड | संतुलित, वेबसाइटों में आम |
| 1.25 | मेजर थर्ड | ब्लॉग के लिए साफ़ हायरार्की |
| 1.333 | परफ़ेक्ट फ़ोर्थ | मज़बूत हेडिंग |
| 1.5 से 1.618 | परफ़ेक्ट फ़िफ़्थ, गोल्डन रेशियो | नाटकीय, लैंडिंग पेज के लिए |
16px और 1.25 के साथ उदाहरण
12.8px, 16px, 20px, 25px, 31.25px, 39.06px, 48.83px। हर साइज़ पिछले साइज़ को 1.25 से गुणा करके बनता है।
सुझाव
- मोबाइल पर हल्का रेशियो इस्तेमाल करें, जैसे फ़ोन पर 1.2 और डेस्कटॉप पर 1.333।
- अपने फ़ाइनल डिज़ाइन टोकन में साइज़ को राउंड करें, पूरे या आधे पिक्सेल तक।
- साइज़ के साथ लाइन हाइट तय करें: बॉडी टेक्स्ट के लिए लगभग 1.5 और बड़ी हेडिंग के लिए 1.1 से 1.25।
- CSS में rem यूनिट इस्तेमाल करें ताकि टेक्स्ट यूज़र के ब्राउज़र की फ़ॉन्ट सेटिंग का सम्मान करे।
अपने डिज़ाइन सिस्टम को ग्रिड सिस्टम जनरेटर के ग्रिड और कलर पैलेट जनरेटर के रंगों से पूरा करें।
अक्सर पूछे जाने वाले सवाल
मॉड्यूलर टाइप स्केल क्या है?
फ़ॉन्ट साइज़ का ऐसा सेट जिसमें हर साइज़ पिछले साइज़ को एक ही रेशियो से गुणा करके बनता है, जिससे एक जैसी विज़ुअल लय मिलती है।
मुझे कौन सा बेस फ़ॉन्ट साइज़ इस्तेमाल करना चाहिए?
16px ब्राउज़र का डिफ़ॉल्ट है और ज़्यादातर वेबसाइटों पर बॉडी टेक्स्ट के लिए अच्छा बेस है।
कौन सा रेशियो सबसे अच्छा है?
कोई एक सबसे अच्छा नहीं है। ज़्यादातर वेबसाइटों के लिए 1.2 या 1.25 ठीक है; घने इंटरफ़ेस के लिए 1.125 काम करता है; 1.333 और उससे ऊपर नाटकीय हेडिंग देते हैं।
मोबाइल पर अलग रेशियो क्यों इस्तेमाल करें?
बड़े रेशियो से छोटी स्क्रीन पर हेडिंग बहुत बड़ी हो जाती हैं। छोटा मोबाइल रेशियो हायरार्की बनाए रखता है और स्क्रीन में फ़िट रहता है।
क्या मैं Tailwind में एक्सपोर्ट कर सकता हूं?
हां। अपने स्केल के साथ fontSize कॉन्फ़िग पाने के लिए Tailwind फ़ॉर्मेट चुनें।
फ़ॉन्ट साइज़ px में हों या rem में?
CSS में rem की सलाह दी जाती है क्योंकि यह यूज़र की ब्राउज़र सेटिंग के साथ स्केल होता है। टूल आपको rem के रूप में इस्तेमाल करने लायक वैल्यू दे सकता है।