Line Height sa pag-develop ng app — ano ito at epekto sa typography

Line Height vs Leading: ano ang pagkakaiba

Leading (binibigkas na „lending") — ay isang historikal na typographic term na tumutukoy sa distansya sa pagitan ng mga linya mula baseline hanggang baseline minus ang taas ng mga glyph. Sa metal na pag-type, ang leading — ay mga lead na strip na inilalagay sa pagitan ng mga linya upang dagdagan ang distansya. Ang line height — ay isang mas modernong konsepto na sumasaklaw sa parehong taas ng font at leading.

Sa praktika, ang pagkakaiba ay mahalaga kapag naglilipat ng mga mockup mula sa Figma o Sketch patungo sa code. Ang mga tool sa disenyo ay karaniwang nagpapakita ng line-height (o simpleng taas ng linya). Sa mga mobile platform, ang API ay maaaring iba ang tawag: iOS ay gumagamit ng terminong lineSpacing (mas malapit sa leading) kasama ang minimumLineHeight/maximumLineHeight, Android — LineHeightStyle na may alignment at trim, Flutter — height (unitless multiplier).

// iOS: pagkakaiba sa pagitan ng line height at line spacing
let paragraphStyle = NSMutableParagraphStyle()

// 1. Direktang pagtatakda ng line height
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24

// 2. Line spacing (karagdagang espasyo sa pagitan ng mga linya)
paragraphStyle.lineSpacing = 4.0  // idinagdag sa natural na line height ng font

Ang pangunahing pagkakaiba: kung itatakda mo ang minimumLineHeight, lahat ng linya ay magkakaroon ng parehong taas, na mabuti para sa rhythmic grid. Kung itatakda mo lamang ang lineSpacing, ang taas ng linya ay magbabago depende sa laki ng font — isang mas flexible ngunit hindi gaanong predictable na diskarte. Para sa mga design system, inirerekomenda ang paggamit ng minimumLineHeight dahil nagbibigay ito ng mahigpit na kontroladong resulta.

Ayon sa IBM Carbon Design System — Typography Guidelines (2025), ang pagkakaiba sa pagitan ng line height at leading ay lalong kapansin-pansin kapag gumagamit ng custom na mga font. Kung ang font ay may malaking built-in na leading (hal., SF Pro), ang lineSpacing = 0 ay nagbibigay ng katanggap-tanggap na resulta. Kung ang leading ng font ay maliit (ilang open-source na font), nang walang karagdagang lineSpacing, ang mga linya ay magmumukhang magkadikit.

Optimal na Line Height para sa mga mobile interface

Ang optimal na line height ay depende sa ilang mga salik: laki ng font, haba ng linya, font, at target na audience. Para sa pangunahing teksto sa mga mobile device (haba ng linya 35–55 character), ang inirerekomendang saklaw ay 1.4–1.6 ng font-size. Ang halagang ito ay nagbibigay ng sapat na vertical interval para sa komportableng paglipat ng tingin sa pagitan ng mga linya nang hindi nawawala ang visual cohesion ng teksto.

Para sa mga heading, kung saan ang haba ng linya ay karaniwang mas maikli (2–6 salita), ang line height ay maaaring mas maliit — 1.1–1.25 ng font-size. Ang mga heading ay hindi nangangailangan ng malaking line spacing, dahil ang pangunahing function nila ay pag-akit ng atensyon, hindi matagal na pagbasa. Bukod pa rito, ang malalaking sukat ng heading (24–32 pt) na may line-height 1.5 ay lilikha ng labis na mga puwang na nakakagambala sa vertical rhythm ng pahina.

• Pangunahing teksto (16–18 pt) — line-height 1.4–1.6. Minimal para sa komportableng pagbasa sa mga mobile device, kung saan ang haba ng linya ay limitado ng lapad ng screen.
• Maliit na teksto (11–13 pt) — line-height 1.3–1.5. Ang maliit na sukat ay nangangailangan ng mas maliit na multiplier, dahil ang mga linya ay mas maikli at ang mata ay mas mabilis na nahahanap ang susunod na linya.
• Malaking teksto (20–32 pt) — line-height 1.1–1.25. Kung mas malaki ang font, mas kaunting relatibong line spacing ang kinakailangan para sa pagkabasa.
• Monospace na teksto — line-height 1.3–1.5. Ang mga monospace na font (para sa code) ay karaniwang may mas malalaking metrics, kaya ang line-height ay maaaring bawasan sa 1.3.

// Flutter: line height sa 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
    );
}

Ayon sa W3C — Accessibility Requirements for Typography (2025), ang line height na mas mababa sa 1.2 para sa pangunahing teksto ay itinuturing na hadlang sa accessibility: ang mga user na may dyslexia at visual impairments ay nakakaranas ng malaking kahirapan sa pagbasa ng siksik na teksto. Inirerekomenda ng WCAG 2.2 ang line-height na hindi bababa sa 1.5 para sa pangunahing nilalaman, gayunpaman sa mga mobile interface ang halagang ito ay maaaring bawasan sa 1.4 dahil sa limitadong lapad ng screen.

Line Height sa iOS: UIKit at SwiftUI

Sa iOS, ang line height ay pinamamahalaan sa pamamagitan ng NSMutableParagraphStyle o mga built-in na modifier ng SwiftUI. Sa UIKit, tatlong pangunahing property ang available: minimumLineHeight at maximumLineHeight (nagtatakda ng eksaktong taas ng linya) at lineSpacing (karagdagang espasyo sa pagitan ng mga linya). Kapag gumagamit ng TextKit (NSTextStorage, NSLayoutManager), ang line height ay isinasaalang-alang sa lineFragmentRect at nakakaapekto sa pagkalkula ng geometry ng text block.

// iOS UIKit: pagtatakda ng line height sa pamamagitan ng NSMutableParagraphStyle
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24
// Mahalaga: 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
)

Sa SwiftUI, ang line height ay itinatakda sa pamamagitan ng modifier na .lineSpacing(value), na nagdaragdag ng karagdagang espasyo sa pagitan ng mga linya, o sa pamamagitan ng .font na may custom na TextStyle na may kasamang line height. Sinusuportahan din ng SwiftUI ang mga dynamic na type: ang itinakdang line height ay nag-scale kapag binago ng user ang laki ng font sa mga setting.

// SwiftUI: line height sa pamamagitan ng lineSpacing
Text("Teksto na may custom line spacing
pangalawang linya
ikatlong linya")
    .font(.body)
    .lineSpacing(4)     // karagdagang espasyo sa pagitan ng mga linya

// SwiftUI: fixed line height sa pamamagitan ng custom style
Text("Heading na may line height 1.2")
    .lineSpacing(0)
    .font(Font.system(size: 28, weight: .bold))
    .padding(.vertical, 3)  // kompensasyon para sa tumpak na line-height

Ayon sa Apple HIG — Typography Implementation (2025), kapag gumagamit ng fixed line-height sa pamamagitan ng minimumLineHeight, kailangan tiyakin na ang halaga ay hindi mas maliit kaysa sa natural na line-height ng font. Kung ang minimumLineHeight ay mas maliit kaysa sa ascender + descender, binabalewala ng UIKit ang setting at ginagamit ang natural na taas. Ito ay maaaring humantong sa hindi inaasahang resulta kapag nagpapalit ng font o laki.

Line Height sa Android: View system at Compose

Sa pag-develop ng Android, ang line height ay pinamamahalaan nang magkaiba sa klasikong View system at Jetpack Compose. Sa View system, ginagamit ang paraang TextView.setLineSpacing(extra, multiplier). Ang parameter na extra — karagdagang espasyo sa pixels, multiplier — multiplier ng natural na taas ng linya. Ang resultang taas = natural na 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

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

Sa Jetpack Compose, para sa pamamahala ng line height ay ginagamit ang klase na LineHeightStyle, na nagpapahintulot sa pagtatakda ng alignment at trim ng line spacing. Ito ay nagbibigay ng mas pinong kontrol kaysa sa simpleng multiplier. Halimbawa, maaaring tukuyin na ang karagdagang line spacing ay dapat ipamahagi nang pantay sa itaas at ibaba ng linya (align.Center) o ganap na idagdag sa itaas (align.Top).

// Jetpack Compose: halimbawa ng LineHeightStyle
Text(
    text = "Halimbawang teksto
may custom na LineHeightStyle
sa Jetpack Compose",
    style = MaterialTheme.typography.bodyLarge.copy(
        lineHeight = 24.sp,
        lineHeightStyle = LineHeightStyle(
            alignment = LineHeightStyle.Alignment.Center,
            trim = LineHeightStyle.Trim.Both
        )
    )
)

// Simpleng multiplier sa pamamagitan ng TextStyle
Text(
    text = "Line height multiplier",
    style = LocalTextStyle.current.copy(
        lineHeight = TextUnit(1.5f, TextUnitType.Em)
    )
)

Ayon sa Android Developers — Compose Text Styling (2025), ang LineHeightStyle.Trim.None (default) ay nagpapanatili ng una at huling linya na may mga puwang, na maaaring makagambala sa alignment sa Card o Column. Inirerekomenda ang paggamit ng Trim.Both para sa mga container na may fixed height at Trim.LastLine para sa mga text block kung saan mahalaga ang ibabang gilid.

Line Height sa Flutter: TextStyle at StrutStyle

Sa Flutter, ang line height ay itinatakda sa pamamagitan ng property na height ng klase na TextStyle. Ito ay isang unitless multiplier ng font-size: ang height: 1.5 na may fontSize: 16 ay nagbibigay ng line-height 24.0. Ang halaga ng height ay implicit na pinaparami sa fontSize, kaya kapag nagbago ang laki, ang line-height ay proporsyonal na nag-scale. Nag-aalok din ang Flutter ng StrutStyle — isang mekanismo para pilitin ang fixed line-height anuman ang aktuwal na glyph sa linya.

// Flutter: line height sa pamamagitan ng TextStyle.height
Text(
    'Teksto na may line height 1.5',
    style: TextStyle(
        fontSize: 16,
        height: 1.5,     // line-height = 24 px
    ),
)

// Flutter: StrutStyle para sa fixed line height
Text(
    'Teksto na may StrutStyle
fixed line height
independyente sa glyph',
    style: TextStyle(fontSize: 16),
    strutStyle: StrutStyle(
        fontSize: 16,
        height: 1.5,
        forceStrutHeight: true,
    ),
)

StrutStyle ay lalong kapaki-pakinabang para sa mga listahan na may iba't ibang laki (hal., chat, news feed), kung saan kailangan ang lahat ng linya ay magkaroon ng parehong taas anuman ang nilalaman. Kung walang StrutStyle, ang isang linya na naglalaman lamang ng mga letrang walang descender ay magkakaroon ng mas maliit na aktuwal na taas kaysa sa isang linya na may mga letrang „p" at „y", na nagiging sanhi ng panginginig ng teksto habang nag-s-scroll.

Ayon sa Flutter Documentation — Text Layout (2025), ang StrutStyle na may forceStrutHeight: true ay ginagarantiyahan na ang taas ng bawat linya ay katumbas ng itinakdang halaga, at ang mga aktuwal na glyph ay ia-align sa baseline sa loob ng espasyong ito. Ito ang karaniwang diskarte para sa mga text list kung saan ang vertical rhythm ay kritikal para sa visual na persepsyon.

Adaptive na Line Height para sa iba't ibang screen

Ang mga mobile app ay tumatakbo sa mga device na may iba't ibang laki ng screen, pixel density, at accessibility settings. Line height ay dapat umangkop sa mga pagbabagong ito, na pinapanatili ang pagkabasa. Ang pangunahing panuntunan: gumamit ng walang sukat na mga multiplier (unitless), hindi fixed na halaga sa px o pt, upang ang line-height ay mag-scale kasama ng font-size.

Kapag gumagamit ng Dynamic Type (iOS) o fontScale (Android), ang laki ng font ay maaaring tumaas ng 20–50% kumpara sa base. Ang line-height na itinakda sa pamamagitan ng multiplier ay awtomatikong nag-scale. Kung ang line-height ay itinakda bilang fixed na halaga (hal., 24 px sa font-size 16 pt), kapag ang font ay pinataas sa 22 pt, ang relative line-height ay bababa sa 1.09 — na nasa ibaba na ng threshold ng pagkabasa.

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

// Kalkulahin ang line-height bilang multiplier mula sa dynamic font
let lineHeightMultiplier: CGFloat = 1.5
let lineHeight = font.lineHeight * lineHeightMultiplier

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

Ayon sa Material Design — Responsive Typography (2025), para sa mga tablet at malalaking screen (lapad na higit sa 600 dp), ang line-height ng pangunahing teksto ay inirerekomendang dagdagan ng 0.1–0.2 kumpara sa mga telepono, dahil ang haba ng linya ay nagiging mas malaki. Para sa mga foldable device, kung saan ang lapad ng screen ay nagbabago nang dynamic, ang line-height ay dapat kalkulahin muli sa bawat pagbabago ng configuration.