आधुनिक वेबसाइटों के लिए बेहतर टाइपोग्राफी में एक नज़र

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

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

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

आज के इंटरनेट में अंतर

आधुनिक वेब नाटकीय रूप से 2000 की शुरुआत से उन्नत हुआ है। ग्राफिक डिजाइन, लोगो, बैनर और व्यावहारिक रूप से कुछ और के शानदार कार्यों को बनाने के लिए वेब डिजाइनरों के लिए नई सुविधाओं का भार है। HTML5 और CSS3 विनिर्देशों की रिलीज़ ने वेब फोंट के निर्माण के पुराने तरीके को भी अपना लिया है.

अब सीएसएस के साथ अपने स्वयं के फोंट को शामिल करना पूरी तरह से संभव है @फॉन्ट फ़ेस संपत्ति। आप कोई भी उपयोग कर सकते हैं ट्रू टाइप(.ttf) या है खुले प्रकार का(.otf) फ़ाइल और अपने सर्वर पर स्थानीय रूप से एक कॉपी संग्रहीत करें। फिर कुछ CSS3 के जादू के साथ परिवार को अपने वेबपेज पर कहीं भी शामिल करें!

इस तकनीक के तहत अकेले यह देखना संभव है कि हमारा आधुनिक इंटरनेट कितना विकसित हो गया है.

और jQuery की लोकप्रियता में हर दिन वृद्धि के साथ यह कोई आश्चर्य नहीं है कि हम कस्टम फोंट के साथ मिलकर आश्चर्यजनक एनीमेशन प्रभाव बना सकते हैं। JQuery के लिए TTFGen प्लगइन के ऊपर विधि के विकल्प के रूप में आप अपने वेबपेज पर कोई ट्रू टाइप फ़ॉन्ट शामिल कर सकते हैं.

यह विधि थोड़ी अधिक विश्वसनीय है क्योंकि आपको इसे काम करने के लिए CSS3 मानकों का समर्थन करने वाले आधुनिक ब्राउज़र की आवश्यकता नहीं है। लेकिन निश्चित रूप से विरासत ब्राउज़र जैसे कि इंटरनेट एक्सप्लोरर 6 ठीक से प्रस्तुत करने के लिए संघर्ष करेगा.

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

डिजिटल टाइपोग्राफी का उद्देश्य

एक अजीब विचार पर विचार करें, लेकिन डिजिटल पाठ का वास्तविक उद्देश्य क्या है? जानकारी संप्रेषित करने, स्रोतों को साझा करने और इंटरनेट उपयोगकर्ताओं की दुनिया के लिए अपनी राय देने के लिए. विचारों और विचारों को साझा करने के लिए पाठ मीडिया का सबसे सरल रूप है. लेकिन यह भी बहुत जटिल है और इसमें प्रमुख विवरण शामिल हैं जो फ़ोटो / वीडियो का उपयोग नहीं कर सकते हैं.

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

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

इसके अतिरिक्त आपके पृष्ठ के पाठ में मीडिया और द्वितीयक सामग्री आती है। यदि आपके पैराग्राफ में प्राथमिक जानकारी है, तो शायद आपके पास पेज को मसाला देने के लिए ग्राफ या इमेजरी हो। ये लहजे उपयोगकर्ताओं को आपकी साइट के माध्यम से चलते रहने के लिए सही स्पर्श हैं.

वीडियो और चित्र आपकी सामग्री को तोड़ने में सक्षम हैं और ऐसा लगता है जैसे पाठक आपके लेख के माध्यम से तेजी से आगे बढ़ रहे हैं। लेकिन इन मदों का उपयोग संयम से करें और कुछ भी अपने मूल संदेश पर हावी न होने दें। उपयोगकर्ता जानकारी के लिए आपकी साइट पर (ज्यादातर) आ रहे हैं और बहुत अधिक विक्षेप नहीं चाहते हैं.

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

वेबपेज हेडर

आपके वेब टाइपोग्राफी की सबसे महत्वपूर्ण संपत्तियाँ शीर्षकों में से एक हैं। यदि आप HTML शीर्षकों से अपरिचित हैं, तो इनकी सीमा होती है

सेवा मेरे

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

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

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

उदाहरण के लिए, आपका

टैग आपके सभी पृष्ठ शीर्षकों के बीच सबसे अधिक खड़े होने चाहिए.

तथा

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

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

अद्वितीय हाइपरलिंक का निर्माण

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

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

अपने लिंक को स्टाइल करते समय आपको निम्नलिखित पर विचार करना चाहिए - आपके पृष्ठ सेटअप में परिवर्तन कैसे दिखाई देंगे, आप किस प्रकार के बैकग्राउंड कलर पर काम कर रहे हैं, तथा कंट्रास्ट के लिए कौन सा रंग है?

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

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

स्टाइल लिस्ट का निर्माण

संभावना अच्छी है कि आपको कुछ बिंदुओं पर सूचियों के साथ भी काम करना होगा। शामिल दोनों HTML में आदेशित और अव्यवस्थित सूची है। ये बहुत कम मात्रा में अंतरिक्ष में ऑनलाइन विचारों, उत्पादों, लोगों या लिंक के छोटे संग्रह की पेशकश के लिए एकदम सही हैं। स्टाइलिंग पैराग्राफ या हेडिंग से अलग नहीं है.

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

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

इन-पेज कोट्स कैसे बनाएं

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

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