Thuộc tính letter-spacing trong CSS
Bùi Tấn Lực - 908
- 12/10/2025
Chức năng của Thuộc tính letter-spacing trong CSS
Thuộc tính letter-spacing trong CSS dùng để tính khoảng cách giữa các ký tự trong văn bản bằng đơn vị px, em, cm, normal,... nếu trong văn bản có nhiều ký tự khoảng trắng liên tiếp nhau thì vẫn tính là 1.
Cú pháp của Thuộc tính letter-spacing trong CSS
letter-spacing: giatri;
giatri: Giá trị để tính khoảng cách giữa các ký tự trong văn bản (Ví dụ: 1px, 2px, 0px, 10px, 1em, normal, 1cm,....)
Code Thuộc tính letter-spacing trong CSS
letter-spacing: 1px;
letter-spacing: 20px;
letter-spacing: 20px;
letter-spacing: 0px;
letter-spacing: -1px;
letter-spacing: 1em;
letter-spacing: normal;
letter-spacing: 1cm;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính letter-spacing trong CSS</title>
</head>
<body>
<h1>Code Thuộc tính letter-spacing trong CSS</h1>
<p>Dùng để tính khoảng cách giữa các ký tự trong văn bản bằng đơn vị px, em, cm, normal,... nếu trong văn bản có nhiều ký tự khoảng trắng liên tiếp nhau thì vẫn tính là 1:</p>
<p style="letter-spacing: 1px;">letter-spacing: 1px;</p>
<p style="letter-spacing: 20px;">letter-spacing: 20px;</p>
<p style="letter-spacing: 20px;">letter-spacing: 20px;</p>
<p style="letter-spacing: 0px;">letter-spacing: 0px;</p>
<p style="letter-spacing: 0px;">letter-spacing: -1px;</p>
<p style="letter-spacing: 1em;">letter-spacing: 1em;</p>
<p style="letter-spacing: normal;">letter-spacing: normal;</p>
<p style="letter-spacing: 1cm;">letter-spacing: 1cm;</p>
</body>
</html>
Cách sử dụng letter-spacing trong CSS hiệu quả
Thuộc tính letter-spacing cho phép điều chỉnh khoảng cách giữa các ký tự trong một đoạn văn bản. Tuy nhiên, không phải lúc nào tăng khoảng cách cũng giúp chữ dễ đọc hơn. Giá trị phù hợp cần dựa vào kiểu chữ, kích thước văn bản và mục đích hiển thị.
Khi nào nên tăng hoặc giảm letter-spacing?
Nên tăng letter-spacing khi các ký tự nằm quá sát nhau, đặc biệt với tiêu đề, chữ in hoa hoặc những đoạn văn bản ngắn cần tạo cảm giác thoáng và rõ ràng. Ngược lại, có thể giảm letter-spacing khi chữ bị tách rời quá nhiều hoặc phần tiêu đề chiếm không gian lớn hơn cần thiết.
Ví dụ, tiêu đề viết hoa thường có thể sử dụng khoảng cách ký tự dương để tạo bố cục thoáng:
.title {
letter-spacing: 0.08em;
}
Với văn bản thông thường, không nên tùy ý thay đổi khoảng cách giữa các ký tự vì giá trị quá lớn có thể làm người đọc khó ghép các chữ thành từ. Nếu font chữ đã có khoảng cách tự nhiên tốt, việc giữ giá trị mặc định thường là lựa chọn an toàn.
Nên dùng letter-spacing bao nhiêu là phù hợp?
Không có một giá trị cố định phù hợp với mọi trường hợp. Với nội dung thân bài, nên ưu tiên khoảng cách tự nhiên của font chữ và chỉ điều chỉnh nhẹ khi thực sự cần thiết. Với tiêu đề hoặc nhãn ngắn, có thể sử dụng giá trị lớn hơn để tạo điểm nhấn.
Có thể dùng đơn vị em khi muốn khoảng cách thay đổi tương đối theo kích thước chữ:
.heading {
letter-spacing: 0.05em;
}
Trong khi đó, px phù hợp khi cần kiểm soát khoảng cách cụ thể:
.label {
letter-spacing: 1px;
}
Khi thiết kế giao diện, nên kiểm tra trực tiếp trên nhiều kích thước màn hình và với đúng font chữ được sử dụng. Một giá trị đẹp ở tiêu đề lớn chưa chắc phù hợp khi văn bản thu nhỏ trên thiết bị di động.
Những lỗi thường gặp khi sử dụng letter-spacing
- Tăng khoảng cách quá mức: khiến các ký tự bị tách rời, làm từ khó nhận diện.
- Áp dụng cho toàn bộ nội dung: văn bản dài có thể trở nên khó đọc nếu khoảng cách giữa từng ký tự bị thay đổi không cần thiết.
- Chỉ kiểm tra trên một font chữ: mỗi font có thiết kế ký tự và khoảng cách mặc định khác nhau.
- Lạm dụng giá trị âm: ký tự quá sát hoặc chồng cảm giác lên nhau có thể làm giảm khả năng đọc.
- Không kiểm tra trên màn hình nhỏ: khoảng cách tăng lên có thể khiến tiêu đề xuống dòng sớm và phá vỡ bố cục.
Cách an toàn là bắt đầu với một giá trị nhỏ, kiểm tra khả năng đọc rồi mới điều chỉnh. letter-spacing nên hỗ trợ cho kiểu chữ và bố cục thay vì trở thành yếu tố làm văn bản mất tự nhiên.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính letter-spacing trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
