गोल्डन रेशियो, मेजर थर्ड और अन्य क्लासिक अनुपातों के साथ सामंजस्यपूर्ण मॉड्यूलर टाइप स्केल बनाएं। आकारों का विज़ुअल प्रीव्यू और पूरा CSS कॉपी करें।
टाइपोग्राफी स्केल फ़ॉन्ट आकारों का एक सेट है जो लगातार गणितीय अनुपात का पालन करता है। आकारों को बेतरतीब ढंग से चुनने के बजाय, प्रत्येक चरण को समान अनुपात से गुणा किया जाता है - शीर्षकों, मुख्य पाठ और कैप्शन में दृश्य लय और पदानुक्रम बनाना।
एक आधार आकार चुनें (16px ब्राउज़र डिफ़ॉल्ट और एक ठोस प्रारंभिक बिंदु है), फिर एक अनुपात चुनें। 1.125 जैसे छोटे अनुपात संपादकीय साइटों के लिए सूक्ष्म, सुंदर पैमाने बनाते हैं; 1.618 जैसे बड़े अनुपात विपणन पृष्ठों के लिए नाटकीय विरोधाभास पैदा करते हैं।
टाइपोग्राफिक स्केल फॉन्ट साइज़ का एक निश्चित समूह है जो एक ही गणितीय अनुपात का पालन करता है, ताकि हर पायदान अगले से उसी अनुपात में जुड़ा रहे। आँख से साइज़ चुनने के बजाय — 14, 17, 22, 31... — आप एक आधार साइज़ चुनकर उसे बार-बार अनुपात से गुणा (या भाग) करते हैं: 16 × 1.25 = 20, × 1.25 = 25, और आगे। नतीजा एक ऐसी पदानुक्रम है जो सोची-समझी लगती है: शीर्षक, मुख्य पाठ, कैप्शन और लेबल सब एक ही डिज़ाइन सिस्टम के सदस्य लगते हैं, बिखरे हुए साइज़ का ढेर नहीं।
आम अनुपात अलग-अलग व्यवहार करते हैं। 1.125 और 1.2 सूक्ष्म, सुरुचिपूर्ण पायदान बनाते हैं — टेक्स्ट-भारी घने इंटरफ़ेस के लिए आदर्श। 1.25 और 1.333 वेब के मेहनती घोड़े हैं: बिना नाटक के स्पष्ट पदानुक्रम, और 1.333 संयोग से शास्त्रीय संगीत का शुद्ध चतुर्थ भी है। 1.5 कंटेंट साइटों के लिए साहसिक छलांग देता है। 1.618 — गोल्डन रेशियो — आकर्षक पर आक्रामक है: डिस्प्ले हेडिंग और मार्केटिंग पेजों के लिए सुंदर, लंबे पाठन के लिए अक्सर बहुत ज़्यादा।
16px ब्राउज़र का डिफ़ॉल्ट है और डेस्कटॉप मुख्य पाठ का सही शुरुआती बिंदु: यह छपी किताबों के पढ़ने के आराम से मेल खाता है, अधिकांश उपयोगकर्ताओं के लिए पठनीय है, और सुलभता दिशानिर्देशों से सहमत है। मोबाइल इंटरफ़ेस थोड़ा छोटा (15px) शुरू कर सकते हैं या 16px पर रह सकते हैं। आधार तय होते ही बाकी सब उससे निकलता है — शीर्षक ऊपर गुणा से, कैप्शन और लेबल नीचे भाग से — आधार में एक बदलाव पूरी पदानुक्रम को लगातार फिर से ट्यून कर देता है।
स्केल सिर्फ़ फॉन्ट साइज़ नहीं है। टेक्स्ट छोटा होने पर लाइन हाइट बढ़नी चाहिए: मुख्य पाठ 1.5–1.6, शीर्षक 1.2–1.4। वर्टिकल रिदम के लिए आधार साइज़ को स्केल अनुपात से गुणा कर स्पेसिंग पायदान बनाएँ — यदि स्केल 16/20/25/31 है, तो वही संख्याएँ मार्जिन और पैडिंग के इन्क्रीमेंट का काम करती हैं। जब फॉन्ट साइज़ और स्पेसिंग एक अनुपात साझा करते हैं, तो हर तत्व एक अदृश्य ग्रिड पर बैठता है और पेज जोड़ा हुआ नहीं, रचा हुआ लगता है।
टेक्स्ट को मोबाइल और डेस्कटॉप के बीच सहजता से बहना चाहिए। आधुनिक CSS इसे एक पंक्ति में करता है: font-size: clamp(1rem, 0.7rem + 1.2vw, 1.75rem) — न्यूनतम, बहता मध्य, अधिकतम। न्यूनतम और अधिकतम अपनी स्केल से लें (जैसे 16px से 28px) और व्यूपोर्ट पद बाकी संभाल लेता है — बिना किसी मीडिया क्वेरी के शीर्षक फोन पर सुंदरता से सिकुड़ते हैं और मॉनिटर पर बढ़ते हैं।
केसरिया से लेकर नील तक, भारतीय रंग त्योहारों, वस्त्रों और प्रकृति से जन्मे हैं। होली के गुलाल, मेंहदी की हरियाली और मंदिरों का सिंदूरी — हर रंग की एक कहानी है।
तिरंगे का केसरिया — साहस और बलिदान का प्रतीक
तिरंगे का हरा — उर्वरता और समृद्धि
तिरंगे के केंद्र में धर्म चक्र का नीला
जयपुर का गुलाबी शहर और राजस्थानी पगड़ियाँ
हल्दी का पीला — शुभता और विवाह का रंग
साधुओं के वस्त्र और मंदिरों का मिट्टी रंग
प्राचीन भारत का नील रंग — नील की खेती से
सिंदूर का लाल — सुहाग और शक्ति का प्रतीक
गेंदे के फूलों का नारंगी — पूजा और त्योहार
मेहंदी की हरियाली — शादी और तीज का रंग