Line Height trong phát triển ứng dụng — định nghĩa và ảnh hưởng đến kiểu chữ

Line Height trong kiểu chữ là gì

Line Height (chiều cao dòng) là một tham số kiểu chữ cơ bản xác định khoảng cách giữa các đường cơ sở (baseline) của các dòng liên tiếp. Trong phát triển web và di động, line height thiết lập nhịp điệu dọc của văn bản: mỗi dòng chiếm một chiều cao nhất định và tham số này cộng dồn khi chuyển sang dòng tiếp theo. Line height không chỉ bao gồm chiều cao thực tế của glyph (ascender + descender) mà còn bao gồm khoảng trống bổ sung cải thiện khả năng đọc.

Về mặt toán học, line height được biểu diễn như sau: line-height = font-size × multiplier. Nếu font-size = 16 px và multiplier = 1,5, thì line-height = 24 px. Khoảng cách dòng (leading) trong trường hợp này sẽ là 24 - (ascender + descender) pixel. Hầu hết các hệ thống thiết kế và nền tảng sử dụng hệ số nhân vì nó tự động thay đổi tỷ lệ khi kích thước phông chữ thay đổi.

Theo Material Design Type Scale (2025), line height là một trong ba tham số chính của hệ thống kiểu chữ của ứng dụng, cùng với font-size và font-weight. Các giá trị line height nhất quán cho tất cả các cấp của phân cấp kiểu chữ tạo ra nhịp điệu dọc làm cho giao diện gắn kết về mặt thị giác. Độ lệch line-height 10% so với giá trị tối ưu đã có thể nhận thấy bằng mắt thường và làm giảm chất lượng cảm nhận của giao diện.

Line Height và Leading: sự khác biệt

Leading (phát âm là «lê-đinh») là một thuật ngữ kiểu chữ lịch sử chỉ khoảng cách giữa các dòng từ đường cơ sở đến đường cơ sở trừ đi chiều cao glyph. Trong sắp chữ kim loại, leading là những dải chì được chèn giữa các dòng để tăng khoảng cách. Line height là một khái niệm hiện đại hơn bao gồm cả chiều cao phông chữ và leading.

Trong thực tế, sự khác biệt rất quan trọng khi chuyển đổi thiết kế từ Figma hoặc Sketch sang mã. Các công cụ thiết kế thường chỉ định line-height (hoặc đơn giản là chiều cao dòng). API của các nền tảng di động có thể sử dụng các thuật ngữ khác nhau: iOS sử dụng lineSpacing (gần với leading hơn) cùng với minimumLineHeight/maximumLineHeight, Android sử dụng LineHeightStyle với alignment và trim, Flutter sử dụng height (hệ số nhân không đơn vị).

// 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

Sự khác biệt chính: nếu bạn đặt minimumLineHeight, tất cả các dòng sẽ có cùng chiều cao, tốt cho lưới nhịp điệu. Nếu bạn chỉ đặt lineSpacing, chiều cao dòng sẽ thay đổi tùy theo kích thước phông chữ — đây là cách tiếp cận linh hoạt hơn nhưng ít dự đoán hơn. Đối với hệ thống thiết kế, minimumLineHeight được khuyến nghị vì nó cho kết quả được kiểm soát chặt chẽ.

Theo IBM Carbon Design System — Typography Guidelines (2025), sự khác biệt giữa line height và leading đặc biệt đáng chú ý khi sử dụng phông chữ tùy chỉnh. Nếu phông chữ có leading tích hợp lớn (ví dụ: SF Pro), lineSpacing = 0 cho kết quả chấp nhận được. Nếu leading của phông chữ nhỏ (một số phông chữ mã nguồn mở), các dòng sẽ trông dính vào nhau nếu không có lineSpacing bổ sung.

Line Height tối ưu cho giao diện di động

Line height tối ưu phụ thuộc vào một số yếu tố: kích thước phông chữ, độ dài dòng, kiểu chữ và đối tượng mục tiêu. Đối với văn bản chính trên thiết bị di động (độ dài dòng 35–55 ký tự), phạm vi khuyến nghị là 1,4–1,6 lần font-size. Giá trị này cung cấp khoảng cách dọc đủ để mắt di chuyển thoải mái giữa các dòng mà không mất tính gắn kết thị giác của văn bản.

Đối với tiêu đề, nơi độ dài dòng thường ngắn hơn (2–6 từ), line height có thể nhỏ hơn — 1,1–1,25 lần font-size. Tiêu đề không yêu cầu khoảng cách dòng lớn vì chức năng chính của chúng là thu hút sự chú ý, không phải đọc kéo dài. Ngoài ra, kích thước phông chữ tiêu đề lớn (24–32 pt) với line-height 1,5 sẽ tạo ra khoảng trống quá mức phá vỡ nhịp điệu dọc của trang.

• Văn bản chính (16–18 pt) — line-height 1,4–1,6. Tối thiểu để đọc thoải mái trên thiết bị di động, nơi độ dài dòng bị giới hạn bởi chiều rộng màn hình.
• Văn bản nhỏ (11–13 pt) — line-height 1,3–1,5. Kích thước phông nhỏ yêu cầu hệ số nhân nhỏ hơn vì dòng ngắn hơn và mắt tìm dòng tiếp theo nhanh hơn.
• Văn bản lớn (20–32 pt) — line-height 1,1–1,25. Phông càng lớn, khoảng cách dòng tương đối càng ít cần thiết cho khả năng đọc.
• Văn bản đơn cách — line-height 1,3–1,5. Phông đơn cách (cho mã) thường có số liệu lớn hơn, do đó có thể giảm line-height xuống 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
    );
}

Theo W3C — Accessibility Requirements for Typography (2025), line height dưới 1,2 cho văn bản chính được coi là rào cản tiếp cận: người dùng mắc chứng khó đọc và khiếm thị gặp khó khăn đáng kể khi đọc văn bản dày đặc. WCAG 2.2 khuyến nghị line-height ít nhất 1,5 cho nội dung chính, mặc dù trong giao diện di động, giá trị này có thể giảm xuống 1,4 do chiều rộng màn hình hạn chế.

Line Height trên iOS: UIKit và SwiftUI

Trên iOS, line height được kiểm soát thông qua NSMutableParagraphStyle hoặc các bộ điều chỉnh tích hợp của SwiftUI. UIKit cung cấp ba thuộc tính chính: minimumLineHeight và maximumLineHeight (đặt chiều cao dòng chính xác) và lineSpacing (khoảng trống bổ sung giữa các dòng). Khi sử dụng TextKit (NSTextStorage, NSLayoutManager), line height được tính đến trong lineFragmentRect và ảnh hưởng đến tính toán hình học của khối văn bản.

// 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
)

Trong SwiftUI, line height được đặt thông qua bộ điều chỉnh .lineSpacing(value), thêm khoảng trống bổ sung giữa các dòng, hoặc thông qua .font với TextStyle tùy chỉnh bao gồm line height. SwiftUI cũng hỗ trợ Kiểu động (Dynamic Type): line height được chỉ định thay đổi tỷ lệ khi người dùng thay đổi kích thước phông chữ trong cài đặt.

// 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

Theo Apple HIG — Typography Implementation (2025), khi sử dụng line-height cố định qua minimumLineHeight, cần đảm bảo giá trị không nhỏ hơn line-height tự nhiên của phông chữ. Nếu minimumLineHeight nhỏ hơn ascender + descender, UIKit bỏ qua cài đặt và sử dụng chiều cao tự nhiên. Điều này có thể dẫn đến kết quả không mong muốn khi thay đổi phông chữ hoặc kích thước.

Line Height trên Android: hệ thống View và Compose

Trong phát triển Android, line height được quản lý khác nhau trong hệ thống View cổ điển và Jetpack Compose. Trong hệ thống View, phương thức TextView.setLineSpacing(extra, multiplier) được sử dụng. Tham số extra là khoảng trống bổ sung tính bằng pixel, multiplier là hệ số của chiều cao dòng tự nhiên. Chiều cao kết quả = line-height tự nhiên × 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" />

Trong Jetpack Compose, lớp LineHeightStyle được sử dụng để quản lý line height, cho phép đặt Căn chỉnh (Alignment) và Cắt (Trim) của khoảng trống giữa các dòng. Điều này cung cấp kiểm soát tinh tế hơn so với một hệ số nhân đơn giản. Ví dụ: bạn có thể chỉ định rằng khoảng trống bổ sung giữa các dòng được phân bổ đều phía trên và phía dưới dòng (align.Center) hoặc được thêm hoàn toàn phía trên (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)
    )
)

Theo Android Developers — Compose Text Styling (2025), LineHeightStyle.Trim.None (mặc định) giữ khoảng trống ở dòng đầu tiên và dòng cuối cùng, có thể phá vỡ căn chỉnh trong Card hoặc Column. Trim.Both được khuyến nghị cho các vùng chứa có chiều cao cố định và Trim.LastLine cho các khối văn bản nơi cạnh dưới quan trọng.

Line Height trong Flutter: TextStyle và StrutStyle

Trong Flutter, line height được đặt thông qua thuộc tính height của lớp TextStyle. Đây là một hệ số nhân không đơn vị của font-size: height: 1,5 với fontSize: 16 cho line-height 24,0. Giá trị height ngầm nhân với fontSize, do đó line-height thay đổi tỷ lệ tương ứng khi kích thước phông chữ thay đổi. Flutter cũng cung cấp StrutStyle — một cơ chế để buộc line-height cố định bất kể glyph thực tế trong dòng.

// 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 đặc biệt hữu ích cho danh sách có kích thước phông chữ khác nhau (ví dụ: trò chuyện, bảng tin), nơi tất cả các dòng cần có cùng chiều cao bất kể nội dung. Nếu không có StrutStyle, một dòng chỉ chứa chữ cái không có descender sẽ có chiều cao thực tế nhỏ hơn dòng có chữ cái như «p» và «y», gây ra hiện tượng rung văn bản khi cuộn.

Theo Flutter Documentation — Text Layout (2025), StrutStyle với forceStrutHeight: true đảm bảo chiều cao của mỗi dòng bằng giá trị được chỉ định và các glyph thực tế được căn chỉnh theo đường cơ sở trong không gian này. Đây là cách tiếp cận tiêu chuẩn cho danh sách văn bản nơi nhịp điệu dọc rất quan trọng đối với nhận thức thị giác.

Line Height thích ứng cho các màn hình khác nhau

Các ứng dụng di động hoạt động trên các thiết bị có kích thước màn hình, mật độ pixel và cài đặt tiếp cận khác nhau. Line height phải thích ứng với những thay đổi này trong khi vẫn duy trì khả năng đọc. Nguyên tắc chính: sử dụng hệ số nhân không đơn vị (unitless), không phải giá trị cố định bằng px hoặc pt, để line-height thay đổi tỷ lệ cùng với font-size.

Khi sử dụng Dynamic Type (iOS) hoặc fontScale (Android), kích thước phông chữ có thể tăng 20–50% so với đường cơ sở. Line-height được chỉ định qua hệ số nhân tự động thay đổi tỷ lệ. Nếu line-height được đặt dưới dạng giá trị cố định (ví dụ: 24 px với font-size 16 pt), khi phông chữ tăng lên 22 pt, line-height tương đối giảm xuống 1,09 — đã dưới ngưỡng khả năng đọc.

// 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

Theo Material Design — Responsive Typography (2025), đối với máy tính bảng và màn hình lớn (rộng trên 600 dp), nên tăng line-height của văn bản chính thêm 0,1–0,2 so với điện thoại, vì độ dài dòng trở nên lớn hơn. Đối với thiết bị có thể gập lại, nơi chiều rộng màn hình thay đổi động, line-height phải được tính toán lại sau mỗi lần thay đổi cấu hình.