Tính Khoảng Cách Dòng — Line-height Tối Ưu Cho Khả Năng Đọc

Khoảng cách dòng (line-height) là một trong những cài đặt kiểu chữ có tác động lớn nhất. Quá hẹp trông chật chội, quá rộng phá vỡ văn bản. Máy tính của chúng tôi giúp tìm giá trị tối ưu.

Giá Trị Line-height Khuyến Nghị

Cho văn bản nội dung: 1,4–1,6 (140–160%). Cho tiêu đề: 1,1–1,3 (110–130%) — tiêu đề nhỏ hơn cần nhiều khoảng cách dòng hơn. Cho văn bản trong component UI chật hẹp: 1,2–1,4. Luôn dùng giá trị không đơn vị (1,5 không phải 24px) để có khả năng mở rộng.

Độ Dài Dòng và Khoảng Cách Dòng

Dòng dài hơn cần nhiều khoảng cách dòng hơn để dễ đọc. Độ dài dòng tối ưu là 60–80 ký tự mỗi dòng. Với cột rộng, tăng line-height lên 1,6–1,8. Độ dài và khoảng cách dòng gắn liền với nhau cho kiểu chữ tốt.

Nhịp Điệu Dọc

Nhịp điệu dọc giữ tất cả phần tử được căn chỉnh trên lưới nhất quán. Thiết lập line-height cơ bản (ví dụ 24px) và dùng bội số cho tất cả khoảng cách. Nhịp điệu dọc nghiêm ngặt khó với web font responsive, nhưng ý định tạo ra cảm giác có trật tự.