ऐप डेवलपमेंट में Line Height — यह क्या है और टाइपोग्राफी पर प्रभाव

टाइपोग्राफी में Line Height क्या है

Line Height (पंक्ति ऊँचाई) एक मौलिक टाइपोग्राफ़िक पैरामीटर है जो क्रमिक पंक्तियों की आधार रेखाओं (baseline) के बीच की दूरी निर्धारित करता है। वेब और मोबाइल डेवलपमेंट में, line height टेक्स्ट की ऊर्ध्वाधर लय निर्धारित करता है: प्रत्येक पंक्ति एक निश्चित ऊँचाई घेरती है, और यह पैरामीटर अगली पंक्ति में जाने पर जुड़ता है। Line height में न केवल ग्लिफ़ की वास्तविक ऊँचाई (ascender + descender) शामिल है, बल्कि अतिरिक्त स्थान भी शामिल है जो पठनीयता में सुधार करता है।

गणितीय रूप से, line height इस प्रकार व्यक्त किया जाता है: line-height = font-size × multiplier। यदि font-size = 16 px और multiplier = 1.5, तो line-height = 24 px। इस मामले में इंटरलाइन स्पेसिंग (leading) 24 - (ascender + descender) पिक्सेल होगी। अधिकांश डिज़ाइन सिस्टम और प्लेटफ़ॉर्म गुणक का उपयोग करते हैं क्योंकि यह फ़ॉन्ट आकार बदलने पर स्वचालित रूप से स्केल होता है।

Material Design Type Scale (2025) के अनुसार, line height किसी ऐप के टाइपोग्राफ़िक सिस्टम के तीन प्रमुख पैरामीटरों में से एक है, font-size और font-weight के साथ। टाइपोग्राफ़िक पदानुक्रम के सभी स्तरों के लिए consistent line height मान एक ऊर्ध्वाधर लय बनाते हैं जो इंटरफ़ेस को दृश्य रूप से एकीकृत बनाता है। इष्टतम मान से 10% का line-height विचलन पहले से ही नग्न आंखों को दिखाई देता है और इंटरफ़ेस की अनुभव की जाने वाली गुणवत्ता को कम करता है।

Line Height बनाम Leading: अंतर क्या है

Leading (उच्चारण «लैडिंग») एक ऐतिहासिक टाइपोग्राफ़िक शब्द है जो आधार रेखा से आधार रेखा तक की दूरी में से ग्लिफ़ ऊँचाई घटाकर प्राप्त रेखाओं के बीच की दूरी को दर्शाता है। धातु टाइपसेटिंग में, leading रेखाओं के बीच स्थान बढ़ाने के लिए डाली जाने वाली सीसे की पट्टियाँ थीं। Line height एक अधिक आधुनिक अवधारणा है जिसमें फ़ॉन्ट ऊँचाई और leading दोनों शामिल हैं।

व्यवहार में, Figma या Sketch से कोड में डिज़ाइन स्थानांतरित करते समय यह अंतर महत्वपूर्ण है। डिज़ाइन टूल आमतौर पर line-height (या बस पंक्ति ऊँचाई) निर्दिष्ट करते हैं। मोबाइल प्लेटफ़ॉर्म API अलग-अलग शब्दों का उपयोग कर सकते हैं: iOS lineSpacing (जो leading के करीब है) minimumLineHeight/maximumLineHeight के साथ उपयोग करता है, Android LineHeightStyle को alignment और trim के साथ उपयोग करता है, Flutter height (unitless गुणक) का उपयोग करता है।

// iOS: difference between line height and line spacing
let paragraphStyle = NSMutableParagraphStyle()

// 1. Direct line height setting
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24

// 2. Line spacing (additional space between lines)
paragraphStyle.lineSpacing = 4.0  // added to natural line height of font

मुख्य अंतर: यदि आप minimumLineHeight सेट करते हैं, तो सभी पंक्तियाँ समान ऊँचाई का उपयोग करेंगी, जो लयबद्ध ग्रिड के लिए अच्छा है। यदि आप केवल lineSpacing सेट करते हैं, तो पंक्ति ऊँचाई फ़ॉन्ट आकार के अनुसार बदलती रहेगी — यह अधिक लचीला लेकिन कम पूर्वानुमानित दृष्टिकोण है। डिज़ाइन सिस्टम के लिए, minimumLineHeight अनुशंसित है क्योंकि यह सख्ती से नियंत्रित परिणाम देता है।

IBM Carbon Design System — Typography Guidelines (2025) के अनुसार, कस्टम फ़ॉन्ट का उपयोग करते समय line height और leading के बीच का अंतर विशेष रूप से ध्यान देने योग्य है। यदि फ़ॉन्ट में बड़ा अंतर्निहित leading है (जैसे SF Pro), तो lineSpacing = 0 स्वीकार्य परिणाम देता है। यदि फ़ॉन्ट का leading छोटा है (कुछ ओपन-सोर्स टाइपफ़ेस), तो अतिरिक्त lineSpacing के बिना पंक्तियाँ आपस में चिपकी दिखाई देंगी।

मोबाइल इंटरफ़ेस के लिए इष्टतम Line Height

इष्टतम line height कई कारकों पर निर्भर करता है: फ़ॉन्ट आकार, पंक्ति लंबाई, टाइपफ़ेस और लक्षित दर्शक। मोबाइल उपकरणों पर मुख्य टेक्स्ट (पंक्ति लंबाई 35–55 वर्ण) के लिए, अनुशंसित सीमा font-size का 1.4–1.6 गुना है। यह मान पंक्तियों के बीच आँख की आरामदायक आवाजाही के लिए पर्याप्त ऊर्ध्वाधर स्थान प्रदान करता है बिना टेक्स्ट की दृश्य एकता खोए।

शीर्षकों के लिए, जहाँ पंक्ति लंबाई आमतौर पर छोटी (2–6 शब्द) होती है, line height छोटा हो सकता है — font-size का 1.1–1.25 गुना। शीर्षकों को बड़े इंटरलाइन स्पेसिंग की आवश्यकता नहीं होती क्योंकि उनका मुख्य कार्य ध्यान आकर्षित करना है, लंबे समय तक पढ़ना नहीं। इसके अलावा, बड़े शीर्षक फ़ॉन्ट आकार (24–32 pt) line-height 1.5 के साथ अत्यधिक स्थान बनाएंगे जो पृष्ठ की ऊर्ध्वाधर लय को तोड़ देगा।

• मुख्य टेक्स्ट (16–18 pt) — line-height 1.4–1.6। मोबाइल उपकरणों पर आरामदायक पढ़ाई के लिए न्यूनतम, जहाँ पंक्ति लंबाई स्क्रीन चौड़ाई द्वारा सीमित है।
• छोटा टेक्स्ट (11–13 pt) — line-height 1.3–1.5। छोटे फ़ॉन्ट आकार में छोटे गुणक की आवश्यकता होती है क्योंकि पंक्तियाँ छोटी होती हैं और आँख अगली पंक्ति तेज़ी से ढूँढ़ लेती है।
• बड़ा टेक्स्ट (20–32 pt) — line-height 1.1–1.25। फ़ॉन्ट जितना बड़ा होगा, पठनीयता के लिए उतने ही कम सापेक्ष इंटरलाइन स्पेसिंग की आवश्यकता होती है।
• मोनोस्पेस टेक्स्ट — line-height 1.3–1.5। मोनोस्पेस फ़ॉन्ट (कोड के लिए) में आमतौर पर बड़ी मीट्रिक होती है, इसलिए line-height को 1.3 तक कम किया जा सकता है।

// Flutter: line height in design system
class AppTextStyles {
    static const body = TextStyle(
        fontSize: 16,
        height: 1.5,      // line-height 24px
    );

    static const headline = TextStyle(
        fontSize: 28,
        height: 1.2,      // line-height 33.6px
    );

    static const caption = TextStyle(
        fontSize: 12,
        height: 1.4,      // line-height 16.8px
    );
}

W3C — Accessibility Requirements for Typography (2025) के अनुसार, मुख्य टेक्स्ट के लिए 1.2 से कम line height एक एक्सेसिबिलिटी बाधा माना जाता है: डिस्लेक्सिया और दृश्य हानि वाले उपयोगकर्ताओं को घने टेक्स्ट को पढ़ने में महत्वपूर्ण कठिनाई होती है। WCAG 2.2 मुख्य सामग्री के लिए कम से कम 1.5 के line-height की सिफारिश करता है, हालाँकि मोबाइल इंटरफ़ेस में सीमित स्क्रीन चौड़ाई को ध्यान में रखते हुए इस मान को 1.4 तक कम किया जा सकता है।

iOS में Line Height: UIKit और SwiftUI

iOS में, line height को NSMutableParagraphStyle या SwiftUI के अंतर्निहित मॉडिफ़ायर के माध्यम से नियंत्रित किया जाता है। UIKit तीन प्रमुख गुण प्रदान करता है: minimumLineHeight और maximumLineHeight (सटीक पंक्ति ऊँचाई सेट करते हैं) और lineSpacing (पंक्तियों के बीच अतिरिक्त स्थान)। TextKit (NSTextStorage, NSLayoutManager) का उपयोग करते समय, line height को lineFragmentRect में ध्यान में रखा जाता है और यह टेक्स्ट ब्लॉक ज्यामिति गणना को प्रभावित करता है।

// iOS UIKit: setting line height via NSMutableParagraphStyle
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24
// Important: minimum + maximum = fixed line-height

let attributes: [NSAttributedString.Key: Any] = [
    .font: UIFont.systemFont(ofSize: 16),
    .paragraphStyle: paragraphStyle
]

let label = UILabel()
label.attributedText = NSAttributedString(
    string: "Text with fixed line height",
    attributes: attributes
)

SwiftUI में, line height .lineSpacing(value) मॉडिफ़ायर के माध्यम से सेट किया जाता है, जो पंक्तियों के बीच अतिरिक्त स्थान जोड़ता है, या .font के माध्यम से कस्टम TextStyle के साथ जिसमें line height शामिल हो। SwiftUI डायनामिक टाइप का भी समर्थन करता है: निर्दिष्ट line height तब स्केल होता है जब उपयोगकर्ता सेटिंग्स में फ़ॉन्ट आकार बदलता है।

// SwiftUI: line height via lineSpacing
Text("Text with custom line spacing
second line
third line")
    .font(.body)
    .lineSpacing(4)     // additional space between lines

// SwiftUI: fixed line height via custom style
Text("Heading with line height 1.2")
    .lineSpacing(0)
    .font(Font.system(size: 28, weight: .bold))
    .padding(.vertical, 3)  // compensation for precise line-height

Apple HIG — Typography Implementation (2025) के अनुसार, minimumLineHeight के माध्यम से फिक्स्ड line-height का उपयोग करते समय, यह सुनिश्चित करना आवश्यक है कि मान फ़ॉन्ट की प्राकृतिक line-height से कम न हो। यदि minimumLineHeight ascender + descender से छोटा है, तो UIKit सेटिंग को अनदेखा करता है और प्राकृतिक ऊँचाई का उपयोग करता है। फ़ॉन्ट या आकार बदलने पर यह अप्रत्याशित परिणाम दे सकता है।

Android में Line Height: View सिस्टम और Compose

Android डेवलपमेंट में, line height को क्लासिक View सिस्टम और Jetpack Compose में अलग-अलग तरीके से प्रबंधित किया जाता है। View सिस्टम में TextView.setLineSpacing(extra, multiplier) विधि का उपयोग किया जाता है। extra पैरामीटर पिक्सेल में अतिरिक्त स्थान है, multiplier प्राकृतिक पंक्ति ऊँचाई का गुणक है। परिणामी ऊँचाई = प्राकृतिक line-height × multiplier + extra।

// Android View system: line spacing
val textView = TextView(context)
textView.text = "Text with custom line spacing"
textView.setLineSpacing(4f, 1.0f)  // extra=4px, multiplier=1.0

// Usage in XML
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:lineSpacingExtra="4dp"
    android:lineSpacingMultiplier="1.4" />

Jetpack Compose में, line height प्रबंधित करने के लिए LineHeightStyle क्लास का उपयोग किया जाता है, जो इंटरलाइन स्थान के लिए संरेखण (Alignment) और ट्रिम (Trim) सेट करने की अनुमति देता है। यह साधारण गुणक की तुलना में अधिक सूक्ष्म नियंत्रण प्रदान करता है। उदाहरण के लिए, आप निर्दिष्ट कर सकते हैं कि अतिरिक्त इंटरलाइन स्थान पंक्ति के ऊपर और नीचे समान रूप से वितरित हो (align.Center) या पूरी तरह से ऊपर जोड़ा जाए (align.Top)।

// Jetpack Compose: LineHeightStyle example
Text(
    text = "Sample text
with custom LineHeightStyle
in Jetpack Compose",
    style = MaterialTheme.typography.bodyLarge.copy(
        lineHeight = 24.sp,
        lineHeightStyle = LineHeightStyle(
            alignment = LineHeightStyle.Alignment.Center,
            trim = LineHeightStyle.Trim.Both
        )
    )
)

// Simple multiplier via TextStyle
Text(
    text = "Line height multiplier",
    style = LocalTextStyle.current.copy(
        lineHeight = TextUnit(1.5f, TextUnitType.Em)
    )
)

Android Developers — Compose Text Styling (2025) के अनुसार, LineHeightStyle.Trim.None (डिफ़ॉल्ट) पहली और अंतिम पंक्तियों पर स्थान बनाए रखता है, जो Card या Column में संरेखण तोड़ सकता है। फिक्स्ड ऊँचाई वाले कंटेनरों के लिए Trim.Both और टेक्स्ट ब्लॉकों के लिए Trim.LastLine अनुशंसित है जहाँ निचला किनारा महत्वपूर्ण है।

Flutter में Line Height: TextStyle और StrutStyle

Flutter में, line height को TextStyle क्लास के height गुण के माध्यम से सेट किया जाता है। यह font-size का एक unitless गुणक है: fontSize: 16 के साथ height: 1.5 line-height 24.0 देता है। height मान implicit रूप से fontSize से गुणा होता है, इसलिए फ़ॉन्ट आकार बदलने पर line-height आनुपातिक रूप से स्केल होता है। Flutter StrutStyle भी प्रदान करता है — पंक्ति में वास्तविक ग्लिफ़ की परवाह किए बिना फिक्स्ड line-height लागू करने की एक तंत्र।

// Flutter: line height via TextStyle.height
Text(
    'Text with line height 1.5',
    style: TextStyle(
        fontSize: 16,
        height: 1.5,     // line-height = 24 px
    ),
)

// Flutter: StrutStyle for fixed line height
Text(
    'Text with StrutStyle
fixed line height
independent of glyphs',
    style: TextStyle(fontSize: 16),
    strutStyle: StrutStyle(
        fontSize: 16,
        height: 1.5,
        forceStrutHeight: true,
    ),
)

StrutStyle विशेष रूप से विभिन्न फ़ॉन्ट आकार वाली सूचियों (जैसे चैट, न्यूज़ फ़ीड) के लिए उपयोगी है, जहाँ सभी पंक्तियों की ऊँचाई सामग्री की परवाह किए बिना समान होनी चाहिए। StrutStyle के बिना, केवल बिना descender वाले अक्षरों वाली पंक्ति की वास्तविक ऊँचाई «p» और «y» जैसे अक्षरों वाली पंक्ति से कम होगी, जिससे स्क्रॉल करते समय टेक्स्ट में झटका लगता है।

Flutter Documentation — Text Layout (2025) के अनुसार, forceStrutHeight: true के साथ StrutStyle यह गारंटी देता है कि प्रत्येक पंक्ति की ऊँचाई निर्दिष्ट मान के बराबर होगी, और वास्तविक ग्लिफ़ इस स्थान के भीतर आधार रेखा द्वारा संरेखित होंगे। यह टेक्स्ट सूचियों के लिए मानक दृष्टिकोण है जहाँ ऊर्ध्वाधर लय दृश्य धारणा के लिए महत्वपूर्ण है।

विभिन्न स्क्रीन के लिए अनुकूली Line Height

मोबाइल ऐप्स विभिन्न स्क्रीन आकार, पिक्सेल घनत्व और एक्सेसिबिलिटी सेटिंग्स वाले उपकरणों पर चलते हैं। Line height को पठनीयता बनाए रखते हुए इन परिवर्तनों के अनुकूल होना चाहिए। मुख्य नियम: px या pt में फिक्स्ड मानों के बजाय unitless गुणक का उपयोग करें, ताकि line-height font-size के साथ स्केल हो।

Dynamic Type (iOS) या fontScale (Android) का उपयोग करते समय, फ़ॉन्ट आकार आधार रेखा से 20–50% तक बढ़ सकता है। गुणक के माध्यम से निर्दिष्ट line-height स्वचालित रूप से स्केल होता है। यदि line-height एक फिक्स्ड मान (जैसे, font-size 16 pt पर 24 px) के रूप में सेट किया गया है, तो जब फ़ॉन्ट बढ़कर 22 pt हो जाता है तो सापेक्ष line-height घटकर 1.09 हो जाता है — जो पहले से ही पठनीयता सीमा से नीचे है।

// iOS: adaptive line height with Dynamic Type
let font = UIFont.preferredFont(
    forTextStyle: .body,
    compatibleWith: traitCollection
)

// Calculate line-height as multiplier from dynamic font
let lineHeightMultiplier: CGFloat = 1.5
let lineHeight = font.lineHeight * lineHeightMultiplier

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = lineHeight
paragraphStyle.maximumLineHeight = lineHeight

Material Design — Responsive Typography (2025) के अनुसार, टैबलेट और बड़ी स्क्रीन (600 dp से अधिक चौड़ाई) के लिए, फ़ोन की तुलना में मुख्य टेक्स्ट के line-height को 0.1–0.2 बढ़ाने की सिफारिश की जाती है, क्योंकि पंक्ति लंबाई बड़ी हो जाती है। फोल्डेबल उपकरणों के लिए, जहाँ स्क्रीन की चौड़ाई गतिशील रूप से बदलती है, प्रत्येक कॉन्फ़िगरेशन परिवर्तन पर line-height की पुनर्गणना की जानी चाहिए।