Thử font chữ online: xem trước font tiếng Việt trước khi cài
Mục lục
Cách thử font chữ online bằng công cụ Thử font chữ của ColorME: gõ câu của bạn, thêm font Google hoặc tải file TTF, OTF lên, xem ở 11 cỡ chữ, trong đoạn văn, từng ký tự có dấu, rồi so sánh các font cạnh nhau và tải thẻ so sánh để nhờ người khác chọn.
Trả lời nhanh: để thử font chữ online mà không cần cài, mở công cụ Thử font chữ của ColorME, gõ câu của bạn vào ô Chữ mẫu, rồi thêm font theo một trong hai cách: gõ tên font Google vào ô "+ Thêm font Google..." hoặc bấm Tải font lên để chọn file TTF, OTF, WOFF, WOFF2 trong máy. Bốn tab Cỡ chữ, Đoạn văn, Bộ ký tự, So sánh cho bạn xem font ở 11 cỡ từ 12 đến 96 px, trong một đoạn văn tiếng Việt, từng ký tự có dấu, và đặt các font cạnh nhau. Miễn phí, không cần đăng nhập.
Thẻ so sánh tải về từ công cụ (PNG 1080×1350 px): cùng một tên thương hiệu giả định, ba font. Ảnh: ColorME.
Bài này dùng một tình huống xuyên suốt: chọn font cho bảng hiệu của một tiệm bánh giả định tên "Tiệm bánh Mùa Thu", có ba font Google và một file font tải về chưa cài.
Video quay màn hình (33 giây, không tiếng): gõ chữ mẫu, thêm font Lora, tải file Pacifico lên, xem Đoạn văn, Bộ ký tự, So sánh, bấm Chọn rồi bấm Tải thẻ so sánh. Ảnh chụp màn hình: ColorME.
Cách thử font chữ online trước khi cài: 5 bước
Bước 1: gõ câu của bạn vào Chữ mẫu
Vào colorme.vn/tools/type-tester. Trang mở sẵn hai font, Be Vietnam Pro và Playfair Display, với câu "Học thiết kế cùng ColorME". Bấm Tuỳ chỉnh, gõ câu của bạn vào ô Chữ mẫu (ô này nhận tối đa 120 ký tự). Bạn cũng có thể bấm thẳng vào một dòng chữ trong vùng xem trước để sửa; các dòng khác đổi theo.
Hãy gõ đúng thứ bạn sẽ dùng: tên thương hiệu, tiêu đề poster, có đủ dấu. Một font đẹp với "Hello" chưa chắc đẹp với "Tiệm bánh Mùa Thu".
Tab Cỡ chữ: một câu, 11 cỡ từ 12 đến 96 px. Ảnh chụp màn hình: ColorME.
Bước 2: thêm font Google bằng cách gõ tên
Bấm vào ô + Thêm font Google... ở cuối hàng tên font và gõ vài chữ đầu. Danh sách gợi ý hiện tối đa 8 font; font nào hỗ trợ tiếng Việt có nhãn "Tiếng Việt" bên phải. Gõ "lo" thì thấy Lora và Lobster có nhãn, Lobster Two và Londrina Solid thì không. Bấm vào tên font để thêm.
Thêm Lora từ Google Fonts, rồi tải lên một file font. Ảnh chụp màn hình: ColorME.
Nhãn "Tiếng Việt" trong danh sách gợi ý. Ảnh chụp màn hình: ColorME.
Nhãn này là gợi ý nhanh, không phải kết luận cuối. Chúng tôi thử thêm Bebas Neue, một font không có nhãn: câu mẫu vẫn hiện đủ dấu. Vì vậy hãy nhìn chính câu của bạn ở bước 4, và khi cần chắc chắn thì dùng công cụ Kiểm tra font tiếng Việt.
Bước 3: tải file font trong máy lên để xem trước khi cài
Bấm Tải font lên và chọn file. Ô chọn file nhận đuôi .ttf, .otf, .woff, .woff2 và cho chọn nhiều file. Chúng tôi thử với Pacifico-Regular.ttf (321,7 KB): font xuất hiện ngay trong hàng tên với tên file bỏ đuôi, và vùng xem trước chuyển sang font đó. Không có gì được cài vào máy.
Font từ file trong máy, xem được ngay mà chưa cài. Ảnh chụp màn hình: ColorME.
Chọn nhầm file không phải font thì trang báo "… không phải font hợp lệ" và danh sách font giữ nguyên. Muốn bỏ một font, bấm dấu × cạnh tên.
Bước 4: xem font qua bốn tab
- Cỡ chữ: câu mẫu ở 11 cỡ: 12, 14, 16, 20, 24, 32, 40, 48, 64, 80, 96 px. Nhìn hàng 12–16 px để biết font có đọc được ở cỡ nhỏ không.
- Đoạn văn: câu mẫu làm tiêu đề (48 px theo mặc định) đặt trên một đoạn văn tiếng Việt cỡ 18 px. Đây là nơi lộ ra những font chỉ hợp làm tiêu đề.
- Bộ ký tự: 183 ký tự chia 5 nhóm: 26 chữ hoa, 26 chữ thường, 10 số, 74 ký tự tiếng Việt có dấu, 47 dấu câu và ký hiệu (có cả ₫). Dưới mỗi ô là mã Unicode.
- So sánh: mọi font trong danh sách xếp thành hàng với cùng một câu.
Đi qua ba tab còn lại và đánh dấu font mình chọn. Ảnh chụp màn hình: ColorME.
Tab Bộ ký tự của Playfair Display. Ảnh chụp màn hình: ColorME.
Với font Google bạn đang cân nhắc cho cả tiêu đề lẫn nội dung, xem thêm bài ghép font tiếng Việt: 20 cặp font Google hoặc công cụ Gợi ý ghép font.
Bước 5: chỉnh độ đậm, khoảng cách và kiểu chữ
Nút Tuỳ chỉnh mở sáu điều khiển (tab Cỡ chữ luôn giữ 11 cỡ cố định, nên thanh Cỡ chữ chỉ thấy rõ ở tab Đoạn văn):
| Điều khiển | Khoảng giá trị | Mặc định |
|---|---|---|
| Cỡ chữ | 12–160 px | 48 px |
| Độ đậm | 100–900, mỗi nấc 100 | 400 |
| Khoảng cách dòng | 0,8–2,4 | 1,3 |
| Khoảng cách chữ | −0,1 đến 0,4 em | 0 |
| Nghiêng | bật / tắt | tắt |
| Viết hoa | bật / tắt | tắt |
Lưu ý khi kéo Độ đậm: font chỉ có một độ đậm (như file Pacifico chúng tôi tải lên) sẽ được trình duyệt làm đậm giả, nét không đẹp bằng bản Bold thật. Nếu sản phẩm cần chữ đậm, hãy thử đúng file Bold của font đó.
Gõ chữ mẫu, tăng độ đậm, thử kiểu nghiêng. Ảnh chụp màn hình: ColorME.
Tab Đoạn văn với font viết tay: tiêu đề ổn, đoạn văn dài thì khó đọc. Ảnh chụp màn hình: ColorME.
So sánh font và nhờ người khác chọn giúp
Ở tab So sánh, ba font đầu danh sách được gắn chữ A, B, C và có nút Chọn; bấm vào thì nút đổi thành "Mình chọn". Font thứ tư trở đi vẫn hiện để bạn so, nhưng không có chữ cái. Khi có từ hai font, bên dưới hiện hai nút:
- Tải thẻ so sánh (4:5): tải một ảnh PNG 1080×1350 px (thẻ của chúng tôi nặng 132 KB) có câu của bạn viết bằng tối đa ba font đầu, kèm nhãn "Mình chọn" nếu bạn đã chọn. Đó là ảnh ở đầu bài.
- Nhờ bạn bè chọn: tạo một liên kết so sánh. Trong lần thử của chúng tôi (đã tắt bảng chia sẻ của trình duyệt), liên kết được chép vào bộ nhớ tạm; trên trình duyệt có bảng chia sẻ, nút này có thể mở bảng đó, phần này chúng tôi chưa thử.
Bốn font cạnh nhau, đã chọn B. Ảnh chụp màn hình: ColorME.
Người mở liên kết thấy hộp "Một người bạn nhờ bạn chọn: Font nào hợp nhất?" với đúng câu của bạn bằng từng font. Họ bấm một dòng thì trang trả lời, ví dụ "Bạn chọn C. Người gửi chọn B." hoặc "Bạn chọn B. Người gửi cũng chọn B.". Hai điều cần biết:
- Liên kết chỉ mang theo tên font Google. Chúng tôi thử với ba font Google; chưa thử liên kết khi trong ba font đầu có font tải lên.
- Trang không báo ngược lại cho bạn người kia chọn gì. Hãy nhờ họ nhắn lại chữ cái.
Phía người nhận sau khi bấm chọn. Ảnh chụp màn hình: ColorME.
Thử font trên điện thoại
Ở bề ngang 390 px, trang không cuộn ngang; bốn tab, ô thêm font Google, tab So sánh và nút tải thẻ đều chạy (thẻ tải về vẫn 1080×1350 px). Chúng tôi thử bằng chế độ giả lập điện thoại trên máy tính và không thử tải file font từ điện thoại; trang công cụ ghi rằng việc này "tuỳ trình duyệt hỗ trợ".
Tab So sánh ở bề ngang 390 px. Ảnh chụp màn hình: ColorME.
Những gì chúng tôi chưa thử
- File OTF, WOFF, WOFF2 và tải nhiều file một lần: chỉ thử một file TTF.
- Thả file font vào trang thay vì bấm nút.
- Nút Nhờ bạn bè chọn trên trình duyệt có bảng chia sẻ, và trên điện thoại thật.
- Tải lại trang để xem danh sách font có còn không. Trang không có nút lưu, nên hãy coi mỗi lần mở là một lần thử mới.
- Mọi lần thử đều làm khi chưa đăng nhập.
Chọn được font rồi thì làm gì tiếp?
Font Google thì lấy từ Google Fonts để cài hoặc nhúng vào web. Font riêng dùng cho website nên đổi sang WOFF2 cho nhẹ bằng công cụ Chuyển đổi font. Trước khi mua hoặc dùng một font cho dự án tiếng Việt, kiểm tra đủ dấu bằng Kiểm tra font tiếng Việt.
Câu hỏi thường gặp
Có cần cài font vào máy để xem trước không?
Không. Trang công cụ viết: "Font được đọc trực tiếp trên trình duyệt, bạn xem và so sánh ngay." File Pacifico trong bài chưa hề được cài vào máy thử.
Thử font online ở đây có miễn phí không?
Trang công cụ trả lời: "Có, miễn phí và không cần đăng nhập." Toàn bộ các bước trong bài được làm khi chưa đăng nhập.
Font của tôi có bị lưu lên máy chủ không?
Trang công cụ trả lời: "Không. File font chỉ nằm trên máy bạn, không tải lên máy chủ." Font Google thì được trình duyệt tải về từ máy chủ Google Fonts.
Công cụ hỗ trợ định dạng font nào?
Theo trang công cụ: TTF, OTF, WOFF và WOFF2, cùng mọi font trên Google Fonts bằng cách gõ tên. Chúng tôi đã thử một file TTF và bốn font Google (Be Vietnam Pro, Playfair Display, Lora, Bebas Neue).
Vì sao nên thử font ở nhiều cỡ chữ?
Trang công cụ giải thích: "Một font đẹp ở cỡ tiêu đề có thể khó đọc ở cỡ nhỏ. Xem nhiều cỡ giúp bạn chọn font phù hợp cho cả tiêu đề và nội dung." Ảnh tab Đoạn văn với font viết tay ở trên là một ví dụ.
