Line-height tiếng Việt đọc dài | Blog & landing nên đặt bao nhiêu?

Khi đọc một bài blog hoặc landing bằng tiếng Việt, cảm giác “mệt mắt” thường không đến từ font xấu mà từ khoảng cách dòng (line-height) quá hẹp so với độ dài đoạn và mật độ dấu thanh. Template SaaS tiếng Anh hay để body 1.4–1.5; áp nguyên vào tiếng Việt — đặc biệt đoạn 80–120 từ — dòng trên và dòng dưới dễ chạm nhau về mặt thị giác.

Bài này tập trung line-height cho nội dung tiếng Việt dài trên blog và landing: giá trị khởi điểm, vì sao khác tiếng Anh, cách đổi leading Figma sang CSS, lỗi kế thừa đơn vị, và checklist trước khi đưa lên production.

Bài viết này giúp bạn

• Chọn khoảng line-height theo vai trò: body / heading / UI
• Hiểu vì sao đoạn tiếng Việt thường cần rộng hơn copy tiếng Anh ngắn
• Đổi leading (px) từ Figma/XD sang hệ số CSS không đơn vị
• Tránh lỗi line-height: 24px kế thừa làm chồng dòng
• Có checklist và case study blog + landing để tự kiểm

---

Line-height là gì (và khác “leading” thế nào)?

Trong CSS, line-height quyết định chiều cao hộp dòng của text. Khi bạn viết line-height: 1.6 với font-size: 16px, chiều cao dòng tính toán khoảng 25.6px (16 × 1.6).

Trong design tool (Figma, XD), cùng khái niệm thường gọi leading hoặc line height nhưng đơn vị là px tuyệt đối. Công thức chuyển sang CSS:

line-height (hệ số) = leading (px) ÷ font-size (px)

Ví dụ: font 16px, leading 26px → 26 ÷ 16 = 1.625 → thường làm tròn thành 1.6 hoặc giữ 1.625 nếu design system yêu cầu chính xác.

Không nhầm với letter-spacing (khoảng chữ) hay margin giữa đoạn. Line-height chỉ điều khiển khoảng trong và giữa các dòng trong cùng một khối text.

---

Vì sao đoạn tiếng Việt dài cần line-height rộng hơn?

Ba lý do thực tế trên blog và landing Việt:

1. Dấu thanh và dấu phụ (ả, ệ, ườ, ỹ…) chiếm không gian trên/dưới glyph. Leading hẹp làm nét trên dòng dưới “đụng” nét dưới dòng trên — mắt phải tách hàng chủ động.
2. Câu dài hơn UI tiếng Anh. Landing Việt hay viết đoạn giải thích 4–6 câu; blog kỹ thuật còn dài hơn. Càng nhiều dòng liên tiếp, khoảng hẹp càng tích lũy mệt mỏi.
3. Font Việt (Be Vietnam Pro, Inter + subset, Noto Sans) có metrics khác nhau. line-height: normal (~1.2 theo font) hầu như luôn quá hẹp cho body dài.

Quy tắc thực dụng: UI một dòng có thể chặt; đoạn đọc liên tục phải rộng. Đừng dùng một token duy nhất cho cả nút và bài viết 2000 từ.

---

Giá trị khởi điểm theo vai trò

Điểm bắt đầu an toàn cho body tiếng Việt: 1.6. Nếu đoạn rất dài hoặc font có dấu thanh cao, thử 1.7–1.8. Ít khi cần vượt 2.0 trên web — khoảng quá rộng làm mắt “rớt” giữa các dòng và tăng scroll vô ích.

Ví dụ CSS token

:root {
  --lh-body: 1.7;
  --lh-heading: 1.25;
  --lh-ui: 1.1;
}

.article-body {
  font-size: 1.125rem; /* ~18px */
  line-height: var(--lh-body);
  max-width: 68ch; /* hạn chế độ dài dòng — bổ trợ line-height */
}

.hero-title {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: var(--lh-heading);
}

.btn {
  font-size: 0.9375rem;
  line-height: var(--lh-ui);
}

max-width theo ch giúp dòng không quá dài; line-height rộng nhưng dòng 100+ ký tự vẫn khó đọc. Hai thứ đi cùng nhau trên blog.

---

Unitless vs px: lỗi kế thừa thường gặp

Best practice CSS: luôn dùng số không đơn vị cho line-height trên text chảy (body, heading).

/* Nên */
.prose {
  font-size: 16px;
  line-height: 1.7;
}

.prose h2 {
  font-size: 28px;
  /* kế thừa 1.7 vẫn ổn nếu muốn; hoặc ghi đè */
  line-height: 1.3;
}

/* Tránh trên container text chảy */
.prose {
  font-size: 16px;
  line-height: 27px; /* tuyệt đối */
}

.prose .callout {
  font-size: 20px;
  /* kế thừa 27px → hệ số thực = 27/20 = 1.35 — có thể quá hẹp */
}

Khi design giao 24px leading @ 16px, đừng paste line-height: 24px vào body. Hãy chia ra 1.5 (hoặc 1.6 nếu bạn cố ý nới cho tiếng Việt). Công cụ line-height trên Kawa nhận font-size (px) và leading (px), trả về hệ số để copy vào CSS — chạy trên trình duyệt, không cần đăng ký.

---

Từ Figma sang CSS: bảng tính nhanh

Font-size	Leading (Figma)	Hệ số CSS	Ghi chú cho tiếng Việt
14px	22px	1.57	Caption / meta — có thể nới lên ~1.6
16px	24px	1.5	Tối thiểu body; blog dài nên 1.6+
16px	26–28px	1.625–1.75	Khoảng dễ đọc cho đoạn Việt dài
18px	30px	1.67	Body blog desktop phổ biến
32px	40px	1.25	H1 — giữ chặt để hero gọn
40px	48px	1.2	Display — tránh >1.4 nếu chỉ 1–2 dòng

Case thực tế: Designer giao body 16 / 24 (EN). Trên bản Việt, đoạn dịch dài hơn và nhiều dấu → QA báo “chữ dính”. Sửa: giữ 16px, đổi leading design thành 27–28px (~1.7), hoặc giữ file Figma nhưng implement 1.7 và ghi note trong design system “VI body override”.

---

Case study 1: Blog kỹ thuật tiếng Việt

Bối cảnh: Bài hướng dẫn ~2500 từ, font Inter 17px, line-height: 1.4 copy từ theme EN.

Triệu chứng: Độc giả mobile báo mỏi mắt sau vài màn hình; dấu ệ, ườ nhìn như chạm dòng trên.

Cách xử lý:

1. Đổi body lên line-height: 1.7
2. Giới hạn max-width: 65ch
3. Heading giữ 1.25 để mục lục vẫn đặc
4. Đo lại trên iPhone SE và Pixel — khoảng cách dòng cảm nhận ổn khi cuộn liên tục

Bài học: Theme EN “đẹp screenshot” không đủ; phải test bằng đoạn tiếng Việt thật, không phải Lorem ipsum.

---

Case study 2: Landing SaaS (hero + 3 feature)

Bối cảnh: Hero H1 2 dòng + subcopy 3 câu; dưới mỗi feature là đoạn 4 câu.

Sai thường gặp: Cả trang dùng leading-relaxed (Tailwind ~1.625) kể cả H1 → hero cao bất thường, CTA bị đẩy xuống fold.

Cách xử lý:

Phần	Token	line-height
H1 hero	leading-tight hoặc custom	1.2 – 1.3
Subcopy	body ngắn	1.55 – 1.65
Feature body	body dài	1.65 – 1.75
CTA button	UI	1.0 – 1.1

Landing cần phân tầng: headline chặt để bán ý trong viewport đầu; đoạn giải thích mới được phép rộng.

---

Checklist trước khi ship

• Body tiếng Việt dài ≥ 1.6 (unitless), không dựa vào normal
• Heading và body không dùng chung một số nếu hero bị loãng
• Leading Figma đã ÷ font-size — không dán px vào CSS body
• Đã đọc thử đoạn có dấu thanh trên mobile (không chỉ desktop mock)
• max-width đoạn đọc (~60–75ch) đã có, không chỉ nới line-height
• Token ghi trong PR / design tokens để lần sau không regress về 1.4

---

Cách tính nhanh trên Kawa Dev Tools

1. Mở công cụ line-height
2. Nhập kích thước font (px) theo design hoặc computed style
3. Nhập khoảng cách dòng / leading (px) bạn muốn cảm nhận
4. Copy hệ số vào line-height trong CSS hoặc Tailwind config
5. Dán đoạn tiếng Việt mẫu vào trang staging và chỉnh ±0.05 nếu cần

Công cụ chạy local trên trình duyệt — phù hợp khi bạn chỉ cần đổi số nhanh giữa họp design–dev, không upload file.

---

Lỗi thường gặp

Lỗi	Hệ quả	Cách tránh
Copy leading-snug (1.375) từ template EN cho body Việt	Dấu thanh dính, đọc blog mệt	Token riêng body-vi ≥ 1.6
line-height: 24px trên wrapper	Con font lớn bị hẹp tương đối	Unitless trên prose
Một leading-relaxed cho cả H1 và body	Hero cao, fold xấu	Tách heading / body
Chỉ nhìn Figma 1440px	Mobile dòng nhiều hơn → mệt hơn	Test viewport hẹp với nội dung Việt
Tăng line-height nhưng dòng 90+ chữ	Vẫn khó theo dõi	Kết hợp max-width / ch

---

Câu hỏi thường gặp

Line-height bao nhiêu thì đọc tiếng Việt dài dễ nhất?
Body blog/landing: 1.6–1.8. Heading: 1.2–1.4. UI một dòng: 1.0–1.2.

Tại sao unitless?
Để tỷ lệ theo font-size từng phần tử; tránh kế thừa px làm lệch khi responsive.

Figma leading → CSS?
leading ÷ font-size. Ví dụ 28 ÷ 16 = 1.75. Dùng tool line-height nếu không muốn chia tay.

Landing và blog chung một số?
Không. Hero chặt, đoạn đọc rộng — tách token.

normal có đủ không?
Không đủ cho đoạn Việt dài; hãy khai báo rõ trên body.

---

Liên kết liên quan

• Công cụ tính line-height
• Danh sách công cụ
• So sánh công cụ