Tracking trong phát triển di động — bản chất và cài đặt khoảng cách giữa các ký tự

Tracking trong typography là gì

Tracking là sự điều chỉnh khoảng cách giữa các ký tự, áp dụng đồng đều cho tất cả ký tự của một khối văn bản. Khác với kerning, nơi mỗi cặp ký tự nhận được điều chỉnh riêng dựa trên bảng kerning của phông chữ, tracking được đặt dưới dạng một giá trị số duy nhất cho toàn bộ phạm vi. Tracking dương làm tăng khoảng cách (giãn cách), tracking âm làm giảm (siết cách).

Thuật ngữ này bắt nguồn từ typography kim loại, nơi khoảng cách giữa các ký tự được điều chỉnh bằng khoảng cách vật lý giữa các thanh chữ. Trong typography kỹ thuật số, tracking được áp dụng trên bảng kerning: đầu tiên phông chữ áp dụng các cặp kerning tích hợp sẵn, sau đó hệ thống thêm tracking đồng đều vào tất cả các ký tự. Khoảng cách kết quả = kerning + tracking, điều này cần được xem xét khi siết chặt văn bản mạnh mẽ.

Đơn vị đo lường: tracking có thể được chỉ định bằng đơn vị tuyệt đối (điểm, pixel, milimét) và đơn vị tương đối (em, phần trăm của cỡ chữ). Trong phát triển di động, tracking thường được chỉ định bằng điểm (iOS) hoặc sp (Android) dưới dạng giá trị tuyệt đối, trên web bằng em dưới dạng giá trị tương đối. Đơn vị tương đối được ưu tiên cho trợ năng vì chúng thay đổi tỷ lệ khi người dùng thay đổi cỡ chữ.

Tracking và kerning: sự khác biệt cơ bản

Sự nhầm lẫn giữa tracking và kerning là một trong những lỗi phổ biến nhất ở các nhà thiết kế và nhà phát triển mới bắt đầu. Kerning hoạt động ở cấp vi mô — nó điều chỉnh khoảng cách giữa các cặp ký tự cụ thể (AV, Te, To) dựa trên hình dạng của chúng. Tracking hoạt động ở cấp vĩ mô — nó dịch chuyển đồng đều tất cả các ký tự của một đoạn mà không xem xét hình dạng của chúng.

Hiệu ứng trực quan: với kerning, khoảng cách giữa các cặp ký tự khác nhau sẽ khác nhau — giữa A và V nhỏ hơn giữa A và I, bởi vì hình dạng của các chữ cái bù trừ lẫn nhau. Với tracking, tất cả khoảng cách đều giống nhau — giữa A và V, A và I, T và o — cùng một sự dịch chuyển ở mọi nơi. Điều này làm cho tracking trở thành công cụ điều chỉnh toàn cục và kerning trở thành công cụ tinh chỉnh.

Sử dụng kết hợp: trong typography giao diện, tracking và kerning được sử dụng cùng nhau. Phông chữ bao gồm bảng kerning để tối ưu hóa cơ bản và nhà phát triển thêm tracking cho mục đích tạo kiểu hoặc trợ năng. Bảng kerning được áp dụng trước, sau đó tracking được thêm vào phía trên. Với tracking âm (siết chặt), các cặp kerning có thể tạo ra sự chồng lấn không mong muốn — hãy kiểm tra các kết hợp có vấn đề.

Tracking dương và âm: khi nào sử dụng

Tracking dương làm tăng khoảng cách giữa các ký tự. Nó được sử dụng để cải thiện khả năng đọc của văn bản nhỏ (10–13pt), nơi các ký tự bị trộn lẫn về mặt thị giác ở khoảng cách tiêu chuẩn. Nó cũng được sử dụng trong trợ năng cho người dùng mắc chứng khó đọc — khoảng cách giữa các ký tự tăng lên giúp nhận dạng chữ cái dễ dàng hơn. Giá trị điển hình: 0.3–1pt cho iOS, 0.02–0.05em cho web.

Tracking âm làm giảm khoảng cách giữa các ký tự. Nó được sử dụng trong các tiêu đề (từ 24pt) và văn bản nhấn mạnh, nơi văn bản dày đặc trông gắn kết và hiện đại. Các kích cỡ lớn chịu được việc siết chặt tốt vì khoảng cách giữa các ký tự lớn về mặt thị giác. Giá trị điển hình: từ -0.3 đến -1pt. Giới hạn: với tracking dưới -1pt, các ký tự có thể chồng lên nhau, đặc biệt ở các cặp có yếu tố nhô ra (fi, fj, TT).

Quy tắc thực nghiệm: đối với mỗi cỡ chữ, có một phạm vi tracking chấp nhận được. Phông chữ càng lớn thì càng cần ít tracking để có khả năng đọc tối ưu. Công thức: tracking tối ưu ≈ font-weight × 0.01 − font-size × 0.001. Đối với phông chữ đậm (weight 700) ở 16pt: 700 × 0.01 − 16 × 0.001 = 6,84, sau khi điều chỉnh theo kiểu chữ sẽ cho khoảng 0.5pt tracking dương.

Tracking cho các loại văn bản khác nhau

Văn bản nội dung (14–18pt): không cần tracking hoặc tối thiểu dương 0.1–0.3pt. Các phông chữ chuyên nghiệp đã có khoảng cách tối ưu cho văn bản nội dung. Bất kỳ sự can thiệp nào vào tracking của văn bản nội dung phải được biện minh bởi thiết kế hoặc yêu cầu trợ năng. Tiêu đề (20–36pt): tracking âm từ -0.3 đến -0.8pt có thể chấp nhận được tùy theo kiểu chữ và trọng lượng. Tất cả chữ hoa (ALL CAPS): tracking dương 0.5–2pt được khuyên dùng vì các chữ in hoa không có đường lên và đường xuống và trộn lẫn về mặt thị giác nếu không có khoảng cách bổ sung.

Đặc thù kiểu chữ: các phông chữ có hình dạng grotesque (Helvetica, Inter, SF Pro) chịu được tracking âm tốt hơn các kiểu chữ có chân (Times, Georgia, PT Serif). Ở các phông chữ có chân, các chân chữ tạo ra kết nối thị giác bổ sung giữa các chữ cái và việc siết chặt làm cho văn bản không thể đọc được. Đối với các kiểu chữ có chân, chỉ nên sử dụng tracking dương.

Triển khai tracking trên iOS và Android

Trên iOS, tracking được triển khai thông qua cùng thuộc tính .kern trong NSAttributedString như kerning, với một điểm khác biệt: đối với tracking, một giá trị số khác nil được chỉ định. nil có nghĩa là kerning mặc định (từ bảng phông chữ), 0 vô hiệu hóa kerning, bất kỳ số nào khác có nghĩa là tracking trên bảng kerning. Điều này có nghĩa là khi .kern = 2 được đặt, tất cả các ký tự nhận được +2pt khoảng cách giữa các ký tự trên các cặp kerning tích hợp sẵn.

let text = "Heading with tracking"
let attributedString = NSMutableAttributedString(string: text)

// Tracking dương +0.8pt
attributedString.addAttribute(
    .kern,
    value: 0.8,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// UILabel với tracking
label.attributedText = attributedString

SwiftUI sử dụng bộ sửa đổi .tracking() trên Text, chấp nhận CGFloat. Không giống UIKit, tracking của SwiftUI áp dụng cho tất cả văn bản trong bộ sửa đổi và không thể là một phần mà không chia thành nhiều khối Text. SwiftUI tự động xử lý sự kết hợp của kerning và tracking, áp dụng tracking trên bảng kerning của phông chữ.

Android sử dụng thuộc tính letterSpacing trong TextView, được chỉ định bằng em (hệ số nhân tương đối với cỡ chữ). Giá trị 0 có nghĩa là tracking mặc định, 0.05 có nghĩa là tăng 5% của em, -0.02 có nghĩa là giảm. Trong Android, letterSpacing hoạt động như tracking (đồng nhất cho tất cả ký tự), trong khi bảng kerning của phông chữ được áp dụng tự động ở cấp công cụ kết xuất Minikin.

// Trong bố cục XML
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with tracking"
    android:letterSpacing="0.08"
    android:textSize="12sp" />

// Lập trình trong Kotlin
val textView: TextView = findViewById(R.id.smallText)
textView.letterSpacing = 0.08f

Compose trong Android sử dụng tham số letterSpacing trong TextStyle, được chỉ định bằng sp. Ví dụ, TextStyle(letterSpacing = 0.5.sp) cho tracking 0.5 sp. Không giống cách tiếp cận XML, Compose cho phép kết hợp letterSpacing với các tham số typography khác trong một đối tượng TextStyle duy nhất, đơn giản hóa việc tạo hệ thống thiết kế.

Cấu hình letter-spacing trong phát triển web

Trên web, tracking được triển khai thông qua thuộc tính CSS letter-spacing, chấp nhận mọi đơn vị độ dài hoặc từ khóa normal. Giá trị normal tương ứng với 0 (không có khoảng cách bổ sung giữa các ký tự). Thuộc tính này được kế thừa, hỗ trợ giá trị âm và có thể được tạo hiệu ứng. Theo CSS Specification, letter-spacing được áp dụng sau bảng kerning của phông chữ.

/* Positive tracking for small text */
.caption {
    font-size: 11px;
    letter-spacing: 0.03em;
}

/* Negative tracking for headings */
h1 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Tracking for uppercase */
.uppercase-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

em và px: letter-spacing bằng em thay đổi tỷ lệ khi font-size thay đổi và được ưu tiên cho trợ năng. px không thay đổi tỷ lệ và có thể gây ra sự không nhất quán khi trình duyệt phóng to văn bản. Khuyên dùng: luôn sử dụng em cho letter-spacing. Ngoại lệ là các trường hợp tracking phải giữ cố định bất kể kích cỡ, chẳng hạn như trong logo.

Hiệu ứng letter-spacing: thuộc tính hỗ trợ chuyển tiếp và hiệu ứng CSS, cho phép tạo các hiệu ứng hiển thị văn bản mượt mà. Hiệu ứng từ letter-spacing: -0.05em đến letter-spacing: 0.01em khi tải tiêu đề là một kỹ thuật phổ biến trong các giao diện hiện đại. Hiệu suất: hiệu ứng letter-spacing gây ra reflow (tính toán lại bố cục) vì nó thay đổi chiều rộng của văn bản. Sử dụng transform và opacity cho các hiệu ứng hiệu suất cao khi có thể.

Trợ năng và tracking trong giao diện di động

Tracking ảnh hưởng trực tiếp đến khả năng đọc văn bản cho người dùng khiếm thị và mắc chứng khó đọc. Hướng dẫn WCAG 2.2 1.4.12 (Khoảng cách văn bản) yêu cầu văn bản không được mất nội dung khi khoảng cách giữa các ký tự, dòng và đoạn được tăng lên đến các giá trị nhất định. letter-spacing phải chịu được việc tăng lên 0.12em mà không bị cắt nội dung hoặc chồng lấn phần tử.

Chứng khó đọc: nghiên cứu của British Dyslexia Association cho thấy việc tăng letter-spacing lên 0.12em cải thiện tốc độ đọc ở người dùng mắc chứng khó đọc từ 10–15%. Tuy nhiên, điều này mang tính cá nhân — một số người dùng thích khoảng cách tiêu chuẩn. iOS và Android cung cấp cài đặt trợ năng hệ thống để tăng khoảng cách giữa các ký tự mà ứng dụng phải tôn trọng.

Quy tắc cho nhà phát triển: không sử dụng chiều rộng/cao cố định có thể bị hỏng khi tăng letter-spacing. Tránh overflow: hidden trên các container văn bản mà không kiểm tra trợ năng. Kiểm tra giao diện với letter-spacing tăng lên 0.12em trên tất cả các màn hình. Nếu thiết kế bị hỏng, hãy xem xét lại bố cục thay vì bỏ qua trợ năng.

Hỗ trợ nền tảng: iOS tự động tăng letter-spacing khi tính năng Văn bản lớn hơn được bật trong cài đặt trợ năng, nếu sử dụng UIFont.preferredFont. Android cung cấp tùy chọn tương tự thông qua FontScale. Nhà phát triển không được vô hiệu hóa các cài đặt này. Kịch bản kiểm tra: bật kích thước văn bản tối đa trong cài đặt thiết bị và kiểm tra xem tracking có làm hỏng bố cục giao diện không.