वेब डिज़ाइन में वर्टिकल रिदम / बेसलाइन ग्रिड

Question

मैंने हाल ही में वेब डिज़ाइन में अच्छी टाइपोग्राफी के लिए अच्छी ऊर्ध्वाधर लय के महत्व के बारे में / बेसलाइन ग्रिड का उपयोग करने के बारे में कुछ लेख पढ़े। मैंने बेसलाइन ग्रिड का उपयोग करने का प्रयास करने का फैसला किया, जैसे नीचे चित्रित 960 ग्रिड, वेब डिज़ाइन / वर्डप्रेस थीम के लिए पृष्ठभूमि छवि के रूप में मैं वर्तमान में काम कर रहा हूं।

मुझे ग्रिड के भीतर सब कुछ ठीक से प्राप्त करना बहुत मुश्किल हो रहा है। मैं डिफ़ॉल्ट पाठ-आकार (16px) में ऊर्ध्वाधर ग्रिड के भीतर सब कुछ प्राप्त करने में कामयाब रहा, लेकिन जैसा कि मैंने शीर्षकों के आकार के साथ खिलवाड़ करना शुरू कर दिया है, चित्र आदि जोड़ना, आइटम हमेशा ग्रिड पर ठीक से संरेखित नहीं रहते हैं।

मैं यह जानना चाहूंगा कि ऊर्ध्वाधर लय का उपयोग करके अपनी टाइपोग्राफी कैसे सुधारें। क्या किसी के पास कोई सुझाव या तकनीक है जिसका मुझे उपयोग करना चाहिए?

Answer 1

वेब डिज़ाइन में बेसलाइन ग्रिड एक ज़रूरत अकादमिक पहेली है लेकिन ज्यादातर हार्ड-कोडेड गणितीय दृष्टिकोण से अव्यवहारिक है। चूंकि सीएसएस के पास प्रकार के लिए आधार रेखा की कोई अवधारणा नहीं है, इसलिए आधारभूत रूप से मिलान करना तकनीकी रूप से असंभव है।

आप चीजों को बदलने के करीब आ सकते हैं, लेकिन आप अंततः कुछ ऐसा कर सकते हैं जो संख्याओं को देखते समय समझ में आ सकता है, लेकिन संभावना नेत्रहीन है और आप यह सुनिश्चित करने के लिए सूत्र से भटकते हैं कि चीजें सही दिखती हैं।

तो, संक्षेप में, एक दृश्य लय महत्वपूर्ण है, लेकिन इसे अपने पेट से बनाएं, न कि कुछ समीकरण जो आपको वेब पर ठीक से लागू करने के लिए पागल कर देंगे।

एक तरफ के रूप में, ध्यान दें कि बेसलाइन ग्रिड की अवधारणा प्रिंट डिजाइन की दुनिया से आती है ... विशेष रूप से बहु-स्तंभ लेआउट जैसे कि एक अखबार में जहां आप चाहते हैं कि स्तंभ प्राथमिकता से स्तंभ के रूप में कॉलम तक पंक्तिबद्ध हो। उस प्रकार के प्रकाशन को टाइप करना आसान बनाने के लिए, एक बेसलाइन ग्रिड समझ में आता है, और डीटीपी अनुप्रयोगों की दुनिया में लागू करना अपेक्षाकृत आसान है।

Comments

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

— लॉरेन-क्लियर-मोनिका-इप्सम

यह मुश्किल नहीं है कि आपका सीएसएस और HTML 960 ग्रिड से मेल खाए। बाद में, कोडिंग केवल गणित है। इसके अलावा, मूल रूप से (जैसे) themeforest.net पर सभी डिजाइनर इसका उपयोग करते हैं। यह उतना कठिन नहीं है जितना आप कहते हैं कि यह है। और हाँ .... ग्रिड की अवधारणा प्रिंट दुनिया से आती है। हालाँकि, 960x768 के न्यूनतम रिज़ॉल्यूशन से मेल करने के लिए वेब के लिए 960 ग्रिड सिस्टम परिवर्तित किया जाता है।

— लुक

960 ग्रिड मुख्य रूप से क्षैतिज ग्रिड और कुछ बनाने के लिए है जो मैं अत्यधिक मध्यम आकार की साइटों पर सुझाता हूं। यह बहुत उपयोगी उपकरण है। हालाँकि, हम एक ऊर्ध्वाधर प्रकार की आधार रेखा के बारे में बात कर रहे हैं। हां, कोडिंग गणित है। काश, ब्राउज़रों और सीएसएस युक्ति ने पत्र-पत्रिकाओं के आधारों का पता लगाने के लिए कोई विशेष आवास नहीं बनाया। आप इसे अपने गणित के साथ बदल सकते हैं, लेकिन आप अलग-अलग ब्राउज़रों, ऑपरेटिंग सिस्टम, इंस्टॉल किए गए फोंट और उपयोगकर्ता वरीयताओं की दया पर हैं, इसलिए यह काम करने के आधारभूत प्रकार ग्रिड पहलू को प्राप्त करने के लिए सभी 'सरल गणित' पर नहीं है।

— DA01

उस के शीर्ष पर, डिजाइन हमेशा शुद्ध गणित नहीं होता है। वास्तव में, यह शायद ही कभी शुद्ध गणित है। मठ हमें एक बिंदु पर ले जाता है, लेकिन उससे परे, आंख के सौंदर्यपूर्ण निर्णय को लागू करना पड़ता है। मैंने अपने और अन्य डिजाइनरों दोनों के लिए आधार रेखा ग्रिड प्रणाली का उपयोग करके साइटें बनाई हैं और अधिक बार नहीं, हमें इसे 'सही' महसूस करने के लिए अंत में आधार रेखा ग्रिड को स्क्रैप करना होगा। मैंने तय किया है कि इसकी वजह से, यह आमतौर पर आधारभूत ग्रिड को काम करने के लिए एक व्यर्थ प्रयास है क्योंकि यह आमतौर पर एक मनमाना चीज है।

— DA01

हम्म, मेरे पढ़ने की कमी;) मैंने यह नहीं देखा कि यह केवल ऊर्ध्वाधर रेखा के बारे में है। मुझे इस बात से सहमत होना होगा कि मैं वास्तव में वर्टिकल रिथेम के लिए 960 ग्राम का उपयोग नहीं करता हूं। केवल क्षैतिज के लिए। केवल एक चीज जो मैं लंबवत उपयोग करता हूं वह है "तह"। बाकी मैं "आंख" द्वारा (एक बार फिर लंबवत) संरेखित करता हूं।

— ल्यूक

Answer 2

ऊर्ध्वाधर लय को लागू करना मुश्किल नहीं है, खासकर अगर आप सीएसएस रीसेट के साथ शुरू करते हैं । मैंने कुछ समय पहले इस लिंक http://24ways.org/2006/compose-to-a-vertical-rhythm पर ठोकर खाई और तब से अपने सभी डिजाइनों में तकनीक का उपयोग कर रहा हूं।

मैंने पाया है कि मेरी CSS फ़ाइल (h1 - h6, p, आदि - विशेष रूप से, आकार, रेखा-ऊंचाई, नीचे मार्जिन) में "कैन्ड" प्रकार के घोषणाओं के साथ काम करने के बाद इसे तैनात करना बहुत आसान है।

यहाँ एक पृष्ठभूमि छवि है जिसने मुझे चीजों को थोड़ा स्पष्ट देखने में मदद की है ... खासकर, जब मैं पहली बार लयबद्ध ताल का उपयोग कर रहा था।

यह देखना कठिन हो सकता है, लेकिन जब इसे पृष्ठभूमि-छवि के रूप में दोहराया जाता है: तो आप 20x20 ग्रिड देखेंगे।

HTH

नोट: मुझे उन साइटों में टाइपोग्राफी पसंद है जिन्होंने इस तकनीक का उपयोग उन लोगों की तुलना में बेहतर किया है जो नहीं हैं। हालांकि दोनों मामलों में, हमेशा एक तत्व या दो प्रतीत होते हैं जिन्हें "सही" दिखने के लिए "सिस्टम को धोखा देना" पड़ता है। मैंने यह भी पाया है कि समग्र लाइन-ऊँचाई (12px फ़ॉन्ट बेस के लिए 18 पीएक्स कहना) पर ध्यान देना, छवियों, ग्राफिकल हेडर के आसपास मार्जिन और पैडिंग बनाता है, और बहुत सीधे आगे (18px) की तरह। इसके अलावा ... सब कुछ की गणना करने का आग्रह दूर चला जाता है ... आप लेआउट के बारे में "ऊर्ध्वाधर लय" नोटिस करना शुरू कर देंगे, और मूल्यों की बहुत छोटी सूची से सही पैडिंग / मार्जिन / लाइन-ऊंचाई खींचने में सक्षम होंगे। तुम्हारे सिर में।

Answer 3

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

ग्रिड के लिए सब कुछ मैच में मदद करने के लिए, एक पृष्ठभूमि छवि बहुत उपयोगी है, जैसा कि डॉसन सुझाव देते हैं।

मैं अपने नवीनतम कुछ डिजाइनों के लिए इस तकनीक का पालन कर रहा हूं, और मुझे लगता है कि यह वास्तव में भुगतान करता है।