Tìm hiểu tại sao bạn thường có lợi từ việc dùng chút letter-spacing trên text elements uppercase/all caps — và cách làm với CSS.
Trong typography, khi dùng uppercase/all caps (chữ in hoa) trên text elements, bạn thường cần thêm chút "không gian thở" giữa các chữ cái, nếu không chúng trở nên quá chặt, khó đọc thoải mái.
Letter-spacing còn gọi là tracking. Chúng là từ đồng nghĩa. Cả hai chỉ khoảng cách giữa nhóm chữ cái (từ). Trong giao tiếp, letter-spacing dùng nhiều hơn trên web, tracking dùng hơn trong print typography.
Hãy xem vài ví dụ.
Normal vs. Uppercase
So sánh text elements sau, normal case và all caps/uppercase:
Typography
Typography
Bạn thấy vấn đề không?
Không sao nếu không thấy. Khi dùng font-weight normal/default thường không thành vấn đề. Tùy typeface design và cách dùng.
Trong CSS, normal font-weight có thể khai báo bằng font-weight: normal; hoặc font-weight: 400; — như nhau.
Normal case vs. Uppercase (bold)
Bây giờ so sánh cùng ví dụ, nhưng lần này thêm bold font-weight:
Typography
Typography
Bạn thấy all caps text trông chặt chẽ đến mức nào khi dùng nét chữ dày (bold)? Giờ bạn thấy một số chữ cái chạm nhau.
Trong CSS, bold font-weight khai báo bằng
font-weight: bold;. Có thể dùng numeric values, nhưng chắc chắn bạn biết font family bạn chọn có bao nhiêu font weight options.700thường tương đương bold — nhưng không luôn.
Letter-spacing (aka tracking)
Hãy copy uppercase text element example trước và cho nó 4px letter-spacing, so sánh hai cái:
Typography
Typography
Wow, khác biệt lớn! Ví dụ đầu gần như gợi cảm giác sợ chật chội, cái hai cho hiệu ứng ngược lại.
Trong CSS, letter-spacing khai báo bằng property
letter-spacing, ví dụ:letter-spacing: 4px;Có thể viết có hoặc không dấu gạch ngang (-) trong ngôn ngữ thường, nhưng trong CSS luôn có dấu gạch ngang.
Tôi muốn rõ ràng. Tôi không khuyến nghị ví dụ text hai với letter-spacing luôn là lựa chọn vượt trội. Tùy atmosphere/mood bạn muốn thiết lập cho use case cụ thể.
Một trong những công cụ mạnh nhất thể hiện và củng cố theme phim trên poster là typography. Typographer giỏi sẽ quyết định cẩn trọng về:
- typeface/font-family
- typeface classification (serif, sans-serif, v.v.)
- font-sizes
- letter casing (uppercase, lowercase, v.v.)***
- font-weights (normal, bold, v.v.)
- font styles (regular/normal/italic)
Dù bạn làm movie poster, book cover, food label, hay gì khác, quyết định format typographic nên dựa trên context của task.
Letter-spacing chỉ là một, nhưng element mạnh mẽ của typography:
CAPTIVITY
FREEDOM
Bạn cảm nhận được khác biệt không?
Bỏ qua cảm xúc, hãy cân nhắc: Uppercase text nói chung đã khó đọc hơn normal case, vì cấu trúc đối xứng và tỷ lệ mà chữ cái có từ letter case type này, làm khó phân biệt individual letters trong từ — đặc biệt trong câu hoặc paragraph.
Tóm lại:
- Vì(reader-friendliness) dùng uppercase text thận trọng. Có thể work tốt cho titles hoặc short headings, không phải whole sentences hoặc paragraphs.
- V regla chung, uppercase/all caps text có lợi từ chút, đôi khi nhiều, spacing giữa chữ cái để text dễ "tiêu hóa" hơn.
- Text thẩm mỹ hơn khi không trông như bạn dính các chữ cái lại. Visuals matter.
- Đôi khi tight tracking/letter-spacing chính xác là lựa chọn đúng.
Không phải đen trắng. Context is key.