Khi học CSS cơ bản, chúng ta thường tập trung vào box model, định vị, font-family, font-size. Để nâng cao chất lượng typography, cần quan tâm đến font-kerning, letter-spacing và word-spacing. Những chi tiết này biến website từ bình thường thành chuyên nghiệp.
Font Kerning (Kerning font)
Font-kerning xác định khoảng cách giữa hai ký tự riêng biệt. Font được kerning tốt có độ hấp dẫn thị giác cao hơn nhờ khoảng cách đều đặn giữa các chữ cái.
Thuộc tính font-kerning có 3 giá trị: none, normal, auto.
#nokern { font-kerning: none; }
#kern { font-kerning: normal; }
auto: Trình duyệt tự quyết định (có thể tắt kerning trên font nhỏ vì giảm readability).normal: Áp dụng kerning nếu font hỗ trợ.none: Tắt kerning.
Hiệu ứng rõ nhất trên cặp ký tự như 'AV', 'Ta' — khoảng cách từ chân chữ (serif) của ký tự này đến chân chữ của ký tự tiếp theo.
Letter-Spacing (Khoảng cách chữ cái)
Khác với kerning (điều chỉnh từng cặp), letter-spacing áp dụng khoảng cách đồng đều cho tất cả chữ cái trong một dòng. Giá trị là độ dài (px, rem, em) và có thể dương hoặc âm.
#little-spacing { letter-spacing: 1px; }
#big-spacing { letter-spacing: 5px; }
Word-Spacing (Khoảng cách từ)
word-spacing là khoảng cách giữa các từ. Mặc định là 0.25em. Cũng nhận giá trị độ dài dương/âm.
#little-spacing { word-spacing: 1rem; }
#big-spacing { word-spacing: 5rem; }
Tóm tắt sự khác biệt
- font-kerning: Điều chỉnh khoảng cách giữa các cặp ký tự cụ thể (dựa trên dữ liệu font).
- letter-spacing: Thêm/bớt khoảng cách đồng đều giữa mọi ký tự.
- word-spacing: Thêm/bớt khoảng cách giữa các từ.
Hỗ trợ trình duyệt rộng rãi cho cả ba. font-kerning không hỗ trợ trên Internet Explorer.