Bài 9 — Line Height, Letter Spacing, Line Length

Mở đầu — vì sao bài này quan trọng

Ở Bài 7 bạn đã học về giải phẫu con chữ, Bài 8 bạn đã dựng được một type scale gọn gàng. Nhưng nếu bạn từng đặt một đoạn văn lên trang web và cảm thấy nó "ngộp", "khó đọc", "rối mắt" dù font đẹp và cỡ chữ đúng — thì vấn đề gần như chắc chắn nằm ở ba thứ mà bài học hôm nay sẽ mổ xẻ: line height (khoảng cách dòng), letter spacing (khoảng cách chữ cái) và line length (độ dài dòng).

Đây là phần mà dân trong nghề gọi là microtypography — vi typography. Nó không phải chuyện chọn font, mà là chuyện sắp đặt khoảng trống giữa và quanh con chữ. Người dùng thường không bao giờ nhận ra ba yếu tố này khi chúng được làm đúng. Nhưng khi làm sai, họ sẽ rời trang sớm hơn, đọc chậm hơn, hiểu kém hơn — mà không biết tại sao. Một nghiên cứu kinh điển của nhóm Dyson & Haselgrove chỉ ra rằng độ dài dòng và khoảng cách dòng ảnh hưởng trực tiếp đến tốc độ đọc và khả năng ghi nhớ.

Với học viên Việt Nam, bài này còn có một lớp nghĩa riêng: tiếng Việt có dấu. Các dấu thanh (sắc, huyền, hỏi, ngã, nặng) và dấu phụ (mũ, móc, trăng) nằm chồng lên trên và dưới con chữ, khiến tiếng Việt "cao" hơn tiếng Anh về mặt thị giác. Điều này thay đổi cách bạn phải set line height. Đây là kiến thức mà 90% template nước ngoài không tính tới, và là chỗ designer Việt có thể tạo khác biệt.

Khái niệm cốt lõi

Line height (leading) — khoảng cách giữa các dòng

Trong CSS, line-height xác định chiều cao tổng của mỗi dòng văn bản. Tên gọi cũ trong ngành in là leading (đọc là "led-ing"), bắt nguồn từ việc thợ in chèn các thanh chì (lead) giữa các dòng chữ kim loại để giãn dòng.

Quy tắc nền tảng:

Body text (văn bản thân bài): line-height lý tưởng nằm trong khoảng 1.5 – 1.65. Với cỡ chữ 16px, line-height: 1.5 cho ra dòng cao 24px. Đây là vùng "vàng" giúp mắt dễ nhảy từ cuối dòng này xuống đầu dòng kế tiếp mà không lạc.
Headings (tiêu đề): Vì chữ lớn, các dòng đã đủ tách bạch, nên cần ít khoảng cách hơn: line-height từ 1.1 – 1.3. Một tiêu đề H1 cỡ 48px mà để line-height: 1.6 sẽ trông rời rạc như hai câu không liên quan.

Lưu ý kỹ thuật quan trọng: hãy viết line-height không có đơn vị (ví dụ line-height: 1.5) thay vì line-height: 24px. Giá trị không đơn vị là một hệ số nhân theo font-size của chính phần tử đó, nên nó tự co giãn đúng khi phần tử con có cỡ chữ khác. Nếu bạn dùng giá trị tuyệt đối như 24px, nó sẽ bị kế thừa nguyên xi xuống các phần tử con và gây vỡ layout khi cỡ chữ thay đổi.

Tiếng Việt cần line height cao hơn. Vì dấu thanh và dấu mũ chiếm thêm chiều cao phía trên, một đoạn tiếng Việt set line-height: 1.4 sẽ thấy dấu của dòng dưới gần như chạm vào chân chữ của dòng trên — gọi là hiện tượng "dính dấu". Kinh nghiệm thực chiến: nếu giao diện tiếng Anh dùng 1.5 thì bản tiếng Việt nên nhích lên 1.6 – 1.7 cho body để thở thoáng. So sánh nhanh: "Hệ thống" (có dấu nặng, dấu mũ, dấu huyền) cao hơn hẳn "He thong" về mặt hộp chữ.

Letter spacing (tracking) — khoảng cách giữa các chữ cái

letter-spacing điều chỉnh khoảng trống đều nhau giữa từng ký tự. Tên ngành in là tracking. Đơn vị nên dùng là em (theo tỉ lệ cỡ chữ) thay vì px, để khoảng cách co giãn theo chữ.

Nguyên tắc cốt lõi: chữ càng lớn càng nên giảm spacing, chữ càng nhỏ càng nên tăng spacing.

Body text cỡ thường (16px): hầu như để mặc định (letter-spacing: normal, tức 0). Font đã được nhà thiết kế cân chỉnh khoảng cách tối ưu rồi — bạn đụng vào thường làm xấu đi.
Tiêu đề lớn / display: hơi siết lại một chút, ví dụ letter-spacing: -0.02em đến -0.01em, giúp các chữ "ôm" nhau chặt và trông cao cấp.
Chữ IN HOA (all-caps): đây là trường hợp bắt buộc tăng spacing. Chữ in hoa vốn được thiết kế để đứng giữa chữ thường, nên khi viết toàn hoa chúng bị chật. Thêm letter-spacing: 0.05em đến 0.1em cho nhãn, badge, nút bấm viết hoa.
Chữ nhỏ (caption 12px, label): nới nhẹ 0.01em – 0.02em để dễ đọc hơn.

Cảnh báo với tiếng Việt: khi tăng letter-spacing quá tay trên chữ thường có dấu, các dấu phụ có thể trông như "trôi" lệch khỏi con chữ. Vì vậy chỉ nên dùng spacing dương mạnh cho chữ IN HOA hoặc chữ không dấu (như mã sản phẩm, số).

Line length (measure) — độ dài dòng

line length (ngành in gọi là measure) là số ký tự trên một dòng. Đây là yếu tố bị bỏ quên nhiều nhất nhưng ảnh hưởng cực lớn đến trải nghiệm đọc.

Con số vàng: 45 – 75 ký tự mỗi dòng (tính cả khoảng trắng), lý tưởng quanh 66 ký tự. Đây là khuyến nghị kinh điển từ Robert Bringhurst trong The Elements of Typographic Style.

Dòng quá dài (trên 90 ký tự): mắt phải di chuyển ngang quá xa, và khi xuống dòng dễ bị "lạc dòng", phải đọc lại.
Dòng quá ngắn (dưới 40 ký tự): mắt phải xuống dòng liên tục, nhịp đọc bị ngắt vụn, mệt mỏi.

Trong CSS, bạn kiểm soát line length đẹp nhất bằng đơn vị ch (chiều rộng của ký tự "0"): đặt max-width: 65ch cho khối văn bản là cách gọn gàng để khóa độ dài dòng ở mức tối ưu, bất kể màn hình rộng bao nhiêu. Lưu ý tiếng Việt do có dấu nên trung bình từ ngắn hơn tiếng Anh đôi chút; mức 60 – 70ch thường cho cảm giác cân đối.

Tình huống thực tế

Ví dụ 1: Blog của một startup edtech ở TP.HCM bị bounce rate cao

Một startup edtech (giả định tên HocNhanh) chạy blog nội dung dài 1.500–2.000 từ mỗi bài. Họ than phiền: thời gian đọc trung bình chỉ 40 giây dù bài viết phải mất 7–8 phút mới đọc hết, và bounce rate trang blog lên tới 78%.

Khi audit, vấn đề lộ ra ở microtypography:

Body text set line-height: 1.35 — quá chật cho tiếng Việt có dấu, các dòng dính vào nhau thành một "khối đen".
Khối nội dung trải full-width trên màn desktop, mỗi dòng dài tới 110–120 ký tự.

Đội thiết kế chỉ sửa hai dòng CSS: nâng line-height lên 1.65 và thêm max-width: 68ch cho phần thân bài (căn giữa). Không đổi font, không đổi màu, không đổi cỡ chữ. Sau 3 tuần, thời gian đọc trung bình tăng lên 2 phút 10 giây, bounce rate giảm xuống 61%.

Bài học: Người dùng không rời đi vì nội dung dở — họ rời vì nhìn vào thấy mệt. Hai con số line-height và max-width là đòn bẩy rẻ nhất bạn có.

Ví dụ 2: Nút bấm và badge viết hoa của một app gọi xe

Một app gọi xe khu vực Đông Nam Á (giả định) có các badge trạng thái viết hoa: "ĐANG TÌM TÀI XẾ", "ĐÃ HỦY", "HOÀN THÀNH". Trên bản thiết kế gốc các badge này để letter-spacing: normal, và đội QA phản hồi rằng chữ trông "dồn cục", khó đọc lướt khi đang di chuyển.

Designer thêm letter-spacing: 0.08em cho riêng các phần tử all-caps này. Kết quả: chữ in hoa giãn ra vừa đủ để mắt phân tách từng ký tự, badge trông chuyên nghiệp và "có khí chất" hơn hẳn. Họ chốt thành một class dùng chung:

.badge-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  line-height: 1.2;
}

Bài học: Chữ IN HOA gần như luôn cần tracking dương. Đây là một trong số rất ít trường hợp bạn nên chủ động chỉnh letter-spacing.

Ví dụ 3: Tiêu đề landing page bị "rời rạc"

Một agency thiết kế landing page cho khách hàng bất động sản. Tiêu đề lớn hai dòng: "Căn hộ ven sông / Sống chuẩn nghỉ dưỡng" set cỡ 56px nhưng dùng chung line-height: 1.6 kế thừa từ body. Hai dòng tiêu đề cách nhau quá xa, trông như hai câu chẳng ăn nhập.

Sửa lại line-height: 1.15 cho riêng heading, hai dòng lập tức "ôm" lại thành một khối tiêu đề thống nhất, mạnh mẽ. Họ đồng thời thêm letter-spacing: -0.015em để siết nhẹ, tăng cảm giác cao cấp.

Bài học: Đừng để heading dùng chung line-height với body. Chữ càng lớn, line-height càng phải nhỏ.

Hướng dẫn từng bước

Đây là quy trình set microtypography cho một trang nội dung, áp dụng được ngay:

Bước 1 — Đặt nền cho body. Bắt đầu với cỡ chữ thân bài 16–18px và:

body {
  font-size: 17px;
  line-height: 1.65;   / thoáng cho tiếng Việt /
  letter-spacing: normal;
}

Bước 2 — Khóa line length cho khối văn bản. Gói nội dung dài trong một container giới hạn chiều rộng:

.prose {
  max-width: 68ch;
  margin-inline: auto;
}

Bước 3 — Tinh chỉnh heading riêng. Cho heading line-height thấp và siết tracking nhẹ:

h1, h2, h3 {
  line-height: 1.2;
  letter-spacing: -0.015em;
}
h1 { line-height: 1.1; }   / càng lớn càng thấp /

Bước 4 — Xử lý các phần tử in hoa và chữ nhỏ.

.eyebrow, .badge {       / nhãn viết hoa /
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.caption {                / chú thích nhỏ /
  font-size: 13px;
  letter-spacing: 0.01em;
  line-height: 1.5;
}

Bước 5 — Kiểm thử bằng nội dung tiếng Việt thật. Đừng test bằng "Lorem ipsum". Hãy dán một đoạn tiếng Việt có nhiều dấu (ví dụ chứa "nghĩ", "phở", "Hệ thống", "kỹ thuật") rồi nhìn kỹ: dấu của dòng dưới có chạm chân chữ dòng trên không? Nếu có, nâng line-height thêm 0.05–0.1.

Bước 6 — Soi trên ba ngữ cảnh: desktop, mobile, và nội dung dài. Một dòng 65 ký tự trên desktop có thể trở thành 35 ký tự trên mobile — điều này ổn vì màn hẹp. Nhưng hãy chắc rằng container không bị giãn full-width trên màn lớn.

Lỗi thường gặp & mẹo

Lỗi 1 — Set line-height có đơn vị px. line-height: 24px sẽ kế thừa cứng xuống mọi phần tử con, làm heading lớn bị chật dòng. Luôn dùng số không đơn vị.

Lỗi 2 — Dùng line-height tiếng Anh cho nội dung tiếng Việt. Mức 1.4–1.5 là đủ cho tiếng Anh nhưng gây dính dấu với tiếng Việt. Mặc định hãy nhỉnh lên 1.6+.

Lỗi 3 — Để văn bản trải full-width màn hình. Đây là lỗi phổ biến nhất khi mới làm. Một dòng dài 120 ký tự trên màn 27 inch khiến người đọc lạc dòng liên tục. Luôn có max-width quanh 60–70ch cho khối chữ dài.

Lỗi 4 — Nghịch letter-spacing trên body text. Tăng/giảm tracking trên chữ thân bài thường làm hỏng nhịp đọc mà nhà thiết kế font đã cân chỉnh. Để mặc định.

Lỗi 5 — Quên tracking cho chữ IN HOA. Chữ in hoa để spacing 0 sẽ dồn cục. Luôn thêm 0.05–0.1em.

Mẹo hay:

Đơn vị ch là người bạn tốt nhất để khóa line length — max-width: 65ch đáng giá hơn mọi con số px cố định.
Heading nhiều dòng: dùng line-height thấp (1.1–1.2) để các dòng "ôm" nhau.
Khi nghi ngờ về line-height, hãy nhìn vào "river" (dòng sông) khoảng trắng: nếu các khoảng trắng giữa các dòng tạo thành mảng đậm-nhạt đều đặn, dễ chịu, là bạn đã đúng.
Test với nội dung Việt thật, không dùng văn bản giả Latin.

Bài tập thực hành

Sửa một đoạn body. Lấy một đoạn văn tiếng Việt khoảng 150 từ (chọn đoạn nhiều dấu). Đặt nó trong <div> và lần lượt thử line-height ở các mức 1.3, 1.5, 1.65, 1.8. Ghi lại mức nào khiến bạn đọc thoải mái nhất — và quan sát hiện tượng dính dấu ở mức thấp.

Khóa line length. Lấy đoạn trên đặt trong container, lần lượt thử max-width: 40ch, 65ch, 100ch, và full-width. Tự chấm điểm 1–5 mức độ dễ đọc cho từng giá trị.

Làm bộ badge. Tạo 4 badge viết hoa: "MỚI", "GIẢM GIÁ", "HẾT HÀNG", "BÁN CHẠY". So sánh khi letter-spacing: 0 và letter-spacing: 0.08em. Chụp ảnh hai phiên bản và nhận xét.

Tinh chỉnh một tiêu đề hai dòng. Viết một H1 hai dòng cỡ 48px. Thử line-height 1.6 rồi 1.15. Mô tả cảm giác khác biệt về sự "thống nhất" của khối tiêu đề.

Thử thách tổng hợp. Dựng một trang bài viết hoàn chỉnh (tiêu đề + 3 đoạn body + 1 caption ảnh) áp dụng đủ cả ba yếu tố đúng chuẩn cho tiếng Việt. Đưa cho một người bạn đọc thử và hỏi: "Có chỗ nào thấy mỏi mắt không?"

Tóm tắt

Microtypography là phần "vô hình" nhưng quyết định trải nghiệm đọc. Ba yếu tố cần khắc cốt:

Line height: body 1.5–1.65 (tiếng Việt nên 1.6–1.7 vì có dấu); heading 1.1–1.3 vì chữ lớn cần ít khoảng cách. Luôn dùng giá trị không đơn vị.
Letter spacing: body để mặc định; heading lớn siết nhẹ (-0.01 đến -0.02em); chữ IN HOA bắt buộc nới ra (0.05–0.1em). Dùng đơn vị em.
Line length: 45–75 ký tự mỗi dòng, lý tưởng quanh 66. Khóa bằng max-width: 60–70ch.

Nguyên tắc vàng xuyên suốt: chữ càng lớn càng cần ít khoảng cách dòng và tracking chặt hơn; chữ càng nhỏ càng cần thoáng hơn. Và luôn nhớ: bạn đang thiết kế cho tiếng Việt — hãy thử nghiệm bằng nội dung có dấu thật, không phải Lorem ipsum. Chỉ vài dòng CSS đúng chỗ có thể là khác biệt giữa một trang khiến người ta đọc hết và một trang khiến họ bỏ đi sau 40 giây.