ایپ ڈیولپمنٹ میں Line Height — یہ کیا ہے اور ٹائپوگرافی پر اثر

ٹائپوگرافی میں Line Height کیا ہے

Line Height (لائن کی اونچائی) ایک بنیادی ٹائپوگرافک پیرامیٹر ہے جو متواتر لائنوں کی بیس لائنز کے درمیان فاصلہ متعین کرتا ہے۔ ویب اور موبائل ڈیولپمنٹ میں، 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 کے ساتھ ایپلیکیشن کے ٹائپوگرافک سسٹم کے تین اہم پیرامیٹرز میں سے ایک ہے۔ ٹائپوگرافک درجہ بندی کی تمام سطحوں کے لیے مستقل line height ویلیوز ایک عمودی تال تخلیق کرتی ہیں جو انٹرفیس کو بصری طور پر مربوط بناتی ہیں۔ بہترین ویلیو سے 10% کا line-height انحراف ننگی آنکھ سے پہلے ہی نظر آتا ہے اور انٹرفیس کے محسوس کردہ معیار کو کم کرتا ہے۔

Line Height بمقابلہ Leading: فرق کیا ہے

Leading (تلفظ «لیڈنگ») ایک تاریخی ٹائپوگرافک اصطلاح ہے جو گلائف کی اونچائی منہا کرنے کے بعد بیس لائن سے بیس لائن تک لائنوں کے درمیان فاصلے کو ظاہر کرتی ہے۔ دھاتی ٹائپ سیٹنگ میں، leading لائنوں کے درمیان فاصلہ بڑھانے کے لیے ڈالی جانے والی سیسہ کی پٹیاں تھیں۔ Line height ایک زیادہ جدید تصور ہے جس میں فونٹ کی اونچائی اور leading دونوں شامل ہیں۔

عملی طور پر، Figma یا Sketch سے کوڈ میں ڈیزائن منتقل کرتے وقت یہ فرق اہم ہے۔ ڈیزائن ٹولز عام طور پر line-height (یا صرف لائن کی اونچائی) متعین کرتے ہیں۔ موبائل پلیٹ فارم API مختلف اصطلاحات استعمال کر سکتے ہیں: iOS minimumLineHeight/maximumLineHeight کے ساتھ lineSpacing (جو leading کے قریب ہے) استعمال کرتا ہے، Android Alignment اور Trim کے ساتھ LineHeightStyle استعمال کرتا ہے، Flutter height (بغیر اکائی کا ضارب) استعمال کرتا ہے۔

// 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 کا ایک بغیر اکائی کا ضارب ہے: fontSize: 16 کے ساتھ height: 1.5 line-height 24.0 دیتا ہے۔ height ویلیو implicitly 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 کا دوبارہ حساب لگانا چاہیے۔