Chuyển tới nội dung chính

Tính chiều cao dòng

Tính chiều cao dòng và khoảng cách dòng từ cỡ chữ và tỉ lệ, kèm mã CSS để chép.

Chữ

Tỉ lệ
Từ 0,8 đến 3. Chữ thân bài dễ đọc nhất ở khoảng 1,4 đến 1,6.

Đoạn văn mẫu

Tiếng Việt có dấu nằm cả trên lẫn dưới con chữ, nên chiều cao dòng cần đủ thoáng: ở đây người ta vẫn nói “học ăn, học nói, học gói, học mở”. Thử đọc vài dòng để xem khoảng cách có dễ chịu không.

Kết quả

Chiều cao dòng, px
24
Khoảng cách dòng, px
8

Mã

  • CSSline-height: 1.5;
  • CSS pxline-height: 24px;
  • SwiftUI.lineSpacing(8)

Các cỡ thường dùng

Cỡ chữChiều cao dòngKhoảng cách dòng
15px5px
16.5px5.5px
18px6px
19.5px6.5px
21px7px
24px8px
27px9px
30px10px
36px12px
42px14px
48px16px
54px18px
60px20px
72px24px
84px28px
96px32px
108px36px

Chạy ngay trên trình duyệt; những gì bạn nhập không rời khỏi trang này.

Cách hoạt động

Cỡ chữ nhân tỉ lệ

Chiều cao dòng bằng cỡ chữ nhân với một tỉ lệ. Khoảng cách dòng (leading) là phần chiều cao dòng thêm vào so với cỡ chữ.

Các mức có sẵn là Chặt (1,2), Vừa (1,5), Thoáng (1,75) và Rộng (2). Gõ tỉ lệ bất kỳ từ 0,8 đến 3, mức trùng khớp sẽ sáng lên, không khớp thì là Tự chọn.

chiều cao dòng = cỡ chữ × tỉ lệ; khoảng cách dòng = chiều cao dòng − cỡ chữ

Chép gì

Dòng CSS dùng tỉ lệ không đơn vị: phần tử con kế thừa nó như một tỉ lệ nên tự co giãn theo cỡ chữ của mình. Bản pixel dành cho khi bạn cần giá trị cố định, còn lineSpacing của SwiftUI nhận khoảng cách dòng.

Đoạn văn mẫu

Đoạn văn được đặt đúng cỡ chữ và chiều cao dòng bạn chọn, mỗi hộp dòng có kẻ vạch, để bạn nhìn khoảng cách trước khi dùng.