Tính toán line-height tối ưu cho typography
CSS: font-size: 16px; line-height: 1.5;
Công cụ Line Height Calculator của Tấn Phát Digital giúp bạn tính toán line-height tối ưu cho typography trong web design. Điều chỉnh font-size từ 10px đến 72px và line-height ratio từ 1 đến 3. Preview realtime với sample text để thấy kết quả ngay lập tức. Hiển thị line-height ở nhiều định dạng: pixels, unitless, em, và percentage. Tính toán leading (khoảng cách giữa các dòng) tự động. 4 presets phổ biến: Tight (1.25), Normal (1.5), Relaxed (1.75), Loose (2). Copy giá trị với một click. Line-height đúng cải thiện readability đáng kể, đặc biệt quan trọng cho body text và long-form content.
Line-height (hay leading trong typography truyền thống) là một trong những yếu tố quan trọng nhất ảnh hưởng đến readability của text. Line-height quá tight (chật) khiến các dòng chữ dính vào nhau, mắt khó theo dõi và gây mệt mỏi khi đọc. Line-height quá loose (rộng) làm mất liên kết giữa các dòng, người đọc khó nhận ra đâu là dòng tiếp theo. Research cho thấy line-height tối ưu cho body text là 1.4-1.6 (140%-160% của font-size). Headings có thể dùng line-height tighter (1.1-1.3) vì thường ngắn và cần compact hơn. Line-height cũng ảnh hưởng đến vertical rhythm - sự nhất quán về spacing trong toàn bộ page layout.
CSS hỗ trợ nhiều cách specify line-height: Unitless (recommended): line-height: 1.5; - giá trị nhân với font-size của element. Đây là cách được khuyến nghị vì nó inherit đúng khi font-size thay đổi ở child elements. Pixels: line-height: 24px; - giá trị cố định, không scale theo font-size. Dùng khi cần precise control. Em: line-height: 1.5em; - tương tự unitless nhưng có thể gây issues với inheritance. Percentage: line-height: 150%; - tương tự em. Normal: line-height: normal; - browser default, thường khoảng 1.2, không consistent across browsers.
Body text (paragraphs): 1.4-1.6 là optimal range. Text nhỏ (14px trở xuống) cần line-height cao hơn (1.5-1.7). Text lớn có thể dùng line-height thấp hơn. Headings: 1.1-1.3 cho headings lớn (h1, h2). Headings thường ngắn nên cần compact hơn. Multi-line headings cần line-height cao hơn single-line. Code blocks: 1.4-1.5 cho monospace fonts. Code cần đủ space để phân biệt các dòng nhưng không quá loose. Lists: 1.4-1.6 tương tự body text. Có thể thêm margin-bottom cho list items thay vì tăng line-height.
Vertical rhythm là concept về consistent vertical spacing trong page layout. Idea là tất cả elements align theo một baseline grid. Line-height đóng vai trò quan trọng trong vertical rhythm. Ví dụ: với base font-size 16px và line-height 1.5, baseline unit là 24px. Margins, paddings, và heights của các elements nên là bội số của 24px để maintain rhythm. CSS custom properties giúp implement: :root { --baseline: 24px; } và sử dụng: margin-bottom: var(--baseline); padding: calc(var(--baseline) * 2);
Unitless (như 1.5) được khuyến nghị vì nó scale đúng khi font-size thay đổi ở child elements. Với px, nếu parent có line-height: 24px và child có font-size: 32px, line-height vẫn là 24px gây overlap. Với unitless 1.5, child sẽ có line-height: 48px (32 * 1.5).
1.4-1.6 (140%-160%) là range được khuyến nghị cho body text. 1.5 là giá trị phổ biến nhất, cân bằng giữa readability và space efficiency. Font size nhỏ hơn (12-14px) có thể cần line-height cao hơn (1.6-1.7). Font size lớn hơn có thể dùng thấp hơn (1.4).
Leading (đọc là 'ledding') là thuật ngữ typography truyền thống, chỉ khoảng cách giữa baseline của dòng này đến baseline của dòng tiếp theo. Trong CSS, line-height bao gồm cả font-size và leading. Leading = line-height - font-size. Ví dụ: font-size 16px, line-height 24px → leading = 8px (4px trên và 4px dưới mỗi dòng).
line-height: normal để browser tự quyết định, thường dựa trên font metrics. Giá trị thực tế khác nhau giữa các fonts (thường 1.0-1.2) và có thể khác giữa các browsers. Để consistent, luôn specify line-height explicitly thay vì dùng normal.
Có, WCAG 2.1 khuyến nghị line-height ít nhất 1.5 cho body text để đảm bảo readability cho người có dyslexia hoặc visual impairments. Paragraph spacing nên ít nhất 2x line-height. Users cũng nên có khả năng adjust line-height theo preference.
Mỗi font có metrics khác nhau (x-height, ascenders, descenders) nên cùng line-height có thể trông khác nhau. Test với actual fonts bạn sử dụng. Một số fonts cần line-height cao hơn (fonts với tall ascenders) hoặc thấp hơn (compact fonts). Công cụ này giúp bạn preview và adjust cho từng font.
Chúng tôi không chỉ thiết kế website, mà còn giúp doanh nghiệp xây dựng thương hiệu số mạnh mẽ. Cung cấp dịch vụ thiết kế website trọn gói từ thiết kế đến tối ưu SEO. Hãy liên hệ ngay với Tấn Phát Digital để cùng tạo nên những giải pháp công nghệ đột phá, hiệu quả và bền vững cho doanh nghiệp của bạn tại Hồ Chí Minh.
