अपने वेब टाइपोग्राफी में सुधार करने के 5 तरीके

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

लेकिन सबसे पहले, पाठ क्या है?

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

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

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

इस लेख में मैं आपको कुछ टिप्स बताऊंगा, कि कैसे आप अपनी वेब टाइपोग्राफी में सुधार कर सकते हैं और अपनी पाठ्य सामग्री को अधिक सुपाठ्य और पठनीय बना सकते हैं। तो चलो शुरू करते है।

फ़ॉन्ट आकार

कुछ साल पहले, शरीर पाठ के लिए 10 या 12px आकार का उपयोग करना आम था। आजकल हम FHD या UHD डिस्प्ले का इस्तेमाल करते हैं, इसलिए हमें फॉन्ट साइज़ को भी स्केल करना होगा। बड़े डिफ़ॉल्ट फ़ॉन्ट आकार के उपयोग से आपकी पाठ सामग्री की योग्यता बढ़ जाएगी। आपकी सामग्री को पढ़ने में आसान बनाने के लिए आपके शरीर (या

) के लिए 16 से 22px फ़ॉन्ट आकार का उपयोग करना इष्टतम है। फिर जब आप छोटे स्क्रीन आकारों के लिए उत्तरदायी साइट डिज़ाइन कर रहे हैं, तो आप अपने डिफ़ॉल्ट पाठ को 14 से 18px तक के आकार में बदल सकते हैं।

ये आकार न्यूनतम हैं, जबकि दृश्य हानि वाले लोग (जो चश्मा या सिर्फ सीनियर्स पहनते हैं) के लिए भी डिजाइन करते हैं।

आपके शरीर की सामग्री की उपयुक्तता बढ़ाने के लिए इष्टतम बॉडी टेक्स्ट का आकार 16 से 22px है।

लेकिन यह मत भूलो, आपका इष्टतम फ़ॉन्ट आकार हमेशा उस टाइपफेस पर निर्भर करता है जिसे आपने अपने वेब प्रोजेक्ट के लिए चुना है। यहाँ इमेज बेलो पर आप Helvetica Neue और Futura के x- ऊँचाई (प्रकार की एक रेखा के आधार रेखा के बीच की दूरी और निचले मामले के मुख्य भाग के शीर्ष के बीच का अंतर) देख सकते हैं।

आप Helvetica Neue और Futura के बीच समान आकारों में अंतर देख सकते हैं।

लाइन रिक्ति भी अच्छी तरह से लाइन ऊंचाई के रूप में जाना जाता है

प्रिंट में, इसे अग्रणी भी कहा जाता है, उन्होंने अलग-अलग लाइनों को अलग करने के लिए धातु स्ट्रिप्स का उपयोग किया है।

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

आपको अपने बॉडी टेक्स्ट साइज़ के कम से कम 1.5 मल्टीपल लाइन लाइन का उपयोग करना चाहिए।

इसका क्या मतलब है? व्यावहारिक रूप से, जब आप अपने शरीर की सामग्री के लिए 16px फ़ॉन्ट आकार का उपयोग कर रहे हैं, तो आपकी लाइन की ऊंचाई जीपीएक्स के आस-पास होनी चाहिए (जैसा कि आप उदाहरण के लिए) देख सकते हैं।

लेकिन कभी-कभी जब आप अपने ग्रंथों को अधिक उपयुक्त बनाना चाहते हैं और आप केवल छोटे पैराग्राफ के साथ काम करते हैं, तो आप लाइन की ऊंचाई को थोड़ा बढ़ा सकते हैं।

आप बॉडी टैक्स्ट के 1.5 मल्टीपल के आकार में अक्तीव ग्राटस्क को लाइन ऊंचाई के साथ देख सकते हैं।

रेखा लंबाई

वेब पर, लोग टेक्स्ट के विस्तृत ब्लॉक नहीं पढ़ेंगे। यह उनके लिए लंबी लाइनों को स्कैन करने के लिए वास्तव में असहज और कठिन है। महत्वपूर्ण बात जो मुझे नोटिस करनी है वह यह है कि लोग पढ़ते समय पाठ की एक पंक्ति के साथ लगातार नहीं चलते हैं, लेकिन छोटे स्टॉप (फिक्सेशन के रूप में अच्छी तरह से जाना जाता है) को संक्षिप्त स्टॉप (निर्धारण) के साथ मिलाते हैं - यह फ्रांसीसी नेत्र चिकित्सक लुइस द्वारा वर्णित किया गया था Éमील जावाल।

लोग पढ़ते समय पाठ की एक पंक्ति के साथ लगातार नहीं चलते हैं, लेकिन छोटे स्टॉप के साथ छोटे, तीव्र आंदोलनों को आपस में जोड़ते हैं।

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

डिस्लेक्सिया से पीड़ित लोगों के लिए 80 से अधिक अक्षर लंबी लाइनें भी बड़ी समस्या हैं।

छवि पर आप इष्टतम और बहुत विस्तृत लाइनों के बीच अंतर देख सकते हैं।

कंट्रास्ट

कंट्रास्ट प्रयोज्य दृष्टिकोण से महत्वपूर्ण है, लेकिन यह पठनीयता और पठनीयता को भी प्रभावित करता है।

पाठ जो इसके विपरीत नहीं है वह पढ़ने के लिए कठिन है और साइट को एकजुट करना न केवल उन लोगों के लिए नरक है जिनके पास दृश्य हानि है। यह रूपांतरणों को घटा सकता है, औसत सत्र अवधि या उछाल दर का कारण बन सकता है।

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

सामग्री बनाम पृष्ठभूमि कंट्रास्ट को 4.5: 1 नियम के साथ निर्देशित किया जाना चाहिए।

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

कंट्रास्ट केवल रंगों के बारे में नहीं है, दृश्य हानि वाले लोगों को हाइपरटेक्स्ट लिंक खोजने में समस्या हो सकती है जब वे रेखांकित नहीं होते हैं।

लंबवत लय

वेब पर लोग टेक्स्ट के पूरे ब्लॉक नहीं पढ़ रहे हैं। वे केवल सामग्री को स्कैन कर रहे हैं और महत्वपूर्ण जानकारी खोज रहे हैं। ऊर्ध्वाधर लय के साथ, यह आसान है। उपयोगकर्ताओं के लिए वेब पर पढ़ने की तुलना में स्कैन करना अधिक आरामदायक है। हम तत्वों (सुर्खियों, पैराग्राफ, कैप्शन या यहां तक ​​कि छवियों) के बीच सभी ऊर्ध्वाधर रिक्त स्थान रखने के लिए ऊर्ध्वाधर लय का उपयोग करते हैं। इसके अलावा, हम महत्वपूर्ण छवियों को आसानी से खोजने के लिए उपयोगकर्ता को निर्देशित करने के लिए ऊर्ध्वाधर लय का उपयोग करते हैं और उन्हें हमारी वेबसाइट का उपयोग करते समय अधिक आराम और सकारात्मक अनुभव होगा।

लेकिन ऊर्ध्वाधर लय कैसे काम करता है?

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

जब आप अपनी आधार रेखा को परिभाषित कर रहे हैं और अपनी स्वयं की आधार रेखा ग्रिड बना रहे हैं, तो मूल बिंदु जहां शुरू करना आपके शरीर के पाठ के आकार (

) को परिभाषित करता है और इसके लिए लाइन की ऊँचाई (सीएसएस में लाइन-ऊंचाई संपत्ति) और फिर सब कुछ स्केल करना है ऊपर की ओर।

जैसा कि आप इमेज बोले पर देख सकते हैं, मैं बॉडी टेक्स्ट और 24px लाइन ऊंचाई के लिए 16px फॉन्ट साइज का उपयोग कर रहा हूं, जिसका मतलब है कि मेरे लिए बेसलाइन है (बेहतर गाइडिंग के लिए और मेरे बेसलाइन के लिए सभी फोंट की स्थापना के लिए, मैं डिवाइड करता था। मेरी स्क्रीन पर अधिक गाइड करने के लिए यह संख्या 2, 3 या अधिकतर 4)। इस परिभाषा के आधार पर, सभी स्थानों (सीमाओं, पैडिंग या मार्जिन सहित) को 6px से गुणा या विभाजित करना होगा। पैराग्राफ और हेडलाइंस के बीच एक विजुअल कंसिस्टेंसी बनाने के लिए मैंने नंबर 6 के गुणकों के रूप में स्पेस बनाने का फैसला किया और आखिरकार मैंने 24 या 36 पीएक्स का इस्तेमाल किया। मेरे फ़ॉन्ट आकार, लाइन ऊँचाई 6px के गुणक भी हैं।

यहां आप देख सकते हैं कि आपके डिजाइनों में ऊर्ध्वाधर लय कैसे काम करना चाहिए।

निष्कर्ष के रूप में कुछ शब्द

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