Font Preview - Xem Trước Font Chữ

Tính năng nổi bật

• Hiển thị đồng thời 12 font: Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Playfair Display, Merriweather, Source Code Pro, JetBrains Mono, Be Vietnam Pro, Nunito
• Nhập đoạn văn mẫu của riêng bạn, mọi font cùng đổi theo
• Kéo cỡ chữ từ 12px tới 72px, thấy ngay điểm gãy về độ dễ đọc
• Đổi độ đậm theo bậc 100 tới 900 để kiểm tra font có đủ weight hay không
• Chỉnh line-height từ 1 tới 3 và letter-spacing từ −2px tới 10px
• Bấm vào một font để đánh dấu lựa chọn đang cân nhắc
• Sao chép năm dòng CSS đã cấu hình: font-family, font-size, font-weight, line-height, letter-spacing
• Chạy hoàn toàn trên trình duyệt, không gửi văn bản mẫu đi đâu

Vì sao nhìn ảnh mẫu font không đủ để chọn font

Ảnh mẫu trên trang bán font hoặc trang giới thiệu thường dùng một dòng chữ ngắn viết hoa, cỡ rất lớn, tiếng Anh. Ở điều kiện đó font nào cũng đẹp. Vấn đề chỉ lộ ra khi bạn đặt font vào đoạn văn thật: cỡ 16px, dài mấy dòng, có dấu tiếng Việt, có số. Lúc đó mới thấy font này có x-height thấp nên chữ trông bé hơn hẳn dù cùng font-size, font kia có chữ l và số 1 giống hệt nhau nên đọc bảng số dễ nhầm, font nọ thiếu bộ ký tự tiếng Việt nên chữ có dấu rơi sang font dự phòng và cả đoạn trông lệch hẳn. Công cụ này giữ nguyên một biến duy nhất là font, còn cỡ chữ, độ đậm, giãn dòng và giãn chữ đều bằng nhau, nên khác biệt bạn nhìn thấy chính là khác biệt của bản thân font chứ không phải của cách trình bày.

Lợi ích khi sử dụng

• •So sánh nhiều font trong cùng một khung hình thay vì mở nhiều tab
• •Phát hiện sớm font thiếu bộ dấu tiếng Việt trước khi đưa vào dự án
• •Thử ngay cỡ chữ và giãn dòng thật, không phải đoán
• •Lấy được đoạn CSS đúng với thông số vừa thử, không phải gõ lại
• •Không cần cài font vào máy chỉ để xem thử

Cách so sánh font bằng công cụ

1. 1Dán vào ô văn bản mẫu đúng đoạn nội dung bạn sẽ dùng thật, có dấu tiếng Việt và có cả chữ số nếu trang của bạn hiển thị số liệu.
2. 2Kéo cỡ chữ về đúng cỡ định dùng cho phần thân bài, thường là 16px hoặc 18px, đừng để cỡ lớn vì cỡ lớn che khuyết điểm.
3. 3Đặt line-height khoảng 1,5 tới 1,7 để đoạn văn giống với trạng thái thật trên web.
4. 4Cuộn qua danh sách, loại dần những font có chữ có dấu bị lệch hoặc trông khác hẳn phần chữ không dấu.
5. 5Bấm nút sao chép ở font đã chọn để lấy đoạn CSS, rồi thêm liên kết nạp font tương ứng vào dự án.

Bốn chỉ số quyết định font trông thế nào ở cỡ nhỏ

Thứ nhất là x-height, tức chiều cao của chữ thường không có nét lên xuống như chữ x hay chữ o, so với chiều cao chữ hoa. Font có x-height cao như Open Sans hay Nunito trông to và dễ đọc hơn ở cùng font-size, còn font có x-height thấp trông thanh mảnh nhưng dễ bị hụt khi để 14px. Thứ hai là độ mở của counter, tức khoảng trống bên trong các chữ như a, e, o. Counter hẹp làm chữ bết lại khi nền tối chữ sáng. Thứ ba là độ tương phản giữa nét đậm và nét mảnh: font serif kiểu Playfair Display có tương phản rất cao nên rất đẹp ở cỡ tiêu đề 36px trở lên nhưng ở 16px nét mảnh gần như biến mất. Thứ tư là khả năng phân biệt các cặp ký tự dễ nhầm, cụ thể là chữ I hoa, chữ l thường và số 1, cùng cặp số 0 với chữ O. Đây là lý do bảng số liệu và ô nhập mã nên dùng font có nét phân biệt rõ hoặc font đơn cách như JetBrains Mono.

Font tiếng Việt: chuyện dấu thanh chồng lên dấu mũ

Tiếng Việt là một trong số ít ngôn ngữ dùng chữ Latin cần xếp hai lớp dấu trên cùng một nguyên âm, ví dụ ế, ộ, ữ, ồ. Font làm cho tiếng Anh chỉ dựng sẵn một lớp dấu, nên khi gặp chữ hai lớp trình duyệt phải tự ghép và kết quả thường là dấu bị lệch, bị chồng lên nhau, hoặc bị đẩy cao chạm dòng trên. Nặng hơn là trường hợp font không có bộ ký tự tiếng Việt: trình duyệt sẽ lấy font dự phòng cho riêng những chữ có dấu, khiến trong cùng một câu có hai font khác nhau, chữ có dấu trông đậm hơn hoặc bé hơn phần còn lại. Poppins là ví dụ hay gặp nhất, bản chính thức trên Google Fonts không có bộ ký tự Vietnamese. Cách kiểm tra nhanh là gõ một câu chứa đủ các chữ khó như Nghĩ kỹ rồi hãy nướng bánh chưng, rồi so phần chữ có dấu với phần chữ không dấu trong cùng một dòng: nếu hai phần trông không cùng một bộ chữ thì font đó không dùng được cho nội dung tiếng Việt.

Chọn cỡ chữ, giãn dòng và giãn chữ theo con số cụ thể

Với phần thân bài đọc trên màn hình, cỡ 16px là mức tối thiểu và 17 tới 18px thoải mái hơn cho đoạn văn dài. Line-height nên nằm trong khoảng 1,5 tới 1,7 với chữ thân bài; đặt dưới 1,4 làm các dòng dính vào nhau, đặt trên 1,9 làm đoạn văn rời rạc và mắt khó bắt được dòng tiếp theo. Tiêu đề thì ngược lại: chữ càng lớn càng cần giãn dòng nhỏ, thường 1,1 tới 1,25, vì khoảng trống hình học giữa các dòng đã đủ rộng. Letter-spacing hầu như không cần chạm tới ở chữ thân bài vì nhà thiết kế font đã tính sẵn; chỉ nên tăng khoảng 0,5 tới 1,5px cho dòng chữ in hoa toàn bộ hoặc chữ nhỏ dạng nhãn, và giảm khoảng −0,5 tới −1,5px cho tiêu đề từ 40px trở lên để các chữ không bị rời. Một chi tiết nữa: độ dài dòng lý tưởng là 60 tới 75 ký tự, nên sau khi chọn xong font hãy chỉnh chiều rộng khối văn bản chứ đừng chỉ chỉnh cỡ chữ.

Độ đậm giả và cái giá của việc nạp quá nhiều weight

Thanh trượt độ đậm trong công cụ đi từ 100 tới 900, nhưng không phải font nào cũng có đủ chín bậc, và quan trọng hơn là dự án của bạn thường chỉ nạp vài bậc. Khi bạn yêu cầu một bậc không được nạp, trình duyệt không báo lỗi mà tự làm đậm hoặc làm nghiêng bằng thuật toán, gọi là faux bold và faux italic. Kết quả là nét chữ bị bơm phồng đều nhau, các khoảng trống bên trong chữ bị bóp lại, và chữ trông bẩn hơn hẳn so với bản đậm thật do nhà thiết kế vẽ. Dấu hiệu nhận ra là chữ đậm trông nhòe ở cỡ nhỏ. Vì vậy nguyên tắc thực dụng là chỉ nạp những bậc thật sự dùng, thường 400 cho thân bài và 600 hoặc 700 cho tiêu đề, mỗi bậc là một tệp tải thêm. Nếu bạn cần nhiều bậc, hãy dùng bản variable của font vì nó gói toàn bộ dải độ đậm vào một tệp duy nhất, thường nhẹ hơn tổng của ba tệp tĩnh.

Ghép font và viết font stack không bị nhảy chữ khi tải

Nguyên tắc ghép font an toàn nhất là dùng hai font khác hẳn nhau về loại: một serif cho tiêu đề với một sans-serif cho thân bài, hoặc ngược lại, ví dụ Playfair Display với Inter. Ghép hai sans-serif gần giống nhau là lỗi thường gặp vì người đọc không nhận ra đó là chủ ý mà chỉ thấy trang trông thiếu nhất quán. Về phần kỹ thuật, đoạn CSS công cụ sao chép cho bạn đã có sẵn họ dự phòng ở cuối như sans-serif hay serif; đừng xóa phần này vì nó quyết định trang trông thế nào trong khoảng thời gian font chính chưa tải xong. Thêm font-display: swap khi khai báo để trình duyệt hiển thị ngay bằng font hệ thống rồi mới thay, tránh cảnh chữ trắng xóa vài trăm mili giây. Nếu font dự phòng có x-height chênh nhiều so với font chính thì lúc thay font trang sẽ bị nhảy; khắc phục bằng cách khai báo một font dự phòng cục bộ có thuộc tính size-adjust và ascent-override cho khớp, hoặc chọn font dự phòng có tỷ lệ gần với font chính.

Câu hỏi thường gặp (FAQ)

Từ khóa liên quan

• xem trước font chữ online
• font preview online
• so sánh font chữ
• font tiếng việt đẹp
• font hỗ trợ tiếng việt
• google fonts tiếng việt
• chọn font cho website
• font chữ dễ đọc
• line height bao nhiêu là đẹp
• letter spacing là gì
• x-height là gì
• font weight 400 700
• faux bold là gì
• variable font là gì
• ghép font tiêu đề và nội dung
• be vietnam pro
• font sans serif hay serif
• font monospace cho code
• font-display swap
• công cụ xem font chữ miễn phí