Tính chiều cao dòng cho chữ: chọn tỷ lệ đúng và tránh bẫy đơn vị
Công cụ cho bạn kéo cỡ chữ và tỷ lệ chiều cao dòng rồi trả về cùng lúc năm dạng giá trị: pixel, số không đơn vị, em, phần trăm và khoảng dẫn tính bằng pixel. Đoạn văn mẫu bên dưới đổi theo ngay khi bạn kéo, nên bạn đánh giá được độ thoáng của khối chữ thay vì phải đoán từ con số.
Tính năng nổi bật
- Thanh trượt cỡ chữ từ 10 tới 72 pixel, bước nhảy một pixel
- Thanh trượt tỷ lệ chiều cao dòng từ 1 tới 3, bước nhảy 0,05
- Bốn mức đặt sẵn: Tight 1,25, Normal 1,5, Relaxed 1,75 và Loose 2
- Xuất cùng lúc năm dạng giá trị gồm pixel, số không đơn vị, em và phần trăm
- Tính sẵn khoảng dẫn, tức phần khoảng trống dôi ra ngoài cỡ chữ, theo pixel
- Nút sao chép riêng cho từng dạng giá trị
- Đoạn văn mẫu áp dụng ngay thiết lập hiện tại để bạn nhìn được độ thoáng thật
- Hiện sẵn dòng CSS gồm cả cỡ chữ và chiều cao dòng, mọi tính toán chạy trên trình duyệt
Chiều cao dòng là thứ quyết định người ta đọc hết hay bỏ giữa chừng
Trong một khối văn bản dài, chiều cao dòng ảnh hưởng tới trải nghiệm đọc nhiều hơn cả việc chọn phông chữ. Khi các dòng nằm quá sát nhau, mắt người đọc mất điểm tựa lúc quét từ cuối dòng này về đầu dòng kế tiếp và thường xuyên đọc lại nhầm dòng, dẫn tới cảm giác mệt mà bản thân người đọc không lý giải được. Khi các dòng cách nhau quá xa, khối chữ vỡ thành những dải rời rạc và mắt không còn nhận ra chúng thuộc cùng một đoạn. Vấn đề là cả hai lỗi này đều rất khó phát hiện qua con số: chênh lệch giữa tỷ lệ 1,3 và 1,55 chỉ là bốn pixel ở cỡ chữ 16, nghe như không đáng kể, nhưng đọc một bài dài thì khác biệt rất rõ. Vì vậy cách làm đúng là kéo tỷ lệ và nhìn vào một đoạn văn thật, đúng cỡ chữ sẽ dùng, rồi mới chốt con số.
Lợi ích khi sử dụng
- Chọn tỷ lệ dựa trên đoạn văn thật thay vì dựa vào cảm tính hay con số nghe hợp lý
- Có ngay giá trị ở cả bốn đơn vị nên không phải tự quy đổi khi đổi dự án
- Biết được khoảng dẫn theo pixel để khớp chiều cao dòng với lưới khoảng cách
- So sánh nhanh bốn mức phổ biến chỉ bằng một cú bấm
- Không cần mở trình thiết kế hay chỉnh sửa dự án chỉ để thử một con số
Cách chọn chiều cao dòng phù hợp
- 1Kéo thanh cỡ chữ về đúng cỡ mà khối chữ này sẽ dùng trong thiết kế thật, thường là 16 hoặc 17 pixel cho nội dung đọc.
- 2Bấm một mức đặt sẵn để lấy điểm khởi đầu, Normal 1,5 là lựa chọn an toàn cho đoạn văn.
- 3Kéo thanh tỷ lệ quanh mức đó từng nấc nhỏ và nhìn đoạn văn mẫu, chọn mức mà mắt bạn quét dòng thấy trôi nhất.
- 4Xem con số khoảng dẫn để biết mỗi dòng đang dôi ra bao nhiêu pixel, đây là con số hữu ích khi bạn cần khớp với lưới khoảng cách của dự án.
- 5Sao chép giá trị ở dạng số không đơn vị và dùng nó trong CSS, trừ khi bạn có lý do cụ thể để chọn dạng khác.
Chiều cao dòng thực chất làm gì với khối chữ
Mỗi dòng chữ nằm trong một hộp dòng có chiều cao đúng bằng giá trị chiều cao dòng. Phần dôi ra so với cỡ chữ được gọi là khoảng dẫn, và trình duyệt chia đôi phần dôi này rồi thêm đều lên trên và xuống dưới nét chữ. Với cỡ chữ 16 pixel và tỷ lệ 1,5, hộp dòng cao 24 pixel, khoảng dẫn là 8 pixel, tức 4 pixel phía trên và 4 pixel phía dưới mỗi dòng. Hiểu chỗ chia đôi này giải thích hai hiện tượng thường gặp. Thứ nhất, khoảng trắng phía trên dòng đầu tiên và phía dưới dòng cuối cùng của một đoạn luôn nhiều hơn bạn nghĩ, vì nửa khoảng dẫn vẫn được tính ở hai đầu; đó là lý do một tiêu đề đặt chiều cao dòng lớn trông như bị đẩy xuống dù bạn không đặt lề trên. Thứ hai, khoảng cách thật giữa hai dòng liền kề bằng đúng một lần khoảng dẫn chứ không phải một nửa, vì nửa dưới của dòng trên cộng với nửa trên của dòng dưới.
Bốn đơn vị và cái bẫy thừa kế mà ai cũng vấp một lần
Công cụ trả về bốn dạng giá trị nhưng chúng không tương đương nhau khi có phần tử con. Giá trị không đơn vị được thừa kế nguyên dạng hệ số, nên mỗi phần tử con tự nhân hệ số đó với cỡ chữ của chính nó. Ngược lại, giá trị theo em hoặc theo phần trăm được tính thành một chiều dài cố định ngay tại phần tử cha, rồi chiều dài cố định đó mới truyền xuống cho con. Hậu quả rất cụ thể: nếu bạn đặt trên thẻ body cỡ chữ 16 pixel với chiều cao dòng 1,5em, con số 24 pixel sẽ truyền xuống mọi phần tử con; một tiêu đề bên trong có cỡ chữ 32 pixel vẫn nhận hộp dòng cao 24 pixel, khiến hai dòng tiêu đề chồng lên nhau. Cùng thiết lập đó nhưng viết giá trị không đơn vị là 1,5 thì tiêu đề tự nhận hộp dòng 48 pixel và mọi thứ bình thường. Vì vậy quy tắc mặc định là luôn dùng số không đơn vị, chỉ dùng pixel khi bạn cố tình muốn khóa cứng chiều cao dòng cho một thành phần riêng lẻ.
Chọn tỷ lệ theo cỡ chữ, độ dài dòng và loại nội dung
Ba yếu tố cùng quyết định con số phù hợp. Cỡ chữ càng lớn thì tỷ lệ càng phải nhỏ, vì khoảng dẫn tính theo hệ số nên ở cỡ chữ lớn nó nở ra rất nhanh: tỷ lệ 1,5 ở cỡ 16 pixel cho khoảng dẫn 8 pixel nhưng ở cỡ 48 pixel cho tới 24 pixel, đủ để tiêu đề hai dòng trông rời rạc. Vì vậy nội dung đọc thường nằm trong khoảng 1,5 tới 1,7 còn tiêu đề lớn nằm trong khoảng 1,1 tới 1,25. Yếu tố thứ hai là độ dài dòng: dòng càng dài thì mắt càng khó tìm đúng dòng kế tiếp nên càng cần nhiều khoảng dẫn; một cột hẹp 45 ký tự sống tốt với tỷ lệ 1,45 trong khi cột rộng 90 ký tự nên tăng lên khoảng 1,7. Yếu tố thứ ba là loại nội dung: nhãn nút bấm và thẻ trạng thái thường đặt tỷ lệ 1 rồi dùng phần đệm để tạo chiều cao, còn mã nguồn trong khối code thường dùng khoảng 1,4 tới 1,5 để các dòng thụt đầu dòng vẫn dễ dò theo.
Vì sao chữ tiếng Việt cần chiều cao dòng rộng hơn tiếng Anh
Đây là chi tiết mà các bài viết nước ngoài về chủ đề này không nhắc tới. Tiếng Việt chồng tới hai lớp dấu trên một nguyên âm: dấu phụ gắn với chữ cái như trong ê, ơ, ă, cộng thêm dấu thanh đặt bên trên như sắc, huyền, hỏi, ngã. Những chữ như ế, ồ, ữ, ẳ vươn cao hơn hẳn chiều cao chữ hoa thông thường của bảng chữ Latin, và các chữ mang dấu nặng lại thò xuống dưới đường chân chữ. Nếu bạn lấy nguyên tỷ lệ 1,3 vốn trông ổn với văn bản tiếng Anh, dấu thanh của dòng dưới sẽ chạm hoặc chồng lên phần thò xuống của dòng trên, tạo cảm giác chữ bị dính vào nhau ngay cả khi tính toán trên giấy vẫn hợp lệ. Kinh nghiệm thực dụng là cộng thêm khoảng 0,1 tới 0,15 vào tỷ lệ bạn định dùng cho tiếng Anh, tức nội dung đọc tiếng Việt nên nằm quanh 1,6 tới 1,75. Mức độ nghiêm trọng còn tùy phông chữ, nên hãy thử với đúng phông sẽ dùng và với một đoạn có nhiều dấu.
Nhịp dọc và ngưỡng bắt buộc theo tiêu chuẩn khả năng tiếp cận
Nhiều hệ thống thiết kế chọn chiều cao dòng sao cho hộp dòng ra số nguyên chia hết cho đơn vị lưới, thường là 4 hoặc 8 pixel. Ví dụ cỡ chữ 16 với tỷ lệ 1,5 cho hộp dòng 24 pixel, chia hết cho cả 4 lẫn 8, nên mọi khoảng cách trên trang xếp khớp nhau tạo thành nhịp dọc đều đặn. Ngược lại cỡ chữ 17 với tỷ lệ 1,55 cho 26,35 pixel, con số này phá vỡ lưới và khiến các khối cạnh nhau lệch dần. Về mặt tiêu chuẩn, tiêu chí Text Spacing của WCAG 2.1 ở mức AA yêu cầu nội dung không được mất chữ hay mất chức năng khi người dùng đặt chiều cao dòng lên tối thiểu 1,5 lần cỡ chữ, khoảng cách sau đoạn văn 2 lần cỡ chữ, giãn ký tự 0,12 lần và giãn từ 0,16 lần cỡ chữ. Nghĩa là dù bạn thiết kế với tỷ lệ nào, giao diện vẫn phải chịu được khi bị đẩy lên 1,5 — điều này loại bỏ hẳn cách làm khóa cứng chiều cao khối chữ theo pixel.
Câu hỏi thường gặp (FAQ)
Chiều cao dòng bao nhiêu là hợp lý cho nội dung đọc?
Với văn bản tiếng Anh, khoảng 1,5 tới 1,6 lần cỡ chữ là vùng an toàn. Với văn bản tiếng Việt nên nhích lên 1,6 tới 1,75 vì dấu thanh chồng lên dấu phụ khiến chữ chiếm nhiều chiều cao hơn. Tiêu đề lớn thì ngược lại, nên hạ xuống khoảng 1,1 tới 1,25.
Nên dùng số không đơn vị hay dùng px, em, phần trăm?
Mặc định hãy dùng số không đơn vị. Chỉ giá trị này được thừa kế dưới dạng hệ số nên mỗi phần tử con tự nhân với cỡ chữ của chính nó. Giá trị em và phần trăm bị tính thành chiều dài cố định ngay tại phần tử cha rồi truyền xuống, gây lỗi chồng dòng ở các phần tử con có cỡ chữ lớn hơn.
Vì sao đặt line-height bằng em lại làm tiêu đề chồng dòng?
Vì giá trị em được quy thành pixel ngay tại nơi bạn khai báo rồi con số cố định đó mới truyền xuống. Đặt 1,5em trên thẻ body cỡ 16 pixel nghĩa là mọi phần tử con nhận hộp dòng 24 pixel, kể cả tiêu đề cỡ 32 pixel, nên hai dòng tiêu đề đè lên nhau.
Khoảng dẫn mà công cụ hiển thị nghĩa là gì?
Đó là phần chiều cao dôi ra so với cỡ chữ, tính bằng chiều cao dòng trừ đi cỡ chữ. Trình duyệt chia đôi phần này rồi thêm đều lên trên và xuống dưới nét chữ. Với cỡ 16 và tỷ lệ 1,5, khoảng dẫn là 8 pixel, tức 4 pixel mỗi phía của từng dòng.
Giá trị normal của line-height bằng bao nhiêu?
Không có con số cố định. Trình duyệt lấy từ thông tin đo đạc nhúng trong chính tệp phông chữ, nên mỗi phông cho một kết quả khác nhau, thường rơi vào khoảng 1,1 tới 1,3. Vì không đoán trước được, hãy luôn khai báo giá trị cụ thể cho nội dung đọc thay vì để mặc định.
Vì sao chữ tiếng Việt trông chật hơn ở cùng một tỷ lệ?
Vì tiếng Việt chồng hai lớp dấu trên nhiều nguyên âm, ví dụ ế hay ữ vươn cao hơn chiều cao chữ hoa thường thấy, còn dấu nặng lại thò xuống dưới đường chân chữ. Ở tỷ lệ chật, dấu thanh dòng dưới chạm phần thò xuống của dòng trên. Nên cộng thêm khoảng 0,1 vào tỷ lệ.
Độ dài dòng có ảnh hưởng tới lựa chọn chiều cao dòng không?
Có, và ảnh hưởng khá mạnh. Dòng càng dài thì mắt càng khó tìm đúng dòng kế tiếp nên càng cần nhiều khoảng dẫn. Cột hẹp khoảng 45 ký tự sống tốt với tỷ lệ 1,45, còn cột rộng khoảng 90 ký tự nên tăng lên quanh 1,7. Cả hai yếu tố nên được cân nhắc cùng nhau.
Tiêu chuẩn khả năng tiếp cận quy định gì về chiều cao dòng?
Tiêu chí Text Spacing của WCAG 2.1 ở mức AA yêu cầu nội dung không mất chữ hay mất chức năng khi người dùng tự đặt chiều cao dòng lên tối thiểu 1,5 lần cỡ chữ. Nghĩa là giao diện phải chịu được mức đó, nên đừng khóa cứng chiều cao của khối chữ theo pixel.
Chiều cao dòng của nút bấm nên đặt bao nhiêu?
Với nhãn một dòng như nút bấm, thẻ trạng thái hay mục điều hướng, cách thông dụng là đặt tỷ lệ 1 rồi tạo chiều cao bằng phần đệm trên dưới. Cách này cho bạn kiểm soát chính xác chiều cao vùng bấm, vốn nên đạt tối thiểu khoảng 44 pixel để dễ chạm trên điện thoại.
Nhịp dọc trong thiết kế nghĩa là gì?
Là việc chọn chiều cao dòng và các khoảng cách sao cho chúng đều là bội số của một đơn vị lưới, thường là 4 hoặc 8 pixel. Cỡ chữ 16 với tỷ lệ 1,5 cho hộp dòng 24 pixel, chia hết cho cả hai, nên các khối trên trang xếp khớp nhau và tạo cảm giác ngăn nắp.
Công cụ này khác gì công cụ tạo thang cỡ chữ?
Thang cỡ chữ quyết định trục kích cỡ, tức mỗi cấp tiêu đề và nội dung dùng bao nhiêu pixel. Công cụ này quyết định trục khoảng cách dọc cho từng cấp đó. Hai trục độc lập và phải đặt riêng, vì tỷ lệ chiều cao dòng cần giảm dần khi cỡ chữ tăng lên.
Thiết lập của tôi có được lưu lại không?
Không. Cỡ chữ và tỷ lệ chỉ tồn tại trong phiên làm việc hiện tại, công cụ không lưu lịch sử và không gửi gì lên máy chủ. Mọi phép nhân và quy đổi đơn vị đều chạy bằng JavaScript ngay trên trình duyệt của bạn.
Từ khóa liên quan
- tính line height
- line height calculator
- css line-height là gì
- chiều cao dòng chuẩn cho web
- line height unitless hay em
- line height thừa kế css
- leading trong typography
- chiều cao dòng cho tiếng việt
- line height cho tiêu đề
- nhịp dọc trong thiết kế
- vertical rhythm css
- wcag text spacing 1.4.12
- độ dài dòng chữ tối ưu
- line height normal bằng bao nhiêu
- khoảng cách dòng trong css
- typography web cơ bản
- đổi line height sang px
- line height cho nút bấm
- công cụ css online miễn phí
- cách chỉnh giãn dòng website
