Chỉnh letter-spacing trong CSS: quy đổi px sang em, giá trị nên dùng và lỗi hay gặp
Công cụ kéo thanh trượt để thấy ngay khoảng cách chữ thay đổi thế nào trên đoạn văn bản của bạn, đồng thời quy đổi giá trị đó sang ba dạng pixel, em và phần trăm của cỡ chữ. Sáu nút đặt sẵn tương ứng đúng thang tracking của Tailwind CSS, và dòng CSS ở cột bên phải sao chép được ngay.
Tính năng nổi bật
- Gõ văn bản của bạn vào ô nhập để xem trên đúng nội dung thật thay vì chữ mẫu
- Thanh trượt cỡ chữ từ 12 đến 72 pixel, phản ánh khoảng cỡ chữ dùng thực tế trên web
- Thanh trượt khoảng cách chữ từ âm 5 đến 20 pixel, bước nhảy 0,1 pixel
- Sáu nút đặt sẵn Tighter, Tight, Normal, Wide, Wider, Widest theo đúng thang tracking của Tailwind
- Hiển thị song song ba dạng giá trị: pixel, em và phần trăm so với cỡ chữ
- Sinh sẵn dòng CSS letter-spacing kèm giá trị em ghi trong chú thích
- Nút sao chép dòng CSS vào bộ nhớ tạm chỉ với một lần bấm
- Khung xem trước cập nhật tức thì theo từng nấc kéo thanh trượt
Vì sao nên nhìn thấy khoảng cách chữ thay vì đoán con số
Khoảng cách chữ là thứ mắt cảm nhận được nhưng trí nhớ không giữ được. Bạn có thể biết trên lý thuyết rằng tiêu đề cỡ lớn cần bó chữ lại và chữ hoa cần giãn ra, nhưng con số cụ thể là bao nhiêu thì phải nhìn mới quyết được, và nó khác nhau theo từng phông chữ. Cùng một giá trị 0,05em đặt lên một phông chữ có nét thanh mảnh sẽ trông rộng rãi, đặt lên một phông chữ đậm chân phương lại chỉ vừa đủ thoáng. Việc sửa trong tệp CSS rồi tải lại trang để xem cũng làm được nhưng vòng lặp quá chậm nên người ta thường dừng ở giá trị đầu tiên chấp nhận được thay vì giá trị đúng nhất. Kéo một thanh trượt và nhìn chữ nhúc nhích theo là cách rút ngắn vòng lặp đó xuống còn vài giây, và phần quy đổi sẵn sang em giúp bạn chép ra con số dùng được cho mọi cỡ chữ chứ không chỉ cỡ chữ đang thử.
Lợi ích khi sử dụng
- Thấy ngay kết quả trên chính đoạn chữ của bạn, không phải đoán qua chữ mẫu tiếng Anh
- Có sẵn giá trị em nên chép về dùng được cho mọi cỡ chữ mà không phải tính lại
- Sáu nút đặt sẵn khớp thang Tailwind nên đối chiếu với lớp tracking trong dự án rất nhanh
- Không cần mở trình soạn thảo hay chạy môi trường phát triển chỉ để thử một giá trị
- Toàn bộ chạy trong trình duyệt, văn bản bạn gõ vào không gửi đi đâu
Cách chỉnh và lấy giá trị letter-spacing
- 1Thay chữ mẫu bằng đúng đoạn văn bản bạn định dùng, vì chữ hoa và chữ thường cho cảm nhận rất khác nhau.
- 2Kéo thanh cỡ chữ về đúng cỡ sẽ dùng trên giao diện thật, tiêu đề hay chữ nội dung đều được.
- 3Bấm thử các nút đặt sẵn trước để có điểm khởi đầu, sau đó tinh chỉnh bằng thanh trượt khoảng cách.
- 4Đọc giá trị em ở dòng bên dưới, đây là con số nên dùng vì nó co giãn theo cỡ chữ.
- 5Bấm nút sao chép rồi dán dòng CSS vào biểu định kiểu, sửa lại thành đơn vị em nếu bạn muốn giá trị tự co giãn.
Vì sao nên dùng đơn vị em thay vì pixel
Đơn vị em trong thuộc tính letter-spacing được tính theo cỡ chữ của chính phần tử đó, nên 0,05em luôn là một phần hai mươi cỡ chữ dù cỡ chữ là bao nhiêu. Đơn vị pixel thì cố định. Khác biệt này quan trọng ngay khi bạn có bố cục co giãn: một tiêu đề đặt letter-spacing 2 pixel ở cỡ 48 pixel trên máy tính trông vừa mắt, nhưng khi màn hình nhỏ lại kéo cỡ chữ xuống 28 pixel thì 2 pixel đó thành quá rộng, chữ bắt đầu rời rạc. Cùng thiết kế ấy viết là 0,042em thì tỷ lệ được giữ nguyên ở mọi cỡ. Đó cũng là lý do Tailwind định nghĩa toàn bộ thang tracking bằng em: tracking-tighter là âm 0,05em, tracking-tight âm 0,025em, tracking-normal bằng 0, tracking-wide 0,025em, tracking-wider 0,05em và tracking-widest 0,1em. Sáu nút đặt sẵn trong công cụ tính đúng theo sáu mốc này rồi đổi ra pixel theo cỡ chữ bạn đang chọn, nên bạn có thể dùng công cụ để xem một lớp tracking của Tailwind trông thế nào ở cỡ chữ cụ thể trước khi gắn vào giao diện.
Nguyên tắc chọn giá trị theo cỡ chữ và kiểu chữ
Quy tắc nền tảng của ngành in ấn là cỡ chữ càng lớn thì càng cần bó lại, cỡ chữ càng nhỏ thì càng cần giãn ra. Lý do nằm ở cách mắt người nhìn: ở cỡ lớn, khoảng trắng giữa các chữ cái bị phóng to theo và tạo cảm giác chữ rời nhau; ở cỡ nhỏ, các nét chữ dễ dính vào nhau nên cần thêm khoảng thở. Áp dụng cụ thể: tiêu đề từ 32 pixel trở lên thường đặt âm 0,01 đến âm 0,03em, tiêu đề rất lớn kiểu chữ hiển thị có thể xuống tới âm 0,05em. Chữ nội dung cỡ 14 đến 18 pixel gần như luôn nên để nguyên bằng 0, vì người thiết kế phông chữ đã cân khoảng cách cho đúng cỡ đọc rồi, can thiệp vào thường làm xấu đi. Chữ nhỏ dưới 12 pixel như nhãn, chú thích ảnh hay dòng bản quyền thì cộng thêm 0,01 đến 0,025em sẽ dễ đọc hơn rõ rệt. Riêng chữ in hoa toàn bộ là trường hợp bắt buộc phải giãn: các chữ cái hoa vốn được thiết kế để đứng cạnh chữ thường, khi xếp liền nhau chúng dính và khó đọc, nên cộng 0,05 đến 0,1em là mức thông dụng cho nhãn nút bấm và tiêu đề mục viết hoa.
Lỗi lệch tâm khi căn giữa chữ có letter-spacing
Đây là lỗi nhỏ nhưng thấy được bằng mắt và rất nhiều giao diện mắc phải. Theo cách trình duyệt hiện thực thuộc tính này, khoảng cách được cộng vào sau mỗi ký tự, bao gồm cả ký tự cuối cùng. Kết quả là dòng chữ luôn thừa ra một khoảng trắng bên phải đúng bằng giá trị bạn đặt. Với chữ căn trái thì không ai nhận ra, nhưng khi bạn căn giữa một tiêu đề hoặc căn giữa nhãn trong một nút bấm, khoảng thừa đó bị tính vào chiều rộng nên toàn bộ chữ bị đẩy lệch sang trái đúng một nửa giá trị. Ở mức 0,1em trên chữ hoa cỡ lớn, độ lệch này nhìn rõ. Cách sửa chuẩn là thêm một lề phải âm đúng bằng giá trị letter-spacing cho phần tử đó, ví dụ đặt letter-spacing 0,1em thì thêm margin-right âm 0,1em. Mẹo này áp dụng cho mọi thành phần căn giữa có tracking dương, và nó cũng là lý do nhiều bộ thành phần giao diện chỉn chu có sẵn quy tắc bù lề này trong lớp dành cho nhãn viết hoa.
Letter-spacing với tiếng Việt và quy định về khả năng tiếp cận
Tiếng Việt có dấu thanh và dấu phụ chồng lên nhau ở nhiều chữ như ế, ộ, ữ, ằ, khiến chiều cao chữ lớn hơn tiếng Anh nhưng chiều ngang thì không đổi. Vì letter-spacing chỉ tác động theo chiều ngang nên nó không giải quyết được vấn đề dấu chồng dấu; thứ cần chỉnh trong trường hợp đó là chiều cao dòng, thường phải đặt từ 1,5 trở lên để dấu ở dòng dưới không chạm vào chân chữ dòng trên. Điều cần lưu ý riêng cho tiếng Việt là khi đặt giá trị âm quá tay ở phông chữ có dấu rộng, dấu của chữ này có thể chồng lên nét chữ bên cạnh, vì vậy hãy luôn thử với đoạn chữ tiếng Việt có dấu thật chứ đừng thử bằng chữ mẫu tiếng Anh. Về mặt quy chuẩn, tiêu chí về khoảng cách văn bản trong bộ hướng dẫn khả năng tiếp cận nội dung web yêu cầu giao diện vẫn phải dùng được và không mất nội dung khi người dùng đặt khoảng cách chữ lên tới 0,12 lần cỡ chữ. Điều đó nghĩa là bố cục của bạn không được vỡ khi chữ giãn ra, nên tránh đặt chiều rộng cố định cho nút bấm và thẻ chứa chữ.
Phân biệt letter-spacing với kerning và word-spacing
Ba khái niệm này hay bị dùng lẫn nhưng làm ba việc khác nhau. Letter-spacing, người làm chữ gọi là tracking, cộng thêm một lượng đều nhau vào giữa mọi cặp ký tự trong đoạn chữ, không phân biệt cặp nào. Kerning là điều chỉnh riêng cho từng cặp ký tự cụ thể để bù phần khoảng trắng thừa do hình dạng chữ tạo ra, chẳng hạn cặp A với V hay cặp T với o luôn cần kéo sát lại. Dữ liệu kerning nằm sẵn trong bản thân tệp phông chữ, và trong CSS bạn bật tắt nó bằng thuộc tính font-kerning chứ không phải letter-spacing. Đáng lưu ý là ở một số trình duyệt, đặt letter-spacing khác giá trị mặc định có thể làm vô hiệu hóa kerning, nên tiêu đề bó chữ quá tay đôi khi trông kém tinh tế hơn cả khi để nguyên. Word-spacing thì chỉ tác động vào khoảng trắng giữa các từ, dùng khi đoạn chữ căn đều hai bên bị hở lỗ hoặc khi cần nén dòng lại. Giá trị mặc định của letter-spacing là normal chứ không phải 0; hai cái này gần như luôn cho kết quả giống nhau nhưng normal cho phép trình duyệt tự điều chỉnh khi căn đều dòng, còn đặt một con số cụ thể thì bỏ mất khả năng đó.
Câu hỏi thường gặp (FAQ)
Nên dùng đơn vị px hay em cho letter-spacing?
Nên dùng em vì nó tính theo cỡ chữ của chính phần tử, nên giữ đúng tỷ lệ khi cỡ chữ thay đổi theo kích thước màn hình. Giá trị pixel cố định sẽ trông quá rộng khi cỡ chữ thu nhỏ lại trên điện thoại. Công cụ hiển thị sẵn giá trị em ngay dưới thanh trượt để bạn chép.
Chữ nội dung có nên chỉnh letter-spacing không?
Thường là không. Người thiết kế phông chữ đã cân khoảng cách giữa các ký tự cho đúng cỡ đọc thông thường, can thiệp vào hay làm xấu đi. Chỉ nên chỉnh khi bạn dùng phông chữ có khoảng cách bất thường, hoặc khi chữ nhỏ dưới 12 pixel thì cộng thêm khoảng 0,01 đến 0,025em cho dễ đọc.
Vì sao tiêu đề lớn nên đặt giá trị âm?
Vì ở cỡ chữ lớn, khoảng trắng vốn có giữa các ký tự cũng được phóng to theo, làm chữ trông rời rạc. Bó lại khoảng âm 0,01 đến âm 0,03em cho tiêu đề từ 32 pixel trở lên sẽ khiến khối chữ chắc và liền mạch hơn. Với chữ hiển thị rất lớn có thể xuống tới âm 0,05em.
Chữ in hoa nên đặt bao nhiêu?
Từ 0,05 đến 0,1em là khoảng thông dụng. Các chữ cái hoa được thiết kế để đứng xen với chữ thường nên khi xếp liền nhau chúng dính vào nhau và khó đọc. Nhãn nút bấm, tiêu đề mục và chữ điều hướng viết hoa gần như luôn cần giãn thêm.
Vì sao chữ căn giữa bị lệch sang trái khi tăng letter-spacing?
Vì khoảng cách được cộng vào sau mỗi ký tự, kể cả ký tự cuối cùng, nên dòng chữ luôn thừa một khoảng trắng bên phải. Khi căn giữa, khoảng thừa đó bị tính vào chiều rộng và đẩy chữ lệch trái nửa giá trị. Sửa bằng cách thêm lề phải âm đúng bằng giá trị letter-spacing.
Letter-spacing và kerning khác nhau chỗ nào?
Letter-spacing cộng đều một lượng vào mọi cặp ký tự. Kerning điều chỉnh riêng từng cặp cụ thể để bù khoảng trắng do hình dạng chữ, ví dụ cặp A với V cần kéo sát lại. Dữ liệu kerning nằm trong tệp phông chữ và điều khiển bằng thuộc tính font-kerning, không phải letter-spacing.
Đặt letter-spacing có làm mất kerning không?
Có thể. Ở một số trình duyệt, khi bạn đặt một giá trị letter-spacing khác mặc định thì kerning tự động của phông chữ bị vô hiệu hóa. Vì vậy tiêu đề bó chữ quá tay đôi khi trông kém chỉn chu hơn khi để nguyên, và nên kiểm tra bằng mắt trên nhiều trình duyệt.
Sáu nút đặt sẵn tương ứng với giá trị nào?
Chúng khớp đúng thang tracking của Tailwind CSS: Tighter là âm 0,05em, Tight âm 0,025em, Normal bằng 0, Wide 0,025em, Wider 0,05em và Widest 0,1em. Công cụ nhân các mốc này với cỡ chữ đang chọn để ra giá trị pixel tương ứng.
Letter-spacing có xử lý được vấn đề dấu chồng dấu của tiếng Việt không?
Không. Thuộc tính này chỉ tác động theo chiều ngang, trong khi dấu thanh và dấu phụ của tiếng Việt chồng theo chiều dọc. Muốn dấu ở dòng dưới không chạm chân chữ dòng trên, bạn phải tăng chiều cao dòng, thường đặt từ 1,5 trở lên cho đoạn chữ tiếng Việt.
Có quy định nào về khoảng cách chữ liên quan tới khả năng tiếp cận không?
Có. Tiêu chí về khoảng cách văn bản trong bộ hướng dẫn khả năng tiếp cận nội dung web yêu cầu nội dung không bị mất hay bị che khi người dùng đặt khoảng cách chữ tới 0,12 lần cỡ chữ. Nghĩa là nút bấm và thẻ chứa chữ không nên đặt chiều rộng cố định.
Khác nhau giữa letter-spacing bằng normal và bằng 0 là gì?
Về hiển thị thì gần như giống nhau. Khác biệt là normal cho phép trình duyệt tự điều chỉnh khoảng cách khi cần căn đều hai bên, còn khi bạn đặt một con số cụ thể thì khả năng đó bị bỏ. Nếu không có lý do rõ ràng, hãy để nguyên giá trị mặc định normal.
Khung xem trước có hiển thị đúng phông chữ của trang tôi không?
Không. Khung xem trước dùng phông chữ mặc định của chính trang này, trong khi khoảng cách chữ nhìn rộng hay hẹp phụ thuộc rất nhiều vào phông chữ. Hãy dùng công cụ để chốt khoảng giá trị, rồi kiểm tra lại lần cuối trên giao diện thật với đúng phông chữ dự án.
Từ khóa liên quan
- letter spacing css
- chỉnh khoảng cách chữ css
- letter spacing bao nhiêu là đẹp
- quy đổi px sang em letter spacing
- tracking trong typography
- tailwind tracking là gì
- kerning và tracking khác nhau
- font kerning css
- word spacing css
- letter spacing cho chữ in hoa
- chữ căn giữa bị lệch letter spacing
- letter spacing cho tiêu đề
- line height cho tiếng việt
- wcag text spacing
- typography cho website tiếng việt
- css letter spacing negative
- công cụ chỉnh typography online
- khoảng cách chữ trong thiết kế web
- letter spacing generator
- css khoảng cách giữa các ký tự
