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 است. مقادیر هماهنگ line height برای همه سطوح سلسله‌مراتب تایپوگرافیک ریتم عمودی ایجاد می‌کند که رابط را از نظر بصری یکپارچه می‌سازد. انحراف line-height به میزان 10% از مقدار بهینه با چشم غیرمسلح قابل مشاهده است و کیفیت درک شده رابط را کاهش می‌دهد.

Line Height vs Leading: تفاوت در چیست

Leading (تلفظ می‌شود «لِدینگ») — یک اصطلاح تاریخی تایپوگرافی است که فاصله بین خطوط از baseline تا baseline منهای ارتفاع گلیف‌ها را نشان می‌دهد. در حروفچینی فلزی، leading — نوارهای سربی هستند که برای افزایش فاصله بین خطوط قرار می‌گرفتند. Line height — مفهوم مدرن‌تری است که هم ارتفاع فونت و هم leading را شامل می‌شود.

در عمل، تفاوت هنگام انتقال طرح‌ها از Figma یا Sketch به کد اهمیت دارد. ابزارهای طراحی معمولاً line-height (یا به سادگی ارتفاع خط) را نشان می‌دهند. در پلتفرم‌های موبایل، API ممکن است متفاوت نامیده شود: iOS از اصطلاح lineSpacing (که به leading نزدیک‌تر است) همراه با minimumLineHeight/maximumLineHeight استفاده می‌کند، Android — LineHeightStyle با alignment و trim، Flutter — height (unitless multiplier).

// iOS: تفاوت بین line height و line spacing
let paragraphStyle = NSMutableParagraphStyle()

// 1. تنظیم مستقیم line height
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24

// 2. فاصله خطوط (فضای اضافی بین خطوط)
paragraphStyle.lineSpacing = 4.0  // اضافه شده به line height طبیعی فونت

تفاوت کلیدی: اگر 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 کاراکتر) محدوده توصیه‌شده 1.4–1.6 font-size است. این مقدار فاصله عمودی کافی برای انتقال راحت نگاه بین خطوط بدون از دست دادن پیوستگی بصری متن فراهم می‌کند.

برای عنوان‌ها، جایی که طول خط معمولاً کوتاه‌تر است (2–6 کلمه)، line height می‌تواند کمتر باشد — 1.1–1.25 font-size. عنوان‌ها به فاصله بین خطوط زیادی نیاز ندارند، زیرا وظیفه اصلی آنها جلب توجه است، نه خواندن طولانی. علاوه بر این، اندازه‌های بزرگ عنوان (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 در سیستم طراحی
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)، line height کمتر از 1.2 برای متن اصلی یک مانع دسترسی محسوب می‌شود: کاربران مبتلا به دیسلکسی و اختلالات بینایی هنگام خواندن متن متراکم با مشکلات قابل توجهی مواجه می‌شوند. WCAG 2.2 line-height حداقل 1.5 را برای محتوای اصلی توصیه می‌کند، اما در رابط‌های موبایل این مقدار با توجه به عرض محدود صفحه می‌تواند به 1.4 کاهش یابد.

Line Height در iOS: UIKit و SwiftUI

در iOS، line height از طریق NSMutableParagraphStyle یا اصلاح‌کننده‌های داخلی SwiftUI مدیریت می‌شود. در UIKit سه ویژگی کلیدی در دسترس است: minimumLineHeight و maximumLineHeight (ارتفاع دقیق خط را تعیین می‌کنند) و lineSpacing (فاصله اضافی بین خطوط). هنگام استفاده از TextKit (NSTextStorage، NSLayoutManager)، line height در lineFragmentRect در نظر گرفته می‌شود و بر محاسبه هندسه بلوک متنی تأثیر می‌گذارد.

// iOS UIKit: تنظیم line height از طریق NSMutableParagraphStyle
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24
// مهم: 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 از طریق lineSpacing
Text("متن با فاصله خطوط سفارشی
خط دوم
خط سوم")
    .font(.body)
    .lineSpacing(4)     // فضای اضافی بین خطوط

// SwiftUI: line height ثابت از طریق استایل سفارشی
Text("عنوان با line height 1.2")
    .lineSpacing(0)
    .font(Font.system(size: 28, weight: .bold))
    .padding(.vertical, 3)  // جبران برای line-height دقیق

بر اساس داده‌های Apple HIG — Typography Implementation (2025)، هنگام استفاده از line-height ثابت از طریق minimumLineHeight باید اطمینان حاصل کنید که مقدار از line-height طبیعی فونت کمتر نباشد. اگر minimumLineHeight کمتر از ascender + descender باشد، UIKit تنظیمات را نادیده می‌گیرد و از ارتفاع طبیعی استفاده می‌کند. این می‌تواند هنگام تغییر فونت یا اندازه به نتایج غیرمنتظره منجر شود.

Line Height در Android: سیستم View و Compose

در توسعه Android، line height در سیستم View کلاسیک و Jetpack Compose متفاوت مدیریت می‌شود. در سیستم View از متد TextView.setLineSpacing(extra, multiplier) استفاده می‌شود. پارامتر extra — فضای اضافی بر حسب پیکسل، multiplier — ضریب ارتفاع طبیعی خط است. ارتفاع نهایی = line-height طبیعی × multiplier + extra.

// سیستم View اندروید: فاصله خطوط
val textView = TextView(context)
textView.text = "Text with custom line spacing"
textView.setLineSpacing(4f, 1.0f)  // extra=4px, multiplier=1.0

// استفاده در 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
Text(
    text = "متن نمونه
با LineHeightStyle سفارشی
در Jetpack Compose",
    style = MaterialTheme.typography.bodyLarge.copy(
        lineHeight = 24.sp,
        lineHeightStyle = LineHeightStyle(
            alignment = LineHeightStyle.Alignment.Center,
            trim = LineHeightStyle.Trim.Both
        )
    )
)

// ضریب ساده از طریق TextStyle
Text(
    text = "ضریب line height",
    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 استفاده کنید.

Line Height در Flutter: TextStyle و StrutStyle

در Flutter، line height از طریق ویژگی height کلاس TextStyle تنظیم می‌شود. این یک ضریب unitless از font-size است: height: 1.5 با fontSize: 16 line-height 24.0 را می‌دهد. مقدار height به طور ضمنی در fontSize ضرب می‌شود، بنابراین با تغییر اندازه، line-height به نسبت مقیاس می‌شود. Flutter همچنین StrutStyle را ارائه می‌دهد — مکانیزمی برای اعمال line-height ثابت مستقل از گلیف‌های واقعی در خط.

// Flutter: line height از طریق TextStyle.height
Text(
    'متن با line height 1.5',
    style: TextStyle(
        fontSize: 16,
        height: 1.5,     // line-height = 24 px
    ),
)

// Flutter: StrutStyle برای line height ثابت
Text(
    'متن با StrutStyle
line height ثابت
مستقل از گلیف‌ها',
    style: TextStyle(fontSize: 16),
    strutStyle: StrutStyle(
        fontSize: 16,
        height: 1.5,
        forceStrutHeight: true,
    ),
)

StrutStyle به ویژه برای لیست‌هایی با اندازه‌های مختلف (مثلاً چت‌ها، فیدهای خبری) مفید است، جایی که لازم است همه خطوط بدون توجه به محتوا ارتفاع یکسانی داشته باشند. بدون StrutStyle، خطی که فقط حروف بدون descender دارد ارتفاع واقعی کمتری نسبت به خطی با حروف «پ» و «ی» خواهد داشت که منجر به لرزش متن هنگام اسکرول می‌شود.

بر اساس داده‌های Flutter Documentation — Text Layout (2025)، StrutStyle با forceStrutHeight: true تضمین می‌کند که ارتفاع هر خط برابر با مقدار تعیین‌شده باشد و گلیف‌های واقعی در داخل این فضا در امتداد baseline تراز شوند. این رویکرد استاندارد برای لیست‌های متنی است که در آن ریتم عمودی برای ادراک بصری حیاتی است.

Line Height تطبیقی برای صفحه‌نمایش‌های مختلف

برنامه‌های موبایل روی دستگاه‌هایی با اندازه‌های مختلف صفحه، تراکم پیکسل و تنظیمات دسترسی کار می‌کنند. Line height باید با این تغییرات سازگار شود و خوانایی را حفظ کند. قانون اساسی: از ضریب‌های بدون بعد (unitless) استفاده کنید، نه مقادیر ثابت در px یا pt، تا line-height همراه با font-size مقیاس شود.

هنگام استفاده از Dynamic Type (iOS) یا fontScale (Android)، اندازه فونت می‌تواند 20–50% نسبت به پایه افزایش یابد. Line-height تعیین‌شده از طریق ضریب به طور خودکار مقیاس می‌شود. اگر line-height با مقدار ثابت تنظیم شده باشد (مثلاً 24 px با font-size 16 pt)، با افزایش فونت به 22 pt، line-height نسبی به 1.09 کاهش می‌یابد — که در حال حاضر زیر آستانه خوانایی است.

// iOS: line height تطبیقی با Dynamic Type
let font = UIFont.preferredFont(
    forTextStyle: .body,
    compatibleWith: traitCollection
)

// محاسبه line-height به عنوان ضریب از فونت پویا
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 باید در هر تغییر پیکربندی دوباره محاسبه شود.