Trình tính Chiều cao Dòng
Công cụ tính line height này đề xuất chiều cao dòng, khoảng cách chữ và độ rộng đoạn văn tối đa lý tưởng cho một cỡ chữ và mục đích sử dụng — nội dung, tiêu đề, nhãn UI hoặc chữ display — kèm bản xem trước trực tiếp và mã CSS.
Về công cụ này
Công cụ tính line height này đề xuất chiều cao dòng, khoảng cách chữ và độ rộng đoạn văn tối đa lý tưởng cho một cỡ chữ và mục đích sử dụng — nội dung, tiêu đề, nhãn UI hoặc chữ display — kèm bản xem trước trực tiếp và mã CSS.
Cách sử dụng
- Nhập cỡ chữ theo pixel.
- Chọn kiểu: nội dung, tiêu đề, nhãn UI hoặc display.
- Xem đoạn văn mẫu và bốn giá trị được đề xuất.
- Nhấn Copy CSS để đưa các giá trị vào stylesheet của bạn.
Điều nên biết
- Nội dung dễ đọc với line height khoảng 1.5–1.6 lần cỡ chữ.
- Tiêu đề lớn và chữ display trông đẹp hơn với line height chặt hơn, khoảng 1.05–1.2.
- Độ dài dòng dễ đọc là khoảng 45–75 ký tự mỗi dòng.
- WCAG 1.4.12 yêu cầu nội dung vẫn hoạt động tốt khi người dùng đặt line height là 1.5 và letter spacing là 0.12 em.
- Giá trị line-height không đơn vị (như 1.6) co giãn theo cỡ chữ của từng phần tử.
Chạy hoàn toàn trong trình duyệt của bạn — không có dữ liệu nào bạn nhập được tải lên hay lưu lại.
Câu hỏi thường gặp
Line height bao nhiêu là tốt cho nội dung?
Khoảng 1.5 đến 1.6 lần cỡ chữ. Với chữ 16 px, tức khoảng 24–26 px.
Tiêu đề có nên dùng line height nhỏ hơn không?
Có. Chữ lớn cần khoảng cách tương đối ít hơn, nên tiêu đề thường dùng 1.1–1.3 và chữ display còn chặt hơn nữa.
Độ dài dòng lý tưởng để đọc là bao nhiêu?
Khoảng 45–75 ký tự mỗi dòng, trong đó khoảng 65 thường được xem là lý tưởng cho nội dung.
Có nên dùng line-height không đơn vị trong CSS không?
Thường là có. Giá trị không đơn vị như 1.6 được kế thừa dưới dạng tỷ lệ, nên các phần tử con có cỡ chữ khác nhau vẫn giữ khoảng cách cân đối.