20 phông chữ lung linh nhất dành cho trang web 

Mục đích của bài viết này là để giúp các bạn chọn lựa phông chữ ưng ý, mang đặc thù riêng và tương thích với nhiều loại thiết bị, trình duyệt và hệ thống khác nhau.

iD_20phongchudanhchoweb_main

Bài viết bởi AWWWARDS TEAM.

Hiện nay, có nhiều phông chữ phá cách trong một trang web. Ở bài viết này, chúng ta sẽ tập trung vào 2 hệ thống ít phức tạp và tiết kiệm chi phí nhất, Google Web Fonts và @font-face rule. 

Bạn đừng lo lắng, chúng ta chưa đụng đến những hệ thống tốn phí khác như TypekitFonts.comFontdeckWebtypeWebINK hoặc Fontspring vì chúng đều có chất lượng cao và cần được cân nhắc.

Bạn nên biết rằng phông chữ cho trang web không thể hiện đầy đủ tính chất của hệ thống vận hành, và trong trường hợp sử dụng Windows XP thì chất lượng hình ảnh không tốt lắm. Đồng thời chúng cũng được trình bày theo nhiều cách khác nhau dựa vào loại trình duyệt. Mục đích của bài viết này là để giúp các bạn chọn lựa phông chữ thiết kế website (trong số hàng trăm phông chữ có sẵn), những phông chữ mang đặc thù riêng và tương thích với nhiều loại thiết bị, trình duyệt và hệ thống khác nhau.

Về cơ bản, có hai hệ thống hỗ trợ cài đặt phông chữ cho trang web:

1. Web font embedding services

2. Embedding fonts using the @font-face rule

Web font embedding services

Google Web Fonts (GWF) hay còn gọi là Typekit là hệ thống hỗ trợ sử dụng phông chữ trên máy chủ của họ. GWF không tốn phí, không yêu cầu có tài khoản và giới hạn truy cập hay quá tải dữ liệu như Typekit. Typekit xác định chi phí sử dụng dịch vụ dựa vào số lần truy cập phông chữ, hoặc lượng truy cập trang web hàng tháng. Một trong những đặc điểm nổi trội của GWF là phiên bản cài đặt trên máy tính để bàn sử dụng trong giai đoạn thiết kế dự án.

Cài đặt

Quy trình cài đặt và sử dụng rất đơn giản:

  1. Chọn một phông chữ. Bạn có lưu hoặc sử dụng tính năng “quick-use” để tạo mã code cho phông chữ đó.
  2. Sao chép và dán mã code vào phần <Head> <head> <link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Tangerine”> </head>
  3. Giờ đây bạn có thể truy cập phông chữ trong mã CSS body { font-family: ‘Tangerine’, serif; font-size: 48px; }

Bạn có thể tham khảo phần extended manual để biết thêm về phong cách, phần subscript và sử dụng phông chữ đa dạng.

Những phông chữ tốt nhất từ Google Web Fonts

Bạn sẽ thấy nhiều nhận xét không tích cực về chất lượng của phông chữ từ GWF và bộ typeface. Chúng ta phải nhớ rằng Google Web Fonts là dự án nguồn mở nhưng nhiều người nghĩ rằng chất lượng nên được kiểm tra gắt gao hơn.

Open Sans

idesign 20phongchulunglinhnhatdanhchotrangweb 02

Josefin Slab

idesign 20phongchulunglinhnhatdanhchotrangweb 03

Arvo

idesign 20phongchulunglinhnhatdanhchotrangweb 04

Lato

idesign 20phongchulunglinhnhatdanhchotrangweb 05

Vollkorn

idesign 20phongchulunglinhnhatdanhchotrangweb 06

Abril Fatface

idesign 20phongchulunglinhnhatdanhchotrangweb 07

Ubuntu

idesign 20phongchulunglinhnhatdanhchotrangweb 08

PT Sans + PT Serif

idesign 20phongchulunglinhnhatdanhchotrangweb 09

Old Standard TT

idesign 20phongchulunglinhnhatdanhchotrangweb 10

Droid Sans

idesign 20phongchulunglinhnhatdanhchotrangweb 11

Embedding fonts sử dụng the @font-face rule

Phông chữ được cài đặt trên hệ thống máy chủ bên ngoài. @font-face là một CSS2 được giới thiệu trong phần mô tả CSS3 và tương thích với hầu hết trình duyệt. Một phông chữ trang web được tùy chỉnh để tương thích với trình duyệt và thường có dạng TTF, WOFF, EOT and SVG. Có nhiều phông chữ trên @font-face embedding, nhưng chúng tôi sẽ mang đến bạn một bộ phông web trên FONT SQUIRREL, chúng rất dễ sử dụng và kèm theo bộ @font-face với định dạng có sẵn, CSS và mã HTML. Font Squirrel cũng tích hợp công cụ “@Font-Face Generator” hay ho giúp bạn chuyển đổi phông chữ máy tính thành những định dạng thích hợp để sử dụng trên trang web.

Quá trình cài đặt phông chữ cho trang web với @font-face rule.

  1. Chọn phông chữ yêu thích từ Font Squirrel.
  2. Tải bộ phông @font-face và chạy thử mã code mẫu trong tập tin stylesheet.css và demo.html. Định dạng của tất cả các phông chữ phải được tải lên máy chủ của bạn. @font-face { font-family: ‘ChunkFiveRegular’; src: url(‘Chunkfive-webfont.eot’); src: url(‘Chunkfive-webfont.eot?#iefix’) format(’embedded-opentype’), url(‘Chunkfive-webfont.woff’) format(‘woff’), url(‘Chunkfive-webfont.ttf’) format(‘truetype’), url(‘Chunkfive-webfont.svg#ChunkFiveRegular’) format(‘svg’); font-weight: normal; font-style: normal; }

Những phông chữ tốt nhất từ Font Squirrel

Anivers

idesign 20phongchulunglinhnhatdanhchotrangweb 12

Junction

idesign 20phongchulunglinhnhatdanhchotrangweb 13

Fertigo

idesign 20phongchulunglinhnhatdanhchotrangweb 14

Aller

idesign 20phongchulunglinhnhatdanhchotrangweb 15

Audimat

idesign 20phongchulunglinhnhatdanhchotrangweb 16

Delicious

idesign 20phongchulunglinhnhatdanhchotrangweb 17

Prociono

idesign 20phongchulunglinhnhatdanhchotrangweb 18

Fontin

idesign 20phongchulunglinhnhatdanhchotrangweb 19

Fontin-Sans

idesign 20phongchulunglinhnhatdanhchotrangweb 20

Chunkfive

idesign 20phongchulunglinhnhatdanhchotrangweb 21

Tác giả: AWWWARDS TEAM
Người dịch: Đáo
Nguồn: Awwwards