অ্যাপ ডেভেলপমেন্টে 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 (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 মান অন্তর্নিহিতভাবে 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 পুনরায় গণনা করা উচিত।