Font catalogue / web pick list
Mỗi card có tên font ở trên, bên dưới là câu preview normal, bold, mô tả và test nhiều độ đậm.
Bấm Copy CSS để lấy nhanh dòng font-family.
body / mô tả
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Sans mềm, dễ đọc tiếng Việt; hợp mô tả, UI text.
heading
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Heading chắc, hiện đại, có lực.
mô tả / body
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Bo tròn, thân thiện; hợp dòng mô tả hoặc brand nhẹ nhàng.
heading / UI
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Sạch, phổ biến, hợp web hiện đại.
body / UI
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Rõ ràng, trung tính, đọc tốt ở kích thước nhỏ.
body / UI cao cấp
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Gọn, sang, hợp landing page và SaaS.
body / mô tả
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Nhẹ, sạch, hợp paragraph và card text.
heading / tech
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Hơi condensed, cảm giác thể thao/tech.
body / heading
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Hiện đại, cân bằng, hợp website startup.
body / editorial
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Chắc chữ, nghiêm túc, hợp nội dung dài.
heading
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Display sans rõ, sáng, hợp tiêu đề web.
mô tả
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Có cá tính nhẹ, hợp mô tả ngắn và caption.
body / mô tả
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Gọn và mềm, hợp giao diện thân thiện.
body nhẹ
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Rộng thoáng, tối giản; hợp chữ ngắn.
body / display
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Sans hiện đại; nếu trình duyệt không tải được sẽ fallback.
mô tả cá tính
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Bo mềm, vui mắt, hợp brand nhẹ nhàng.
body / serif-like sans
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Thanh mảnh, có chất editorial.
heading / display
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Cao, hẹp, hợp heading lớn.
UI / thử nghiệm
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Có thể không public qua Google Fonts; dùng để test fallback nếu máy có font.
header
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Small-caps, hợp header/phân mục có chất cổ điển.
heading / body
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Grotesk sạch, hiện đại, cân được nhiều layout.
UI / display
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Đa dạng weight, hợp tiêu đề và hệ thống UI.
heading cá tính
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Rộng/hẹp linh hoạt, hợp brand độc đáo.
heading expanded
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Dùng để test chữ rộng; nếu không có family riêng sẽ fallback.
heading / cân bold
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Đậm, gọn, rất hợp hero heading.
body / cân bold
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Sans mới, hiện đại; test đủ weight bên dưới.
chữ nghiêng / serif
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Serif có nét Đông Nam Á, hợp quote hoặc mô tả sang.
chữ nghiêng / display serif
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Thanh, sang, hợp tiêu đề nghệ thuật.
chữ nghiêng / cổ điển
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Roman cổ, hợp nhãn/brand vintage.
heading
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Small caps serif, sang và cổ điển.
heading
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Display serif/sans lai, cá tính, hợp tiêu đề.
body / UI
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Trung tính, đọc tốt, hợp hệ thống web.
serif / editorial
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Cổ điển, đẹp cho đoạn mô tả sang hoặc bài viết.
UI / variable
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Rất linh hoạt, hợp hệ thống UI cần nhiều biến thể.
body dễ đọc
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Dễ đọc, rõ chữ, hợp nội dung dài.
serif / mô tả
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Serif hiện đại, hợp editorial và luxury.
body / clean
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Một nét, sạch, hợp UI tối giản.
body / UI
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Sans trung tính, nhiều weight, đọc tốt.
display serif
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Sang, cao cấp, hợp hero heading.
UI / body
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Hình học, hiện đại, hợp dashboard/web app.
serif / học thuật
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Serif nghiêm túc, hợp văn bản, quote, bài viết.
heading serif
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Small-caps luxury, hợp tiêu đề lớn.
UI / heading
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Grotesk hiện đại, hợp sản phẩm số.
body / rounded
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Mềm, tròn, hợp giao diện thân thiện.
serif / mô tả
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Serif nhiều nét, hợp nội dung có chất văn hóa.
display / playful
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Vui, nổi bật, hợp tiêu đề ngắn.
body nhẹ
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Mềm, sạch, hợp mô tả ngắn.
heading / UI
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Hẹp vừa, hợp menu, card title, dashboard.
body / heading
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Sans hiện đại; dùng bản thường nếu không có Expanded.
body / accessible
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Thân thiện, dễ đọc, hợp nội dung phổ thông.
UI / tech
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Tech, hiện đại, hợp sản phẩm developer.
body / cổ điển
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Sans có chất sách, hợp nội dung nghiêm túc.
body / mềm
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Nhẹ, mềm, hợp brand ấm áp.
body / đa ngôn ngữ
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Rõ chữ, hợp text đa ngôn ngữ; test tiếng Việt.
body / clean
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Tròn nhẹ, rõ ràng, hợp UI thân thiện.
body / minimal
Normal / 400
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Bold / 700
Tiếng Việt: Đừng để lựa chọn font làm chậm website của mày.
Mô tả
Mô tả: dòng chữ này dùng để so sánh cảm giác đọc, độ dày, khoảng cách và độ mềm của font.
Tối giản, sạch, hợp web portfolio.
Italic test: nét nghiêng / serif / display — Sài Gòn, Hà Nội, Đà Nẵng.
Italic test: nét nghiêng / serif / display — Sài Gòn, Hà Nội, Đà Nẵng.
Italic test: nét nghiêng / serif / display — Sài Gòn, Hà Nội, Đà Nẵng.
Comfortaa mô tả: mềm, dễ nhìn, hợp brand thân thiện.
Sarabun body: rõ tiếng Việt, đọc lâu không mệt.
Public Sans mô tả: cân bằng giữa cổ điển và hiện đại.