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 (ออกเสียงว่า «เลดิง») เป็นศัพท์การพิมพ์ทางประวัติศาสตร์ที่หมายถึงระยะห่างระหว่างบรรทัดจากเส้นฐานถึงเส้นฐานลบด้วยความสูงของกลิฟ ในการพิมพ์เรียงโลหะ leading คือแผ่นตะกั่วที่สอดระหว่างบรรทัดเพื่อเพิ่มระยะห่าง Line height เป็นแนวคิดที่ทันสมัยกว่าซึ่งรวมทั้งความสูงของฟอนต์และ leading

ในทางปฏิบัติ ความแตกต่างมีความสำคัญเมื่อแปลการออกแบบจาก Figma หรือ Sketch เป็นโค้ด เครื่องมือออกแบบมักจะระบุ line-height (หรือเพียงแค่ความสูงของบรรทัด) API ของแพลตฟอร์มมือถืออาจใช้คำศัพท์ต่างกัน: iOS ใช้ lineSpacing (ใกล้กับ leading มากกว่า) ร่วมกับ minimumLineHeight/maximumLineHeight, Android ใช้ LineHeightStyle พร้อม alignment และ trim, 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 ตัวอักษร) ช่วงที่แนะนำคือ 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 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) 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: 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 ยังรองรับชนิดไดนามิก (Dynamic Type): 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) เมื่อใช้ 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

// 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 ใช้คลาส LineHeightStyle เพื่อจัดการ line height ซึ่งช่วยให้กำหนดการจัดแนว (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 สำหรับบล็อกข้อความที่ขอบล่างมีความสำคัญ

Line Height ใน Flutter: TextStyle และ StrutStyle

ใน Flutter line height ถูกกำหนดผ่านคุณสมบัติ height ของคลาส TextStyle เป็นตัวคูณไม่มีหน่วยของ font-size: height: 1.5 กับ fontSize: 16 ให้ 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) StrutStyle ที่มี forceStrutHeight: true รับประกันว่าความสูงของแต่ละบรรทัดเท่ากับค่าที่กำหนด และกลิฟจริงจะจัดแนวตามเส้นฐานภายในพื้นที่นี้ นี่เป็นวิธีมาตรฐานสำหรับรายการข้อความที่จังหวะแนวตั้งมีความสำคัญต่อการรับรู้ทางสายตา

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: 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 ใหม่ทุกครั้งที่มีการเปลี่ยนแปลงการกำหนดค่า