line-height CSS cơ bản: unitless, px và công thức leading ÷ font-size【2026】

Junior frontend và freelancer nhận Figma ghi “Font 16 / Line height 24” rồi viết thẳng line-height: 24px — nhìn desktop ổn, sang mobile hoặc clamp() font phình ra là chữ chồng hoặc khoảng dòng “chết”. Lỗi nằm ở không hiểu đơn vị và kế thừa, không phải “chưa biết số đẹp”.

Bài này là line-height CSS cơ bản: cú pháp, unitless vs px vs %, công thức đổi leading, ví dụ code, lỗi responsive. Cố ý không lặp góc “đoạn tiếng Việt dài / dấu thanh” — góc đó nằm ở bài readability riêng.

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

• Hiểu line-height tính chiều cao hộp dòng thế nào
• Chọn unitless / px / % / normal đúng ngữ cảnh
• Áp dụng công thức leading ÷ font-size
• Tránh lỗi kế thừa khi gắn px trên ancestor
• Tách token body vs heading trước khi merge

---

line-height làm gì?

Trong CSS, line-height quy định chiều cao dùng để xếp các dòng text trong một phần tử (line box). Với font-size: 16px và line-height: 1.5, chiều cao dòng tính toán khoảng 24px (16 × 1.5).

Không nhầm với:

Thuộc tính	Điều khiển
line-height	Khoảng trong/giữa các dòng trong cùng khối
letter-spacing	Khoảng giữa ký tự
margin / gap	Khoảng giữa khối hoặc flex/grid item
padding	Đệm trong hộp — không thay leading

Trong design tool, cùng ý tưởng thường gọi leading hoặc Line height nhưng đơn vị px tuyệt đối. CSS production ưu tiên hệ số.

---

Bốn cách ghi — và khi nào dùng

Vì sao unitless thắng ở responsive

.article-body {
  font-size: 16px;
  line-height: 1.5; /* 24px tương đương lúc này */
}

@media (min-width: 768px) {
  .article-body {
    font-size: 18px;
    /* vẫn 1.5 → ~27px — tỷ lệ giữ nguyên */
  }
}

Nếu viết line-height: 24px rồi tăng font-size lên 18px, khoảng dòng không tăng theo — chữ trông chặt hơn so với ý design.

Với clamp() / fluid type càng rõ:

.fluid-body {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
  line-height: 1.6; /* luôn theo font-size hiện tại */
}

---

Công thức bàn giao Figma → CSS

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

Font-size	Leading (Figma)	Hệ số	CSS
16px	24px	1.5	line-height: 1.5
14px	21px	1.5	line-height: 1.5
20px	28px	1.4	line-height: 1.4
32px	40px	1.25	line-height: 1.25
18px	30px	1.666…	line-height: 1.67 (làm tròn team)

Mở công cụ line-height, nhập hai số px (không gõ chữ “px”), copy hệ số — giảm sai số chia tay khi số lẻ.

Ví dụ implement

/* Spec: 16 / 24 */
.text-body {
  font-size: 16px;
  line-height: 1.5;
}

/* Spec: 20 / 28 — heading */
.text-h2 {
  font-size: 20px;
  line-height: 1.4;
}

/* Spec: 32 / 40 — display */
.text-display {
  font-size: 32px;
  line-height: 1.25;
}

Tailwind: leading-6 là 1.5rem cố định theo scale, không phải “1.5 × font bất kỳ”. Khi map từ Figma, hoặc dùng arbitrary leading-[1.5], hoặc token CSS thuần — đừng giả định tên class = hệ số bạn vừa tính.

---

Kế thừa: chỗ junior hay vỡ

/* Nguy hiểm */
.parent {
  font-size: 16px;
  line-height: 24px; /* tuyệt đối */
}
.child {
  font-size: 28px; /* inherit line-height 24px → quá chặt */
}

/* An toàn hơn */
.parent {
  font-size: 16px;
  line-height: 1.5; /* hệ số */
}
.child {
  font-size: 28px; /* line-height dùng hiệu dụng 1.5 × 28 */
}

Quy tắc thực dụng: đặt unitless trên token gốc (body, .prose, design token). Chỉ cân nhắc px khi element một dòng và bạn chủ động không muốn inherit hệ số.

---

Khoảng khởi điểm theo vai trò (CSS thuần)

Đây là điểm khởi — không phải “vàng” cho mọi font:

Vai trò	Hệ số gợi ý	Lý do ngắn
Body / paragraph	1.5 – 1.8	Đọc nhiều dòng liên tiếp
Heading lớn	1.2 – 1.4	Khối chữ gọn, ít dòng
Button / label 1 dòng	1.0 – 1.25	Tránh nút quá cao
Caption nhỏ	1.4 – 1.6	Chữ nhỏ cần thở hơn một chút

Muốn tinh chỉnh theo đoạn tiếng Việt dài, dấu thanh, blog/landing → bài Line-height tiếng Việt đọc dài. Bài này dừng ở nền tảng CSS + bàn giao design.

---

Lỗi thường gặp (checklist PR)

1. line-height: 24px trên body hoặc .app — vỡ khi con đổi font-size
2. Một token cho mọi cấp — heading thưa hoặc body chặt
3. Tin normal — lệch giữa font design và font web
4. Nhầm leading-* Tailwind với hệ số Figma — scale rem ≠ phép chia vừa tính
5. Không kiểm tra mobile sau khi chỉ nhìn desktop 1440px
6. Gõ “16px” vào ô tool — chỉ nhập số 16 và 24

Case study

Case A — Landing “chữ đè nhau” trên mobile: Desktop font-size: 18px; line-height: 28px. Media query đổi font-size: 16px nhưng quên line-height → 28px trên 16px trông quá thưa; team khác lại giữ 24px khi tăng font lên 20px → chặt. Fix: line-height: 1.55 unitless một lần.

Case B — Design system 12 text style: Designer gửi bảng px. Engineer lập spreadsheet hoặc dán từng cặp vào tool, xuất token --lh-body: 1.5, --lh-h1: 1.2. PR chỉ diff token — không tranh luận số lẻ trên Slack.

---

Quy trình 4 bước với công cụ Kawa

1. Đọc font-size + leading từ Figma Inspect
2. Nhập vào /vi/tools/line-height/
3. Copy hệ số vào CSS variable hoặc class
4. Resize viewport / đổi font-size — xác nhận tỷ lệ giữ

Tool chạy trên trình duyệt: chỉ phép chia px → hệ số. Không upload file design, không cần đăng ký.

---

Tóm tắt quyết định

Câu hỏi	Trả lời ngắn
Ghi gì cho body?	Unitless 1.5–1.8
Figma 16/24?	1.5
Dùng px khi nào?	Hạn chế; biết rõ hệ quả inherit
Cần bài tiếng Việt dài?	line-height-readability

---

Liên kết liên quan

• Công cụ line-height
• Line-height tiếng Việt đọc dài
• Danh sách công cụ
• So sánh công cụ