टाइप स्केल जेनरेटर
अपने डिज़ाइन के लिए एक मॉड्यूलर टाइप स्केल बनाएं। परफेक्ट प्रोपोर्शन वाले हेडिंग साइज़ बनाने के लिए बेस साइज़ और रेशियो चुनें।
मॉड्यूलर टाइप स्केल क्या है?
मॉड्यूलर टाइप स्केल फ़ॉन्ट साइज़ का एक सेट है जो एक सुसंगत गणितीय अनुपात का पालन करता है - उदाहरण के लिए Major Third (1.25x) या Perfect Fourth (1.333x)। मनमाने ढंग से साइज़ चुनने की बजाय, h1 से h6 तक हर हेडिंग इसके नीचे वाले से आनुपातिक रूप से बड़ा होता है। परिणाम टाइपोग्राफी है जो सामंजस्यपूर्ण और दृश्यात्मक रूप से संतुलित महसूस होती है।
सही अनुपात कैसे चुनें
Minor Second (1.067) या Major Second (1.125) जैसे छोटे अनुपात सूक्ष्म, कॉम्पैक्ट स्केल बनाते हैं - घने UI के लिए अच्छे। Perfect Fourth (1.333) या Golden Ratio (1.618) जैसे बड़े अनुपात नाटकीय कंट्रास्ट बनाते हैं - एडिटोरियल साइटों के लिए आदर्श। Major Third (1.25) एक सुरक्षित डिफ़ॉल्ट है जो अधिकांश स्क्रीन साइज़ पर अच्छा काम करता है।
जेनरेट किए गए CSS का उपयोग करना
Generated CSS पैनल :root में CSS कस्टम प्रॉपर्टी (जैसे --text-h1) और प्रत्येक हेडिंग स्तर के लिए डायरेक्ट सिलेक्टर आउटपुट करता है। अपने स्टाइलशीट में कॉपी और पेस्ट करें। फ्लुइड, एक्सेसिबल साइज़िंग के लिए rem टॉगल उपयोग करें जो ब्राउज़र फ़ॉन्ट प्राथमिकता के साथ स्केल करता है, या px यदि आपके डिज़ाइन को फिक्स्ड साइज़ की आवश्यकता है।
टाइप स्केल और एक्सेसिबिलिटी
px की बजाय rem यूनिट का उपयोग करने से आपकी टाइपोग्राफी उपयोगकर्ता की सिस्टम फ़ॉन्ट साइज़ प्राथमिकता के साथ स्केल होती है, जो एक महत्वपूर्ण एक्सेसिबिलिटी विचार है। WCAG सिफारिश करता है कि टेक्स्ट को कंटेंट या कार्यक्षमता खोए बिना 200% तक रिसाइज़ किया जा सके। rem यूनिट के साथ एक अच्छी तरह से संरचित टाइप स्केल इस आवश्यकता को स्वचालित रूप से पूरा करता है।