Kerning: nó là gì và cách điều chỉnh khoảng cách giữa các chữ cái

Kerning trong typography là gì

Kerning là quá trình điều chỉnh thủ công hoặc tự động khoảng cách giữa các cặp ký tự cụ thể để loại bỏ các hiện tượng quang học. Vấn đề phát sinh vì mỗi chữ cái có một hình dạng độc đáo: A có đỉnh nhọn, V có độ nghiêng phải, T có thanh ngang rộng. Khi những chữ cái này đứng cạnh nhau, khoảng cách giữa các đường viền của chúng trông không đồng đều, mặc dù set width là giống nhau.

Bảng kerning của phông chữ chứa các cặp ký tự với giá trị điều chỉnh được đặt trước. Một phông chữ tốt có thể có từ 300 đến 2000 cặp kerning. Các phông chữ chuyên nghiệp — như SF Pro của Apple hay Roboto của Google — bao gồm các bảng kerning được xây dựng tỉ mỉ bao phủ mọi tổ hợp chữ cái Latin và Cyrillic có thể. Theo Fontshop Guide to Kerning, chất lượng của bảng kerning là một trong những chỉ số chính của một phông chữ chuyên nghiệp.

Hiệu ứng thị giác của kerning đặc biệt dễ thấy trong các tiêu đề, logo và văn bản cỡ lớn (24 pt trở lên). Trong văn bản nhỏ (12–14 pt), khoảng cách chữ hẹp hơn và kerning ít thấy hơn, mặc dù nó vẫn hoạt động. Trình duyệt web và hệ điều hành di động áp dụng kerning tích hợp theo mặc định, nhưng nhà phát triển có thể tắt hoặc điều chỉnh nó cho các thiết kế cụ thể.

Kerning và Tracking: khác biệt chính

Các nhà phát triển mới thường nhầm lẫn kerning và tracking, nhưng đây là các tham số typography khác nhau về cơ bản. Kerning hoạt động ở cấp độ cặp ký tự và điều chỉnh khoảng cách chỉ giữa các tổ hợp cụ thể nơi hình dạng chữ tạo ra sự mất cân bằng thị giác. Tracking (letter-spacing) thay đổi khoảng cách giữa tất cả các ký tự trong đoạn văn bản được chọn một cách đồng đều — tăng hoặc giảm đều nhau.

Khi nào tracking được sử dụng: để cải thiện khả năng đọc của văn bản nhỏ (tracking dương), để tạo tiêu đề nhấn mạnh (tracking âm), để tạo kiểu văn bản trong thiết kế giao diện. Tracking được đặt dưới dạng giá trị số và áp dụng cho mọi ký tự, bao gồm các cặp đã được kerning — các hiệu chỉnh kerning được giữ nguyên nhưng một sự dịch chuyển tổng thể được thêm vào bên trên.

Quy tắc quan trọng: với tracking âm (nén), hãy theo dõi các cặp kerning — chúng có thể tạo ra sự chồng chéo chữ không mong muốn. Trong CSS, thuộc tính letter-spacing được áp dụng lên trên bảng kerning của phông chữ, và với độ nén mạnh (letter-spacing: -1px), các hiệu chỉnh kerning có thể gây ra sự hợp nhất các ký tự.

Triển khai kerning trên iOS qua NSAttributedString

Trên iOS, kerning được quản lý qua thuộc tính .kern trong NSAttributedString. Giá trị thuộc tính là Float, trong đó số dương tăng khoảng cách, số âm giảm và 0 tắt kerning. Giá trị mặc định là nil, có nghĩa là sử dụng bảng kerning của phông chữ. API chính để làm việc với kerning là NSMutableAttributedString với thuộc tính được thêm vào một phạm vi văn bản.

let text = "Kerning in mobile interfaces"
let attributedText = NSMutableAttributedString(
    string: text
)

// Bật kerning (sử dụng bảng phông chữ)
attributedText.addAttribute(
    .kern,
    value: 0.5,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// Áp dụng cho UILabel
label.attributedText = attributedText

Giá trị mặc định .kern = nil bật kerning từ bảng phông chữ. Nếu bạn cần tắt hoàn toàn kerning, hãy đặt .kern = 0. Giá trị 0.0 và nil là các trạng thái khác nhau: nil sử dụng bảng, 0 buộc tất cả các cặp kerning về 0. Theo Apple Text Programming Guide, việc đặt rõ ràng 0 rất hữu ích cho văn bản đơn cách hoặc các trường hợp kerning gây cản trở — ví dụ, trong các nút có chiều rộng cố định.

SwiftUI cung cấp bổ ngữ .kerning() cho Text. Không giống như UIKit, trong SwiftUI, kerning được đặt ở cấp độ view, không phải trên chuỗi thuộc tính. Bổ ngữ chấp nhận CGFloat và áp dụng cho tất cả văn bản trong khối Text. Để kerning một phần trong SwiftUI, sự kết hợp của toán tử + trên Text và các bổ ngữ riêng lẻ được sử dụng.

struct KerningView: View {
    var body: some View {
        Text("Tiêu đề với kerning")
            .kerning(1.0)
            .font(.title)
    }
}

Hiệu suất: NSAttributedString với thuộc tính kerning tính toán lại vị trí ký tự trong quá trình kết xuất. Đối với văn bản tĩnh, điều này xảy ra một lần. Đối với văn bản động (văn bản thay đổi trong UICollectionView) — mỗi lần nó thay đổi. Sử dụng phạm vi lớn với kerning trên chuỗi dài (hơn 500 ký tự) có thể làm giảm FPS khi cuộn.

Cấu hình kerning trên Android qua letterSpacing

Trên Android, kerning được quản lý qua thuộc tính letterSpacing trong TextView và bố cục XML. Thuộc tính có kiểu Float và hoạt động như một hệ số nhân của kích thước em của phông chữ. Giá trị 0 tương ứng với kerning mặc định, số dương tăng khoảng cách, số âm giảm. letterSpacing có sẵn từ API Level 21 (Android 5.0 Lollipop).

Triển khai qua SpannableString cho phép áp dụng kerning cho một phần chuỗi thay vì toàn bộ văn bản. Lớp ScaleXSpan hoặc ReplacementSpan tùy chỉnh được sử dụng để kiểm soát chính xác. Theo Android Developer Guide, ScaleXSpan mở rộng thu nhỏ ký tự theo chiều ngang, mô phỏng sự thay đổi khoảng cách giữa các ký tự, nhưng không cung cấp kiểm soát trực tiếp các cặp kerning.

// Trong bố cục XML
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with kerning"
    android:letterSpacing="0.05" />

// Lập trình trong Kotlin
val textView = findViewById<TextView>(R.id.myTextView)
textView.letterSpacing = 0.05f

Hạn chế: Android không hỗ trợ bảng kerning trực tiếp — letterSpacing hoạt động như tracking cho tất cả các ký tự. Để kerning cặp trên Android, các phông chữ có bảng kerning tích hợp (OpenType GPOS feature kern) được sử dụng. Hỗ trợ phụ thuộc vào phiên bản hệ điều hành và công cụ kết xuất: trên Android 10+, Minikin được sử dụng với hỗ trợ đầy đủ các tính năng OpenType, trên các phiên bản cũ hơn HarfBuzz với hạn chế. Khuyến nghị: hãy kiểm tra hiển thị kerning trên các thiết bị có Android dưới 8.0.

Kerning trong phát triển web qua CSS

Trên web, kerning được kiểm soát qua thuộc tính CSS font-kerning, bật hoặc tắt các bảng kerning tích hợp của phông chữ. Giá trị: auto (trình duyệt quyết định), normal (kerning bật), none (kerning tắt). Thuộc tính được hỗ trợ bởi tất cả các trình duyệt hiện đại từ năm 2016. Theo MDN Web Docs, font-kerning chỉ áp dụng cho phông chữ OpenType có bảng kerning.

Thuộc tính CSS letter-spacing là tương tự của tracking, nhưng cũng được sử dụng cho các hiệu ứng giống kerning. Không giống như font-kerning, letter-spacing thay đổi khoảng cách giữa tất cả các ký tự đồng đều, không xét đến các cặp kerning. Khi cả hai thuộc tính được sử dụng, font-kerning được áp dụng trước, sau đó letter-spacing thêm một sự dịch chuyển đồng đều lên trên.

/* Enable kerning for headings */
h1 {
    font-kerning: normal;
    letter-spacing: 0.02em;
}

/* Disable kerning for monospace */
code, pre {
    font-kerning: none;
}

Tiện ích TypeScript để tính toán letter-spacing tối ưu có xét đến kerning có thể phân tích bảng kerning của phông chữ qua Canvas API. Nhưng trên thực tế, các nhà phát triển web dựa vào font-kerning: normal trong hầu hết các trường hợp cho kết quả tối ưu. Việc điều chỉnh thêm letter-spacing chỉ cần thiết cho các điểm nhấn thiết kế — ví dụ, trên các trang đích với typography lớn.

Khuyến nghị thực tế để cấu hình kerning

Kerning là một công cụ tinh chỉnh và việc áp dụng sai sẽ làm giảm khả năng đọc. Quy tắc đầu tiên: không thay đổi kerning cho văn bản nội dung. Các bảng kerning của phông chữ chuyên nghiệp đã chứa các giá trị tối ưu cho cỡ chữ 12–16pt. Can thiệp vào kerning văn bản nội dung dẫn đến sự không đồng đều và nhiễu thị giác.

Quy tắc thứ hai: đối với tiêu đề từ 24pt, sử dụng kerning dương (0.5–1.5 pt tùy theo phông chữ). Văn bản lớn cần nhiều khoảng cách chữ hơn để dễ đọc. Phông chữ có x-height thấp (ví dụ Didot) cần nhiều kerning hơn phông chữ có x-height cao (ví dụ Helvetica). Dữ liệu tham khảo: trong ứng dụng iOS Apple Music, các tiêu đề sử dụng kerning 0.8 pt.

Quy tắc thứ ba: luôn kiểm tra kerning trên các chuỗi thực tế, không phải Lorem Ipsum. Các tổ hợp ký tự khác nhau tạo ra các hiệu ứng thị giác khác nhau. Đặc biệt chú ý đến các cặp có nguyên âm và phụ âm với các yếu tố nhô ra: AV, Te, To, Wa, LT. Với kerning âm, hãy theo dõi các cặp fi, fl, fj — trong một số phông chữ, chúng có thể hợp nhất mà không có ligature.

Khía cạnh trợ năng: người dùng mắc chứng khó đọc đọc văn bản có kerning dương nhẹ (0.3–0.5 pt) tốt hơn. iOS và Android hỗ trợ các cài đặt trợ năng có thể ghi đè kerning của ứng dụng. Sử dụng UIFontDescriptor với Dynamic Type và xét đến kerning trong cài đặt trợ năng qua UIAccessibility. Quan trọng: không chặn cài đặt kerning của hệ thống — điều này vi phạm WCAG 2.2 Nguyên tắc 1.4.12 về điều chỉnh văn bản.