Tính Line Height
Tìm giá trị line-height dễ đọc cho văn bản của bạn và xem áp dụng ngay trong khung xem trước trực tiếp. Dùng công cụ này khi bạn cần chữ thân bài dễ đọc hoặc tiêu đề gọn gàng, và muốn lấy đúng đoạn CSS để dán vào stylesheet.
Các bước sử dụng
- Kéo thanh trượt Cỡ chữ (8–48px) cho khớp với đoạn văn bản bạn đang định dạng.
- Chọn chế độ bằng công tắc Tỉ lệ không đơn vị / Giá trị pixel.
- Ở chế độ tỉ lệ, dùng thanh trượt Tỉ lệ line-height (1–2.5) để đặt hệ số nhân không đơn vị; ở chế độ pixel, nhập chính xác giá trị Line-height (px).
- Quan sát thẻ màu phản hồi — ví dụ màu xanh "Lý tưởng cho chữ thân bài" hoặc cảnh báo "Quá chật" — khi bạn điều chỉnh.
- Nhìn khung Xem trước bên phải để thấy văn bản thực sự đọc như thế nào.
- Nhấp vào một trong hai dòng
line-heighttrong ô CSS (giá trị không đơn vị hoặc giá trịpx) để sao chép vào clipboard.
Mẹo
- Đặt tỉ lệ khoảng 1.4–1.7 cho chữ thân bài; thẻ sẽ chuyển xanh trong khoảng "Lý tưởng" này.
- Dùng giá trị từ 1.2 đến 1.35 cho tiêu đề, nơi line-height chật hơn sẽ dễ nhìn hơn.
- Sao chép
line-heightkhông đơn vị khi bạn muốn nó co giãn theo cỡ chữ ở nhiều phần tử; sao chép giá trị px khi cần khoảng cách cố định. - Mọi thứ chạy ngay trong trình duyệt — không có gì bạn nhập bị tải lên máy chủ.
Câu hỏi thường gặp
Khác biệt giữa tỉ lệ không đơn vị và giá trị pixel là gì?
Tỉ lệ không đơn vị nhân với cỡ chữ (ví dụ 1.5 × 16px = 24px) và tự co giãn khi cỡ chữ thay đổi. Giá trị pixel là chiều cao cố định bất kể cỡ chữ. Công cụ hiển thị cả hai dòng CSS để bạn sao chép loại nào tùy ý.
Các thẻ màu có ý nghĩa gì?
Chúng đánh giá độ dễ đọc của line-height hiện tại: màu đỏ khi quá chật hoặc quá thưa, màu vàng khi hơi chật (hợp tiêu đề) hoặc hơi thưa/rộng rãi, và màu xanh khi rơi vào khoảng lý tưởng cho chữ thân bài.
Thay đổi cỡ chữ có ảnh hưởng đến kết quả ở chế độ pixel không?
Line-height dạng pixel vẫn giữ cố định, nhưng công cụ tính lại tỉ lệ không đơn vị tương đương (px ÷ cỡ chữ), nên giảm cỡ chữ sẽ làm tỉ lệ đó lớn hơn. Cả hai giá trị đều cập nhật trực tiếp trong ô CSS.