Line Height
Khoảng cách dọc giữa các dòng văn bản. Được kiểm soát bởi thuộc tính CSS line-height, ảnh hưởng đáng kể đến khả năng đọc.
Chiều cao dòng là khoảng cách dọc giữa các dòng văn bản. Trong CSS, nó được kiểm soát bởi thuộc tính line-height và có thể được chỉ định dưới dạng hệ số nhân tương đối với kích thước phông chữ (ví dụ: 1.5), giá trị cố định (ví dụ: 24px) hoặc số không đơn vị. Chiều cao dòng là một trong những yếu tố typography quan trọng nhất ảnh hưởng đến khả năng đọc văn bản, và cài đặt đúng ảnh hưởng trực tiếp đến trải nghiệm người dùng.
CSS line-height hoạt động khác nhau tùy thuộc vào cách chỉ định. Số không đơn vị (ví dụ: line-height: 1.6) được tính là hệ số nhân của kích thước phông chữ riêng của phần tử, và cùng hệ số nhân được kế thừa bởi phần tử con. Ngược lại, giá trị cố định như line-height: 24px hoặc giá trị phần trăm như line-height: 150% truyền giá trị đã tính cho phần tử con, có thể gây khoảng cách dòng không mong muốn khi phần tử con có kích thước phông chữ khác nhau. Trong thực tế, chỉ định số không đơn vị được khuyến nghị. Sách cơ bản typography dạy các nguyên tắc thiết kế khoảng cách dòng.
Giá trị chiều cao dòng tối ưu thay đổi theo ngôn ngữ và loại nội dung. Đối với văn bản Latin, khoảng 1.5x phổ biến cho văn bản nội dung và 1.2-1.4x cho tiêu đề. Văn bản CJK (tiếng Trung, tiếng Nhật, tiếng Hàn) có mặt chữ lớn hơn và mật độ cao hơn, cần khoảng cách dòng rộng hơn 1.7-2.0x để đọc thoải mái. Khối mã với phông chữ đơn cách hoạt động tốt ở 1.4-1.6x.
Chiều cao dòng quá chật khiến văn bản cảm thấy chật chội và khó đọc, đặc biệt trong nội dung dài nơi mệt mỏi người đọc tăng lên. Ngược lại, khoảng cách quá lớn khiến mắt mất dấu dòng tiếp theo. WCAG 2.1 Tiêu chí thành công 1.4.12 yêu cầu khoảng cách dòng có thể được đặt ít nhất 1.5 lần kích thước phông chữ, khiến thiết kế chiều cao dòng quan trọng từ góc độ khả năng truy cập.
Một quan niệm sai lầm phổ biến là coi line-height và leading là khái niệm giống nhau. Leading typography truyền thống chỉ khoảng cách từ baseline đến baseline, trong khi CSS line-height định nghĩa chiều cao của line box, là khái niệm hơi khác. Ngoài ra, giá trị mặc định của line-height: normal thay đổi theo phông chữ, thường từ 1.0 đến 1.2.
Đối với đếm ký tự, cài đặt chiều cao dòng thay đổi đáng kể vùng hiển thị cho cùng lượng văn bản. Ví dụ, 1000 ký tự hiển thị với line-height: 1.5 so với line-height: 2.0 dẫn đến cái sau chiếm khoảng 33% không gian dọc nhiều hơn. Đối với nội dung giới hạn ký tự như meta description và bài đăng mạng xã hội, cài đặt chiều cao dòng ảnh hưởng đến số ký tự vừa trong vùng hiển thị, đòi hỏi xem xét từ cả góc độ thiết kế và đếm ký tự. Sách thiết kế web và typography cung cấp hướng dẫn thực tế cho cài đặt line-height.