Ghép font tiếng Việt đẹp: 20 cặp font Google dùng được ngay
Mục lục
20 cặp font Google đủ dấu tiếng Việt để ghép tiêu đề và nội dung, kèm ảnh xem thử từng cặp bằng một câu tiếng Việt nhiều dấu, kết quả kiểm tra dấu của từng font, và cách dùng công cụ Gợi ý ghép font của ColorME để tìm font đi cùng một font bạn đã chọn, lọc theo phong cách và sao chép CSS.
Trả lời nhanh: cách ghép font an toàn nhất là chọn một font tiêu đề có cá tính và một font nội dung dễ đọc, khác nhau rõ về kiểu dáng nhưng cùng tinh thần, và chỉ dùng 2 font trong một thiết kế. Nếu chưa biết bắt đầu từ đâu, mở công cụ Gợi ý ghép font của ColorME: có sẵn 20 cặp font Google chọn tay, đều đủ dấu tiếng Việt, gõ tiêu đề của bạn vào là xem thử được ngay, bấm Sao chép CSS để dùng cho web. Theo trang công cụ, công cụ miễn phí và không cần tài khoản; mọi phép thử trong bài làm khi chưa đăng nhập.
Xem nhanh: gõ tiêu đề của bạn rồi bấm mũi tên để duyệt từng cặp font. Ảnh chụp màn hình: ColorME.
Bài này liệt kê đủ 20 cặp kèm ảnh xem thử bằng một câu tiếng Việt nhiều dấu, kết quả kiểm tra dấu của từng font, và cách dùng công cụ để tìm cặp cho một font bạn đã chọn sẵn. Phần nguyên tắc kết hợp font nói kỹ hơn ở bài 8 gợi ý khi kết hợp font chữ.
Ghép font tiếng Việt khó ở đâu?
Hai chỗ. Một là dấu: nhiều font đẹp chỉ có bộ chữ Latin cơ bản, gõ "Sữa", "ngọt", "mỗi" là lỗi dấu hoặc nhảy sang font khác. Hai là sự ăn ý: hai font quá giống nhau trông như lỗi, hai font quá chọi nhau thì rối.
Nguyên tắc mà trang công cụ dùng để gợi ý, cũng là nguyên tắc quen thuộc trong typography:
- Tiêu đề viết tay, trang trí hoặc có chân (serif) đi với nội dung không chân (sans-serif) dễ đọc.
- Tiêu đề không chân đi với nội dung có chân.
- Font cùng họ được ưu tiên ghép với nhau.
- Thường chỉ nên dùng 2 font trong một thiết kế.
Video quay màn hình (25 giây, không tiếng): gõ tiêu đề, duyệt vài cặp, lọc nhóm Có chân, tìm các cặp đi với Pacifico, sao chép CSS và xem lưới các cặp. Ảnh chụp màn hình: ColorME.
20 cặp font Google đủ dấu tiếng Việt
Đây là 20 cặp chọn sẵn trong công cụ, theo đúng thứ tự công cụ hiển thị. Cột "Hợp với" là gợi ý của công cụ.
| # | Font tiêu đề | Font nội dung | Phong cách | Hợp với |
|---|---|---|---|---|
| 1 | Playfair Display | Be Vietnam Pro | Thanh lịch | Thương hiệu cao cấp, nhà hàng, portfolio |
| 2 | Montserrat | Lora | Hiện đại | Blog, landing page, báo cáo |
| 3 | Space Grotesk | Inter | Công nghệ | Startup, app, dashboard |
| 4 | Fraunces | Manrope | Sáng tạo | Studio, agency, sách |
| 5 | Bricolage Grotesque | Work Sans | Trẻ trung | Sự kiện, mạng xã hội, F&B |
| 6 | Cormorant Garamond | Nunito Sans | Thanh lịch | Mỹ phẩm, spa, thời trang |
| 7 | Oswald | Source Sans 3 | Mạnh mẽ | Poster, thể thao, tin tức |
| 8 | Lexend | Literata | Dễ đọc | Giáo dục, tài liệu dài |
| 9 | Unbounded | Plus Jakarta Sans | Nổi bật | Web3, âm nhạc, sự kiện |
| 10 | EB Garamond | IBM Plex Sans | Cổ điển | Học thuật, luật, xuất bản |
| 11 | Anton | Roboto | Mạnh mẽ | Thể thao, khuyến mãi, banner |
| 12 | Yeseva One | Josefin Sans | Thanh lịch | Thời trang, trang sức |
| 13 | Prata | Mulish | Cổ điển | Tạp chí, nội thất |
| 14 | Quicksand | Nunito | Thân thiện | Trẻ em, giáo dục, thú cưng |
| 15 | Bungee | Barlow | Vui nhộn | Game, đồ ăn vặt, sticker |
| 16 | Great Vibes | Raleway | Thanh lịch | Thiệp cưới, lời mời |
| 17 | Chakra Petch | Exo 2 | Công nghệ | Gaming, esports, phần cứng |
| 18 | Roboto Slab | Open Sans | Dễ đọc | Tin tức, blog, tài liệu |
| 19 | Archivo | Spectral | Hiện đại | Biên tập, portfolio, CV |
| 20 | JetBrains Mono | Inter Tight | Công nghệ | Lập trình, sản phẩm số |
Chúng tôi kiểm tra dấu tiếng Việt thế nào?
Với từng cặp, chúng tôi làm hai phép kiểm tra ngày 13/10/2026:
- Trên Google Fonts: tải đúng đường dẫn CSS mà công cụ tạo ra cho 20 cặp. Cả 40 lượt font đều có khối ký tự
vietnameseở các độ đậm được dùng. - Trên trình duyệt: cho mỗi font vẽ một chuỗi gồm toàn bộ nguyên âm có dấu, cả chữ thường và chữ hoa (ă, â, ê, ô, ơ, ư, đ cùng năm dấu thanh). Cả 40 lượt đều được vẽ trọn bằng chính font đó, không ký tự nào rơi sang font dự phòng.
Lưu ý nhỏ: bảy font tiêu đề trong danh sách không dùng độ đậm 700. Oswald dùng 600, Archivo dùng 800, còn Anton, Yeseva One, Prata, Bungee và Great Vibes chỉ có một độ đậm 400. Công cụ đã đặt sẵn đúng độ đậm cho từng cặp.
Cặp 1 đến 4: thanh lịch, hiện đại, công nghệ, sáng tạo
Từ trái sang, trên xuống: Playfair Display + Be Vietnam Pro, Montserrat + Lora, Space Grotesk + Inter, Fraunces + Manrope. Ảnh chụp màn hình: ColorME.
Playfair Display có nét thanh nét đậm tương phản mạnh, hợp tiêu đề sang trọng; Be Vietnam Pro là font không chân thiết kế cho tiếng Việt nên đoạn văn đọc rất êm. Montserrat + Lora là kiểu ngược lại: tiêu đề không chân, nội dung có chân, hợp bài viết dài.
Cặp 5 đến 8: trẻ trung, thanh lịch, mạnh mẽ, dễ đọc
Bricolage Grotesque + Work Sans, Cormorant Garamond + Nunito Sans, Oswald + Source Sans 3, Lexend + Literata. Ảnh chụp màn hình: ColorME.
Oswald hẹp và cao, cùng một dòng chứa được nhiều chữ hơn, nên hợp poster và tiêu đề tin tức. Cormorant Garamond nét rất mảnh: đẹp ở cỡ lớn, đừng dùng cho chữ nhỏ.
Cặp 9 đến 12: nổi bật, cổ điển, mạnh mẽ, thanh lịch
Unbounded + Plus Jakarta Sans, EB Garamond + IBM Plex Sans, Anton + Roboto, Yeseva One + Josefin Sans. Ảnh chụp màn hình: ColorME.
Unbounded rất rộng: cùng câu thử, hai dòng tiêu đề gần chạm hết chiều ngang, nên chỉ hợp tiêu đề ngắn. Anton thì ngược lại, đậm và hẹp, hợp banner khuyến mãi.
Cặp 13 đến 16: cổ điển, thân thiện, vui nhộn, thiệp mời
Prata + Mulish, Quicksand + Nunito, Bungee + Barlow, Great Vibes + Raleway. Ảnh chụp màn hình: ColorME.
Great Vibes là chữ viết tay nét mảnh, dấu tiếng Việt vẫn đủ nhưng khá nhỏ; hãy dùng cho tên riêng hoặc một dòng ngắn trên thiệp, không dùng cho cả câu dài. Bungee chỉ có chữ hoa, hợp sticker và tiêu đề vui.
Cặp 17 đến 20: công nghệ, dễ đọc, hiện đại, lập trình
Chakra Petch + Exo 2, Roboto Slab + Open Sans, Archivo + Spectral, JetBrains Mono + Inter Tight. Ảnh chụp màn hình: ColorME.
Roboto Slab + Open Sans là cặp "an toàn" cho tài liệu và blog. JetBrains Mono là font đơn cách (monospace), mỗi ký tự rộng bằng nhau, tạo cảm giác kỹ thuật.
Cách dùng công cụ để chọn cặp font cho thiết kế của bạn
Bước 1: gõ tiêu đề thật của bạn
Đừng chọn font bằng câu mẫu. Gõ đúng tiêu đề bạn sẽ dùng vào ô Gõ tiêu đề của bạn để xem thử (tối đa 80 ký tự): chữ lớn và mọi thẻ trong lưới bên dưới đổi theo. Bạn cũng có thể bấm thẳng vào chữ lớn hoặc đoạn văn để sửa tại chỗ.
Giao diện công cụ: phía trên là ô gõ tiêu đề và ô tìm font, giữa là cặp font đang xem, dưới là tên hai font và gợi ý nơi dùng. Ảnh chụp màn hình: ColorME.
Bước 2: duyệt và lọc
Bấm hai mũi tên cạnh số thứ tự (hoặc phím mũi tên trái, phải trên bàn phím) để xem lần lượt; bấm Ngẫu nhiên để nhảy sang một cặp bất kỳ. Hàng nút lọc có hai nhóm:
- Theo kiểu font tiêu đề: Không chân, Có chân, Viết tay, Trang trí, Monospace.
- Theo phong cách của 20 cặp chọn tay: Thanh lịch, Hiện đại, Công nghệ, Sáng tạo, Trẻ trung, Mạnh mẽ, Dễ đọc, Nổi bật, Cổ điển, Thân thiện, Vui nhộn.
Lọc theo Viết tay, theo Thanh lịch, rồi bấm Ngẫu nhiên. Ảnh chụp màn hình: ColorME.
Lúc chúng tôi thử, công cụ ghi tổng cộng 518 cặp trên 498 font đủ dấu: 20 cặp chọn tay ở trên, phần còn lại do công cụ ghép theo các nguyên tắc đã nêu. Trang công cụ nói rõ đó là "gợi ý theo quy tắc, hãy xem trước với chữ của bạn rồi quyết định". Số cặp theo từng nút lọc trong phép thử: Có chân 81, Viết tay 97, Monospace 21, Thanh lịch 4, Mạnh mẽ 2.
Lọc "Viết tay": 97 cặp, cặp đầu là Pacifico + Plus Jakarta Sans. Ảnh chụp màn hình: ColorME.
Bước 3: đã có một font, tìm font đi cùng
Đây là phần hữu ích nhất khi bạn đã chốt font cho logo hoặc tiêu đề. Gõ tên font vào ô Tìm font để ghép, chọn font trong danh sách. Hai phép thử:
- Pacifico (viết tay): công cụ đưa ra 8 cặp, Pacifico làm tiêu đề, đi với Plus Jakarta Sans, IBM Plex Sans, Noto Sans, Public Sans, Barlow, Fira Sans, Libre Franklin, Archivo.
- Be Vietnam Pro (không chân, đọc tốt): 15 cặp. Ngoài cặp chọn tay Playfair Display + Be Vietnam Pro, có 8 cặp dùng Be Vietnam Pro làm tiêu đề với nội dung có chân (Bona Nova, Lora, Merriweather, Noto Serif, Bitter, Alegreya, Spectral, Newsreader) và 6 cặp dùng nó làm nội dung dưới một tiêu đề viết tay hoặc trang trí.
Tìm Pacifico, xem các cặp, sao chép CSS. Ảnh chụp màn hình: ColorME.
"8 cặp với Pacifico". Bấm dấu ✕ trên nút Pacifico để bỏ chọn. Ảnh chụp màn hình: ColorME.
Gõ một font không có trong thư viện, ví dụ Helvetica, công cụ báo "Không có font này trong thư viện font tiếng Việt." Công cụ chỉ làm việc với font trên Google Fonts có hỗ trợ tiếng Việt.
Lưới bên dưới cho so sánh nhiều cặp cùng lúc với chính tiêu đề của bạn; mỗi thẻ có nút CSS riêng. Ảnh chụp màn hình: ColorME.
Bước 4: lấy font về dùng
Cho website: bấm Sao chép CSS, trang báo "Đã sao chép CSS". Với cặp đầu tiên, nội dung được chép trong phép thử là:
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Be+Vietnam+Pro:wght@400;700&display=swap');
h1, h2, h3 {
font-family: 'Playfair Display', serif;
font-weight: 700;
}
body {
font-family: 'Be Vietnam Pro', sans-serif;
}Một chi tiết cần sửa tay: font dự phòng trong đoạn mã luôn là serif cho tiêu đề và sans-serif cho nội dung, kể cả khi cặp font ngược lại. Ví dụ với cặp Be Vietnam Pro + Bona Nova, mã ghi 'Be Vietnam Pro', serif và 'Bona Nova', sans-serif. Hãy đổi lại cho đúng loại font để trang không bị lệch kiểu chữ trong lúc font đang tải.
Cho Photoshop, Illustrator, Figma: bấm Google Fonts để mở trang chứa cả hai font của cặp đang xem, tải về và cài vào máy. Trang công cụ ghi rằng Figma đã có sẵn Google Fonts nên chỉ cần chọn tên font. Chúng tôi chưa thử bước cài font và chưa mở các phần mềm này trong bài.
Tên hai font ở dòng Tiêu đề và Nội dung là liên kết sang trang chi tiết của từng font trong thư viện font tiếng Việt của ColorME.
Sau khi chọn cặp font: 4 việc nên làm
- Đặt thang cỡ chữ. Hai font đẹp vẫn rối nếu cỡ chữ lộn xộn. Xem bài tạo thang cỡ chữ (type scale).
- Thử với đoạn văn thật, có nhiều dấu. Chú ý các chữ hai tầng dấu như "ễ", "ỗ", "ặ" và khoảng cách dòng (leading): tiếng Việt cần dòng thoáng hơn tiếng Anh để dấu không chạm dòng trên.
- Kiểm tra font nghi ngờ lỗi dấu bằng công cụ kiểm tra font tiếng Việt.
- Giữ đúng vai. Font tiêu đề chỉ dùng cho tiêu đề; đừng lấy font viết tay hay font trang trí để dàn đoạn văn dài.
Xem trên điện thoại
Ở màn hình rộng 390 px (chế độ giả lập), công cụ xếp thành một cột và không có thanh cuộn ngang của cả trang; hàng nút lọc nằm trên một dòng, phần còn lại khuất bên phải. Chúng tôi chưa thử trên điện thoại thật.
Màn hình 390 px: cặp font đang xem. Ảnh chụp màn hình: ColorME.
Giới hạn của công cụ
- Chỉ có font trên Google Fonts có tiếng Việt. Font thương mại, font Việt hoá riêng lẻ không có trong thư viện.
- Ngoài 20 cặp chọn tay, các cặp còn lại là ghép theo quy tắc, chưa có người duyệt từng cặp. Hãy tự nhìn bằng mắt.
- Không chỉnh được cỡ chữ, khoảng cách dòng hay màu trong phần xem thử.
- Không tải font trực tiếp từ công cụ; bạn tải ở Google Fonts.
- Không lưu danh sách cặp yêu thích.
Câu hỏi thường gặp
Font trên Google Fonts có dùng cho mục đích thương mại được không?
Trang công cụ ghi: "Font trên Google Fonts dùng giấy phép mã nguồn mở, miễn phí cho cả dự án cá nhân và thương mại." Bạn có thể đọc thêm ở trang hỏi đáp của Google Fonts; mỗi font có ghi giấy phép riêng trên trang của nó.
Một thiết kế nên dùng mấy font?
Thường là 2: một cho tiêu đề, một cho nội dung. Cần thêm cấp bậc thì đổi độ đậm, cỡ chữ hoặc màu của chính hai font đó thay vì thêm font thứ ba.
Dùng một font cho cả tiêu đề và nội dung có được không?
Được, nếu font đó có nhiều độ đậm. Dùng bản đậm 700 cho tiêu đề và bản 400 cho nội dung là cách ghép an toàn nhất. Trong danh sách trên, Be Vietnam Pro, Inter, Montserrat đều làm được việc này.
Vì sao font đẹp trên web nhưng bị lỗi dấu khi đưa vào Photoshop?
Trang công cụ giải thích: thường do font không hỗ trợ tiếng Việt hoặc bạn cài bản thiếu ký tự; hãy tải đúng bản trên Google Fonts. Chúng tôi chưa tái hiện lỗi này trong bài.
Muốn biết một chữ trong ảnh dùng font gì thì làm sao?
Đó là việc của công cụ khác. Trang công cụ gợi ý dùng Tìm font từ ảnh của ColorME; công cụ đó cần đăng nhập. Sau khi biết tên font, quay lại đây để tìm font đi cùng.
Thử nghiệm ngày 13/10/2026 trên Chrome máy Mac, chưa đăng nhập, cửa sổ 1280 × 880 px và giả lập màn hình 390 px. Đã thử: xem cả 20 cặp chọn tay với cùng một câu tiếng Việt, kiểm tra dấu của 40 lượt font, các nút lọc, tìm font, duyệt bằng nút và phím mũi tên, Ngẫu nhiên, Sao chép CSS. Chưa thử: tải và cài font, dùng font trong Photoshop, Illustrator, Figma, dán CSS vào một website thật, điện thoại thật, Safari, Firefox. Thuật ngữ trong bài: typography, serif, sans-serif, kerning.
