द यूनिवर्सल वेब

2.4 लाइन हाइट

स्क्रीन-पठन के लिए लीडिंग: यूनिट-रहित CSS line-height, 1.5 सहन करने की WCAG 1.4.12 की अपेक्षा, और सही मान लाइन की लंबाई पर क्यों निर्भर करता है।

7 min read

इस पृष्ठ का अनुवाद AI की सहायता से किया गया है। अंग्रेज़ी मूल ही प्रामाणिक है।

पाठ की पंक्तियों के बीच का स्थान — प्रिंट में लीडिंग (leading), CSS में line-height — स्क्रीन टाइपोग्राफ़ी (typography) की सबसे परिणामकारी सेटिंग्स में से है। इसका काम दिशा-निर्देशन है: पंक्तियों के बीच पर्याप्त श्वेत स्थान आँख को पंक्ति पूरी करने, बाएँ हाशिये तक की लंबी वापसी-छलाँग (return sweep) करने, और सही अगली पंक्ति पर उतरने देता है — न कि वही पंक्ति दोबारा पढ़ने या आगे कूद जाने पर मजबूर करता है। 2005 संस्करण ने फ़ॉन्ट आकार के लगभग 140% की अनुशंसा की थी, यह नोट करते हुए कि ब्राउज़र के 100–120% के डिफ़ॉल्ट बहुत तंग हैं, विशेषकर निम्न-दृष्टि वाले पाठकों के लिए। वह अनुशंसा समय की कसौटी पर खरी उतरी है; बल्कि व्यवहार और मानक उससे थोड़ा आगे निकल गए हैं।

2005 के बाद क्या बदला

लगभग 1.4 का मूल आँकड़ा अपने समय से आगे था और अब मुख्यधारा के व्यवहार के रूढ़िवादी छोर पर बैठता है। 2026 में सुव्यवस्थित साइटों पर बॉडी टेक्स्ट सामान्यतः 1.4 और 1.6 के बीच चलता है, और सुगम्यता की न्यूनतम सीमा औपचारिक हो चुकी है: WCAG का सफलता मानदंड 1.4.12 Text Spacing (स्तर AA) अपेक्षा करता है कि सामग्री उपयोगकर्ता द्वारा लागू फ़ॉन्ट आकार के 1.5 गुना लाइन हाइट को सामग्री या कार्यक्षमता खोए बिना झेल सके, और पुराना 1.4.8 Visual Presentation (स्तर AAA) अनुच्छेदों के भीतर सीधे-सीधे कम से कम 1.5 की पंक्ति-दूरी माँगता है। व्यावहारिक अर्थ: 1.5 कोई आकांक्षा नहीं है, यह वह मान है जिसे आपके लेआउट को न्यूनतम रूप से सहन करना ही होगा — और अधिकांश बॉडी सेटिंग्स के लिए यह बस एक अच्छा डिफ़ॉल्ट है।

लाइन-हाइट 1.2, 1.5 और 2.0 पर सेट प्लेसहोल्डर पंक्तियों के तीन अनुच्छेद — तंग पंक्तियाँ घुटती हैं, 1.5 बॉडी का डिफ़ॉल्ट है, 2.0 बिखरने लगता है।

दूसरा परिवर्तन यह है कि लाइन हाइट निर्दिष्ट कैसे की जाती है। 2005 में डिज़ाइनर लीडिंग पिक्सेल या प्रतिशत में सेट करते थे। आधुनिक CSS व्यवहार सुस्पष्ट है: यूनिट-रहित मान उपयोग करें (line-height: 1.5, न कि 24px या 150%)। यह भेद वंशानुक्रम (inheritance) के कारण मायने रखता है। यूनिट-रहित मान अनुपात के रूप में विरासत में मिलता है और हर तत्व के अपने फ़ॉन्ट आकार के सापेक्ष पुनर्गणित होता है; पिक्सेल या प्रतिशत मान एक बार गणित होकर स्थिर लंबाई के रूप में विरासत में जाता है। पेज की body पर line-height: 24px सेट करें, और 32px का कोई भीतरी शीर्षक ओवरलैप करती पंक्तियों के साथ रेंडर होगा। यूनिट-रहित line-height पूरे कैस्केड को सही अनुपात में स्केल कराती है — और यही चीज़ उपयोगकर्ताओं के टेक्स्ट बड़ा करने पर लेआउट को अक्षुण्ण रखती है।

तीसरे, लेआउट स्वयं बदल गए। स्थिर-ऊँचाई वाले टेक्स्ट कंटेनर 2005 में आम थे और 1.4.12 की अपेक्षा के मुख्य शिकार वही हैं: लाइन-हाइट 1.3 पर ठीक तीन पंक्तियों के नाप का बक्सा तब अपनी सामग्री काट देगा जब पाठक 1.5 का ओवरराइड लगाएगा। टेक्स्ट रखने वाले कंटेनरों का आकार उनकी सामग्री से तय होना चाहिए — जहाँ न्यूनतम चाहिए वहाँ min-height के साथ, स्थिर ऊँचाई के साथ कभी नहीं।

लीडिंग और माप एक ही निर्णय हैं

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

व्यवहार में: 45-अक्षरों की साइडबार टिप्पणी 1.4 पर आराम से पढ़ी जा सकती है; 75-अक्षरों का लेख-स्तंभ 1.6 या अधिक चाहता है। यदि लेआउट लंबी पंक्तियाँ थोपता है, तो लीडिंग से क्षतिपूर्ति करें। और भी बेहतर — माप को ही सीमित करें (अगले अध्याय का विषय) ताकि लीडिंग आरामदायक मध्य-सीमा में रह सके।

मूल में उल्लिखित टाइपफ़ेस-परिवर्तनशीलता अब भी लागू है। line-height की गणना फ़ॉन्ट आकार से होती है, लेकिन पाठक जो अनुभव करता है वह एक पंक्ति के दृश्य द्रव्यमान और अगली के बीच का श्वेत गलियारा है — और वह एक्स-हाइट (x-height), एसेंडर व डिसेंडर की लंबाई और स्ट्रोक के भार पर निर्भर करता है। Verdana जैसा बड़ी एक्स-हाइट वाला फ़ेस अपना em अधिक भरता है और समान line-height पर छोटी एक्स-हाइट वाले फ़ेस की तुलना में अधिक तंग पढ़ा जाता है। गहरे, बोल्ड या संकुचित फ़ेस भी अधिक हवा चाहते हैं। लीडिंग का निर्णय सेट किए गए अनुच्छेदों को देखकर करें, किसी संख्या पर भरोसा करके नहीं।

शीर्षक अलग हैं

1.4–1.6 का मार्गदर्शन सतत बॉडी टेक्स्ट पर लागू होता है। शीर्षक उल्टे तर्क पर चलते हैं: बड़े आकारों में आनुपातिक लाइन हाइट लिपटी हुई पंक्तियों के बीच विशाल खाई छोड़ती है, शीर्षक को दृश्य रूप से स्वयं से काट देती है। बहु-पंक्ति शीर्षक तंग सेटिंग में सबसे अच्छे पढ़े जाते हैं — सामान्यतः 1.1 से 1.25, बहुत बड़ी डिस्प्ले सेटिंग्स के लिए 1.0 के निकट। चूँकि यूनिट-रहित line-height अनुपात के रूप में विरासत में मिलती है, शीर्षक-शैलियों को बॉडी की लीडिंग विरासत में लेने के बजाय अपने तंग मान स्पष्ट रूप से सेट करने चाहिए। WCAG की स्पेसिंग-अपेक्षाएँ पाठ-खंडों से संबंधित हैं, डिस्प्ले शीर्षकों से नहीं, लेकिन उपयोगकर्ता-ओवरराइड लागू होने पर शीर्षक भी कटने नहीं चाहिए — स्थिर-ऊँचाई वाले हीरो कंटेनरों से बचने का एक और कारण।

दो छोटी टिप्पणियाँ। पहली, अतियाँ दोनों दिशाओं में हानिकारक हैं: अत्यधिक लीडिंग के विरुद्ध मूल की चेतावनी क़ायम है, क्योंकि बहुत अधिक श्वेत स्थान में तैरती पंक्तियाँ अगली-पंक्ति की खोज कठिन बनाती हैं और अनुच्छेद को एक इकाई के रूप में खंडित करती हैं — लगभग 2.0 से आगे बॉडी टेक्स्ट बिखरने लगता है। दूसरी, इंटरफ़ेस भी पाठ ही है: बटन, फ़ॉर्म लेबल और नेविगेशन को इतनी समझदार line-height चाहिए कि वे रैपिंग और उपयोगकर्ता-ओवरराइड झेल सकें, और एकल-पंक्ति UI टेक्स्ट को ऐसे हथकंडों से केंद्रित करने की आम आदत, जो मानती है कि वह कभी नहीं लिपटेगा, 1.4.12 की बार-बार होने वाली विफलता है।

CSS में

body { line-height: 1.5; }      /* unitless — scales with size */
h1, h2 { line-height: 1.15; }   /* display sizes want less */
figcaption { line-height: 1.4; }

/* Longer measures need more leading: */
.wide-column { line-height: 1.6; }

अनुशंसाएँ

  • बॉडी टेक्स्ट को डिफ़ॉल्ट रूप से 1.5 की लाइन हाइट पर सेट करें; टाइपफ़ेस और माप के अनुसार लगभग 1.4–1.7 के भीतर समायोजित करें।
  • हमेशा यूनिट-रहित line-height मान उपयोग करें ताकि अनुपात सही ढंग से विरासत में मिले और स्केल हो।
  • लाइन की लंबाई बढ़ने पर लीडिंग बढ़ाएँ; लंबे मापों को वापसी-छलाँग के लिए अधिक हवा चाहिए।
  • शीर्षकों को लगभग 1.1–1.25 पर कसें, शीर्षक-शैलियों पर स्पष्ट रूप से सेट करके।
  • टेक्स्ट रखने वाले कंटेनरों की ऊँचाई कभी स्थिर न करें; ऊँचाई सामग्री से तय होने दें, आवश्यकता पर min-height के साथ।
  • टेक्स्ट-स्पेसिंग ओवरराइड (WCAG 1.4.12 के अनुसार लाइन हाइट 1.5) और 200% ज़ूम पर परीक्षण करें कि कुछ भी कटता या ओवरलैप नहीं होता।
  • लीडिंग का मूल्यांकन हर टाइपफ़ेस के लिए दृश्य रूप से करें — एक्स-हाइट और भार बदल देते हैं कि वही संख्या कैसी पढ़ी जाती है।

आगे पढ़ें