वेब डिज़ाइन ने ग्राफिक और प्रिंट डिज़ाइन की दुनिया से प्रिंसिपल और परिभाषाओं को हमेशा उधार लिया है। यह विशेष रूप से सच है जब वेब टाइपोग्राफी की बात आती है और जिस तरीके से हम अपने वेब पृष्ठों पर लेटरफॉर्म प्राप्त करते हैं। ये समांतर हमेशा 1 से 1 अनुवाद नहीं होते हैं, लेकिन आप निश्चित रूप से देख सकते हैं कि एक अनुशासन ने दूसरे को प्रभावित किया है। यह विशेष रूप से स्पष्ट होता है जब आप परंपरागत टाइपोग्राफी शब्द "अग्रणी" और सीएसएस संपत्ति के बीच संबंधों को "रेखा-ऊंचाई" के रूप में जाना जाता है।
अग्रणी का उद्देश्य
जब लोग मुद्रित पृष्ठ के लिए टाइपोग्राफी बनाने के लिए मैन्युअल रूप से धातु या लकड़ी के अक्षरों को हैंडसेट करते थे, तो उन पंक्तियों के बीच अंतर बनाने के लिए टेक्स्ट की क्षैतिज रेखाओं के बीच लीड के पतले टुकड़े लगाए गए थे। यदि आप एक बड़ी जगह चाहते थे, तो आप लीड के बड़े टुकड़े डालेंगे। इस प्रकार "अग्रणी" शब्द बनाया गया था। यदि आपने टाइपोग्राफ़िक डिज़ाइन और प्रिंसिपल के बारे में किसी पुस्तक में "अग्रणी" शब्द देखा है, तो यह "प्रकार की लगातार पंक्तियों की बेसलाइनों के बीच की दूरी" के प्रभाव के लिए कुछ पढ़ेगा।
वेब डिजाइन में अग्रणी
डिजिटल डिज़ाइन में, अग्रणी शब्द का उपयोग अभी भी पाठ की रेखाओं के बीच अंतर को संदर्भित करने के लिए किया जाता है। कई कार्यक्रम इस सटीक शब्द का उपयोग करते हैं, भले ही वास्तविक नेतृत्व स्पष्ट रूप से उन कार्यक्रमों में उपयोग नहीं किया जा रहा है। पारंपरिक सिद्धांतों से डिजाइन उधार विचारों के नए रूपों का यह एक बड़ा उदाहरण है, भले ही उस सिद्धांत का सटीक कार्यान्वयन बदल गया हो।
जब वेब डिज़ाइन की बात आती है, तो "अग्रणी" के लिए कोई सीएसएस संपत्ति नहीं होती है। इसके बजाय, सीएसएस प्रॉपर्टी जो पाठ के इस दृश्य प्रदर्शन को संभालती है उसे लाइन-ऊंचाई कहा जाता है। यदि आप चाहते हैं कि टेक्स्ट के क्षैतिज रेखाओं के बीच आपके टेक्स्ट में अतिरिक्त स्थान हो, तो आप इस प्रॉपर्टी का उपयोग करेंगे। उदाहरण के लिए, कहें कि आप अपनी साइट के <मुख्य> तत्व के अंदर सभी अनुच्छेदों के लिए रेखा-ऊंचाई को बढ़ाना चाहते हैं, तो आप ऐसा कर सकते हैं:
मुख्य पी {रेखा-ऊंचाई: 1.5; }पृष्ठ के डिफ़ॉल्ट फ़ॉन्ट आकार (जो आमतौर पर 16px है) के आधार पर यह सामान्य रेखा ऊंचाई 1.5 गुना होगा।
लाइन-ऊंचाई का उपयोग कब करें
जैसा कि ऊपर बताया गया है, अनुच्छेदों या पाठ के अन्य ब्लॉक में पाठ की रेखाओं को अंतरिक्ष में उपयोग करने के लिए लाइन-ऊंचाई उपयुक्त है। यदि रेखाओं के बीच बहुत कम जगह है, तो टेक्स्ट आपकी साइट पर दर्शकों के लिए झुका हुआ और पढ़ना मुश्किल हो सकता है। इसी तरह, यदि लाइनों को पृष्ठ पर बहुत दूर रखा गया है, तो पढ़ने का सामान्य प्रवाह बाधित हो जाएगा और पाठकों को उस कारण से आपके टेक्स्ट में परेशानी होगी। यही कारण है कि आप उपयोग करने के लिए लाइन-ऊंचाई रिक्ति की उपयुक्त मात्रा को खोजना चाहते हैं। आप पृष्ठ की पठनीयता पर अपनी प्रतिक्रिया प्राप्त करने के लिए वास्तविक उपयोगकर्ताओं के साथ अपने डिज़ाइन का परीक्षण भी कर सकते हैं।
लाइन-ऊंचाई का उपयोग न करें
पैडिंग या मार्जिन के साथ लाइन-ऊंचाई को भ्रमित न करें जिसका उपयोग आप अपने पृष्ठ के डिज़ाइन में व्हाइटस्पेस जोड़ने के लिए करेंगे, जिसमें शीर्षक या पैराग्राफ के नीचे भी शामिल है। वह दूरी अग्रणी नहीं है, और इसलिए इसे लाइन-ऊंचाई से नियंत्रित नहीं किया जाता है।
यदि आप कुछ पाठ तत्वों के तहत स्थान जोड़ना चाहते हैं, तो आप मार्जिन या पैडिंग का उपयोग करेंगे। हमारे द्वारा उपयोग किए गए पिछले सीएसएस उदाहरण पर वापस जाकर, हम इसे जोड़ सकते हैं:
मुख्य पी {रेखा-ऊंचाई: 1.5; मार्जिन-तल: 24 पीएक्स; } हमारे पृष्ठ के पैराग्राफ (
लगभग सभी मामलों में, यह पिछले सीएसएस के समान प्रदर्शित होगा।
मान लें कि आप "सेवा-मेनू" की कक्षा के साथ सूची में मौजूद सूची आइटम के नीचे अंतर जोड़ना चाहते हैं, तो आप ऐसा करने के लिए मार्जिन या पैडिंग का उपयोग करेंगे, लाइन ऊंचाई नहीं। तो यह उचित होगा।
। सेवा-मेनू ली {<पैडिंग-तल: 30 पीएक्स; }आप केवल पंक्ति-ऊंचाई का उपयोग करेंगे यदि आप सूची-वस्तुओं के अंदर पाठ की दूरी को सेट करना चाहते हैं, मानते हैं कि उनके पास टेक्स्ट की लंबी दौड़ थी जो प्रत्येक बुलेट बिंदु के लिए कई पंक्तियों तक चल सकती थी।