Khoảng cách chữ (Letter Spacing / Tracking)

Khoảng cách giữa các ký tự trong văn bản. Được điều khiển bằng thuộc tính CSS letter-spacing, ảnh hưởng đến khả năng đọc và ấn tượng thiết kế. Khác với kerning (điều chỉnh cặp ký tự cụ thể), letter spacing điều chỉnh đồng đều toàn bộ văn bản.

Khoảng cách chữ (letter-spacing / tracking) là khoảng cách giữa các ký tự trong văn bản. Trong khi kerning điều chỉnh khoảng cách giữa các cặp ký tự cụ thể như "AV" hay "To", thì tracking (letter-spacing) điều chỉnh đồng đều khoảng cách giữa tất cả các ký tự. Trong CSS, thuộc tính letter-spacing được sử dụng để kiểm soát giá trị này.

Tiếng Việt sử dụng bảng chữ cái Latin nên khoảng cách chữ mặc định được xác định bởi thông số metric (thông tin chiều rộng ký tự) tích hợp trong phông chữ. Tuy nhiên, hệ thống dấu thanh tiếng Việt tạo ra thách thức đặc biệt: khi tăng letter-spacing, khoảng cách giữa ký tự gốc và dấu kết hợp (combining mark) không thay đổi, nhưng khoảng cách giữa các ký tự có dấu với nhau tăng lên, đôi khi tạo cảm giác không đều.

Trong thiết kế tiêu đề và logo, việc tăng khoảng cách chữ (tracking dương) tạo cảm giác sang trọng và thoáng đãng. Ngược lại, giảm khoảng cách chữ (tracking âm) tạo cảm giác chặt chẽ và mạnh mẽ. Với tiêu đề tiếng Việt, giá trị letter-spacing: 0.05em đến 0.1em thường cho kết quả đẹp mắt, nhưng cần kiểm tra kỹ với các ký tự có dấu để đảm bảo dấu thanh không bị chồng lấn.

Khoảng cách chữ không ảnh hưởng đến số ký tự đếm được, nhưng ảnh hưởng lớn đến không gian vật lý mà văn bản chiếm. Số ký tự vừa trên danh thiếp, tiêu đề poster, hay nhãn nút bấm đều phụ thuộc vào cài đặt letter-spacing. Tăng letter-spacing 0.1em cho văn bản 10 ký tự sẽ làm văn bản dài thêm khoảng 1 ký tự.

Về khả năng tiếp cận, tiêu chuẩn WCAG 2.1 mục 1.4.12 (Text Spacing) yêu cầu nội dung không bị hỏng khi người dùng tăng khoảng cách chữ lên ít nhất 0.12em. Nếu thiết kế nhồi nhét văn bản vào container có chiều rộng cố định, việc tăng letter-spacing có thể khiến văn bản tràn ra ngoài hoặc chồng lấn. Thiết kế responsive cần tính đến khả năng người dùng tùy chỉnh khoảng cách chữ.

Thuộc tính CSS letter-spacing có tính kế thừa. Giá trị đặt ở phần tử cha sẽ áp dụng cho tất cả phần tử con. Nếu đặt letter-spacing rộng cho tiêu đề, các liên kết bên trong cũng sẽ có cùng khoảng cách. Để tránh kế thừa không mong muốn, cần đặt letter-spacing: normal cho phần tử con khi cần thiết.

Chia sẻ bài viết này