Có lẽ thời của việc thiết kế web chỉ có thể dùng những font như Arial, Times New Roman, Verdana, hoặc Tahoma sắp trở thành lịch sử. Hoặc những người sử dụng chúng cảm thấy chúng vẫn thích hợp.

• Top 10 công cụ quản lý phông chữ trên Web
• Những cách kết hợp kiểu chữ tốt nhất
• 30 font miễn phí chất lượng cao

Trong năm 2010 chúng ta đã thấy một cuộc cách mạng về các phông chữ trên web. Mặc dùng phông cho internet (@font-face) được giới thiệu trong CSS2 năm 1998.

Nó vẫn sẽ được sử dụng cho đến năm ngoái khi người sử dụng web được hỗ trợ bởi các trình duyệt. Đến năm nay chúng ta thấy một làn sóng của những dịch vụ web font được tung ra, và nó chắc chắn sẽ ảnh hưởng sâu xắc tới Web Typography.

Các dịch vụ Web font (web font services) như Typekit và giờ là Google Font API, đã nhận được rất nhiều sự chú ý. Nhưng trong 3 tháng vừa qua đã có một sự bùng nổ các nhà cung cấp dịch vụ mới như Fonts Live, Fontdeck, Webtype và những cái tên liên quan tới “Font” hay “Type”.

Trong khi tất cả những dịch vụ đều độc đáo, họ cung cấp những công cụ để web designer và lập trình web hiển thị những phông chữ độc đáo trên website. Những giơí thiệu dưới đây chỉ ra 10 nhà cung cấp dịch vụ phông trên web.

Chúng tôi hy vọng những so sánh sẽ giúp bạn quyết định những dịch vụ để bạn sử dụng, gia nhập vào thế giới phức tạp của những phông chữ trên web.

Typekit

Typekit, Inc là một dịch vụ font web phổ biến đến từ Font Batch Inc và nhà sáng lập Jeffrey Veen.Typekit là một trong những dịch vụ đầu tiên của xu hướng này và hiện đang là nhà cung cấp được sử dụng rộng rãi nhất trên thị trường.

Lưạ chọn Font

4000 (khoảng một nửa trong số này thông qua thư viện Typekit, và một nửa khác thông qua các thỏa thuận cấp phép với những người bán có quyền sở hữu phông chữ)

Lợi thế với các dịch vụ khác.

Nền tảng tích hợp mạnh mẽ. Typekit là một dịch vụ có quy mô, với 80 triệu ngươì dùng mỗi tháng.

Ưu điểm

Cực kỳ dễ dàng thiết lập dành cho designer và lập trình web, nó cho phép tích hợp trong vài phút. Tích hợp với Google Font API và nền tảng Blog bao gồm cả WordPress, Posterous và Typepad.

Các thư viện font chữ đầy đủ, có sẵn, với những mức giá tốt. Cho phép khách hàng thử các phông chữ khác nhau trên một trang web cũng như sử dụng phông chữ khác nhau trên nhiều dự án.

Bây giờ nó đã cung cấp Adobe Fonts, khách hàng hay các doanh nghiệp có thể tự chủ bằng cách sử dụng CDN riêng của họ. Dịch vụ này cho phép bạn lưu chữ phông chữ tùy chỉnh. Các kế hoạch đơn giản thì miễn phí và không có thời hạn.

Nhược điểm

Thực hiện yêu cầu JavaScript (mặc dù trên blog của Typekit có đưa ra một số các lý do họ đưa JavaScript để thực hiện, và lợi thế của nó).Không có font chữ dùng trên desktop.

Giá cả

Được dùng thử miễn phí 2 phông trên 1 website. Bắt đầu trả từ 24.99 $/năm (2 site, 5 phông chữ trên web).

Kinh nghiệm của chúng tôi với Typekit

Thiết lập Typekit khá đơn giản. Bạn chỉ cần chọn tên miền bạn muốn sử dụng (trang web thử nghiệm miễn phí, gồm tên miền và 2 phông chữ).Sau đó xây dựng Kit của bạn bằng cách thêm vào phông chữ.

Một chút JavaScript chèn vào phần Header trong thông tin CSS.

Cũng như mọi dịch vụ font web, sẽ có chút chậm chễ khi các font tích hợp được hiện lên, nhưng hầu như không đáng kể. Typekit của phông chữ được nạp thông qua JavaScritp, Typekit cung cấp công cụ kiểm soát quá trình tải (load), do đó sự chậm chễ không phải là vấn đề đáng chú ý với người dùng.

Webtype

Webtype là một sáng tạo mới đây của The Font Bureau , Ascender , DevBridge và chuyên gia phông chữ Roger Black và Petr Van Blockland. Webtype là sự chất lượng và sự tự hào về “Chất lượng phông chữ trực tuyến cao nhất, bao gồm cả kiểu chữ được thiết kế từ đầu để đặc biệt đọc trên màn hình”.

Số lượng Font

365

Lợi thế với các dịch vụ khác.

Font rất chất lượng

Ưu điểm

Thiết lập nhanh chóng và dễ dàng, giá cả linh hoạt. Khả năng tùy chỉnh phông chữ chủ động. JavaScript-free intergration, có giấy phép sử dụng trên màn hình.

Nhược điểm

Một số font chữ tốn kém hơn các dịch vụ khác.

Giá

Miễn phí 30 ngày dùng thử trên tất cả phông chữ. Phông chữ bắt đầu tốn 10$/năm cho mỗi trang web.

Biểu phí

Phí thuê hàng năm.

Kinh nghiệm của chúng tôi với Webtype.

Webtype được sử dụng và đăng ký dễ dàng. Chỉ cần chọn mua phông chữ (30 ngày dùng thử) sau đó tạo các dự án. Chọn phông chữ bạn muốn sử dụng, và bạn sẽ được cấp một mã Css liên kết cho mỗi phông.Sau đó bạn copy và paste vào tập tin HTML và CSS và sẵn sàng để sử dụng.

Hãy chắc chắn rằng bạn bấm nút “Save” từ trang resource Css cho bạn code, hoặc nó sẽ không hoạt động. Kích thước Resource cũng được đưa lên trang này, nó hữu ích khi bạn ước tính sử dụng băng thông. Thời gian tải phông chữ cũng chậm hơn một chút so với các dịch vụ khác, mà dù các kích thước file font nhỏ.

Fontdeck

Fontdeck là một dịch vụ tương đối mới của Clearleft và OmniTI. Nó được thành lập tháng 3/2009 bởi Jon Tan và Richard Rutter với mong muốn mang tới những phông chữ chất lượng cho nhiều đối tượng. Nó đi vào thử nghiệm cá nhân vào tháng 1/2010 và được mở rộng rãi vào 6/2010

Số lượng Font

600, và kế hoạch tăng gẫp rưỡi trước Giáng sinh.

Lợi thế so với các dịch vụ khác.

Chỉ trả tiền cho phông chữ bạn muốn sử dụng.Không giới hạn băng thông. Không giới hạn thời gian thử nghiệm vơí các loại phông chữ.

Ưu điểm.

Dễ dàng cài đặt. Giá cả phải chăng với các tùy chọn. Pure Css, không yêu cầu JavaScript.

Nhược điểm.

Không có tính năng lưu chữ những chọn lựa. Font không có sẵn cho việc sử dụng trên desktop.

Giá cả:

Một số fonts thì miễn phí, nhưng bắt đầu ít nhất 2,50$ cho mỗi trang web.

Biểu phí

Thuê bao hàng năm (chỉ áp dụng cho các phông đang sử dụng trên web, như đã nói bạn có thể dùng thử vô thời hạn)

Kinh nghiệm của chúng tôi

Fontdeck rất dễ dàng để thiết lập.Nó yêu cầu đưa các manual insertion của Css và trong các stylesheet. (cho phép các nhà thiết kế có thêm tự chủ). Nó cung cấp code cho điêù này ngay lập tức mà không cần các bước khác để thiết lập một kiểu Stylesheet.

Trước khi mua giấy phép 20 người đầu tiên ghé trang web có thể thấy các font hoạt động thế nào.

Tôi đã phát hiện điều này khi tôi thêm thực mục con trên máy chủ để nó hoạt động. Nhưng tất cả các tuỳ chọn và điều khiển được đặt trên một trang duy nhất cho mỗi font, giúp nó dễ dàng cập nhật và cài đặt.

Phông chữ được hiển thị nhanh chóng, tất nhiên cũng như các dịch vụ khác bạn cũng sẽ thấy chậm chễ một chút để thấy font theo ý muốn.

Một tính năng được kèm (bonus) từ Fontdeck là nó sẽ tìm kiếm một font quen thuộc, có sự tương tự nhất định để hiển thị trong trường hợp người duyệt trang sử dụng trình duyệt không hỗ trợ @font-face. Trong khi các dịnh vụ khác thường sử dụng một font mặc định chung là serif hay sans-serif.

Fonts Live

Fonts live là một dịch vụ font web mới từ Ascender Corporation – công ty đứng đằng sau “Droid” cung cấp phông chữ cho nền tảng di động Android của Google, Các fonts family “Segoe” của phông chữ cho Microsoft Windows và Ascender Fonts cho desktop

Fonts live tương tự như Webtype (cả hai được phát triển bởi DevBride), tuy nhiên Fonts Live phục vụ phông chữ riêng cho Ascender và các đối tác của mình.

Số phông để chọn

499

Lơi thế so với dịch vụ khác

Font chất lượng

Ưu điểm

Giá cả linh hoạt, giấy phép sử dụng cho desktop. Có chức năng lưu trữ phông tương tự. Tích hợp với Google Font API, JavaScritp free integration. Giờ đã có thêm font Hallmark

Nhược điểm

Một số phông tốn tiền hơn các dịch vụ webfont khác.

Giá

Miễn phí 30 ngày dùng thử các phông chữ. Bắt đầu 10$/năm cho mỗi trang web.

Biếu phí

Thuê bao hàng năm

Kinh nghiệm của chúng tôi với Fonts live

Thiệt lập Fonts live mất thời gian hơn so với thiết lập một số dịch vụ khác. Bạn có thể bị lẫn lộn khi thiết lập. Tôi đã cố gắng với phông đầu tiên (corsival italic), trang web của tôi đã thất bại và bị lỗi. Nó tạo ra các tập tin trống khi việc này không thành công, có nghĩa tôi phải tự xóa chúng.

Không chắc có phải là do một phông đặc biệt, hay một vấn đề phổ biến hơn. Không thấy đề cập tới nó trong hướng dẫn của web

Tôi đã may mắn hơn với phông thứ hai (romany). Thời gian để tạo Resource tốt. Từ đó bạn phải chèn các slylesheet vào header và sau đó chèn các font family, style, font weight cho bất cứ yếu tố nào bạn muốn thay đổi. Điều tốt ở đây là bạn không gặp vấn đề với các thông báo với các stylesheet ban đầu mà bạn can thiệp.

Một khi nó được chạy thì nó chạy khá nhanh hơn so với Typekit, có thể là do kích thước file nhỏ hơn với các phông được sử dụng.

TypeFront

Type Front là một dịch vụ lưu trữ cho phép bạn tải lên một phông chữ mà bạn sở hữu, miễn là nó có giấy phép sử dụng trên web (hãy đọc các thỏa thuận sử dụng một cách cẩn thận). Một khi bạn thêm các tên miền bạn muốn sử dụng, typefront cung cấp cho bạn đoạn mã để thêm vào trang web của bạn.

Lựa chọn font

Tùy vào bạn

Lợi thế so với dịch vụ khác

Lý tưởng cho các nhà thiết kế và các nhà lập trình, những người hiểu và có thể tự tạo font trên web

Ưu điểm

Rẻ tiền, không bị chậm chễ nhiều khi hiển thị font trên web

Nhược điểm

Bạn phải tự cung cấp font của riêng bạn. Nó cần bạn hiểu rõ về giấy phép sử dụng.

Miễn phí với 1 phông và 500 yêu cầu mỗi ngày. Trả tiền 5$/tháng bao gồm nơi chứ 10 phông và 5000 yêu cầu mỗi ngày. 30 ngày dùng thử tới khi trả tiền

Biểu phí

Thuê bao hàng tháng

Kinh nghiệm của chúng tôi với TypeFront

Một khi bạn đã đăng ký một tài khoản, tải lên các font đơn giản. Chỉ cần chắc chắn là có giấy phép. Từ điểm này cho phép các định dạng bạn muốn sử dụng font (gồm EOT, OpenType, SVG, truetype, và Woff – những font tôi sử dụng) Khi những định dạng được kích hoạt bạn cần add thêm tên miền.

Sau khi kích hoạt các định dạng của bạn, thiết lập dịch vụ mà bạn muốn sử dụng, bạn phải sao chép các @type-face code vào file Css của bạn và thêm phông vào font stack của bạn. Lợi thế lớn của Typefront đã có ở đây là nó hầu như không có sự chậm chễ để hiển thị font đúng.

Fontspring

Fontspring cung cấp phông chữ để tải về cho hosting. Không giống như một dịch vụ, fontspring cung cấp các tập tin fonts tải về và các mẫu code để lưu trữ web fonts của riêng bạn.

Lựa chọn

1.937 family

Lợi thế so với dịch vụ khác

Không tính phí thuê bao định kỳ

Ưu điểm

Lựa chọn nhiều phông chữ, không có lệ phí hoặc hạn chế băng thông. Có sẵn giấy phép dùng trên màn hình.

Nhược điểm

Chất lượng font khác nhau

Giá

Miễn phí hoặc tới vài trăm đô là tùy thuộc vào font family.

Biểu phí 

Trả phí 1 lần

Kinh nghiệm chúng tôi với Fontspring

Bởi vì phải tự lưu trữ những tập tin, nên có một chút khó khăn hơn để cài đặt mọi thứ đúng. Khi bạn mua và tải về 1 font bao gồm một @type-face, giấy phép, gói tải về bào gồm tất cả tập tin bạn cần thực hiện trên web bao gồm cả các định dạng file khác nhau như EOT và WOFF.

Tôi thấy nó dễ dàng hơn, chỉ cần sao chép và dán những thông tin stylesheet vào các trang web hiện có. Khi đã xong bạn cần chắc chắn phông chữ của bạn được nạp cùng thư mục với stylesheet của bạn (hoặc thay đổi thông tin URL trong CSS). Thêm font vào font stack và bạn đã sẵn sàng sử dụng.

Tốc độ font được nạp tương tự như hầu hết các dịch vụ. Lợi thế của việc sử dụng dịch vụ này là bạn có giấy phép vĩnh viễn sử dụng các phông chữ mà không mất khoản phí hàng năm. Không hạn chế băng thông.

Web Fonts từ Fonts.com

Web font từ Fonts.com là một liên doanh mới từ Monotype Image, nhà phân phối font lớn nhất trên web. Fonts.com hiện là sở hữu số lượng font trên web lớn nhất với 7.500 font chữ.

Số lượng font

7.500+

Lợi thế so với các dịch vụ khác

Bộ sưu tầm font đồ sộ

Ưu điểm

Hiện là nơi lựa chọn font lớn nhất trên web. Độc quyền các phông phổ biến như Helvetica, Fruitiger và Univers. Hỗ trợ hơn 40 ngôn ngữ. Sử dụng tên miền không giới hạn.

Download lên đến 50 phông cho desktop/tháng với các gói chuyên nghiệp. Javascript – free integration cho standard và Professtional

Nhược điểm

Giá phông tương đối cao. Giao diện chọn font có vẻ chậm.

Vật giá

Với các mức khác nhau, từ miễn phí cho tới 500$/tháng. Với tài khoản miễn phí, bạn có khả năng sử dụng bất kỳ 2000 phông chữ trên băng thông không giới hạn (25.000 lượt xem). Standard và Pro sẽ cho bạn truy cập vào bất kỳ của hơn 7.500 phông. Giá phụ thuộc vào số lần xem trang

Biểu phí

30 ngày

Kinh nghiệm của chúng tôi với web font từ fonts.com

Dịch vụ này nhìn khá đơn giản. Bạn thiết lập một dự án với các lĩnh vực bạn muốn, sau đó chọn font muốn dùng cho dự án đó. Lựa font hơi chậm chút (có lẽ tới 30s hoặc 1 phút). Nhưng nó có một sự lựa chọn rất lớn và công cụ hiệu quả để sắp xếp và tìm kiếm.

Từ đó bạn phải nhập mỗi CSS selector mà bạn muốn sử dụng trên web và chọn các font sử dụng bằng một menu thả xuống các danh sách phông bạn đã chọn.

Có hai loại JavaScript tùy chọn – một “dễ dàng” và một “cao cấp” một cho phép bạn thêm các font để selector trực tiếp trong stylesheet hơn là chỉ thông qua giao diện. Và cả hai đều không với JavaScript.

Nói chung fonts.com hơi chậm một chút nhưng kết quả cuối cùng nhanh chóng và liền mạch.

Google Fonts

Cuối tháng 3 Google fonts thông bố bước đột phá của Google vào phông chữ trên web. Google cung cấp các dịch vụ miễn phí. Mặc dù lựa chọn hiện tại bị hạn chế vào loại font chữ nhất định, nhưng nó có khả năng tác động đáng kể vào tương lai của font chữ trên web.

Lựa chọn font

60 (bao gồm cả phông chữ quốc tế)

Lợi thế so với các dịch vụ khác

Miễn phí

Ưu điểm

Dễ dàng thực hiện. Tải font nhanh. Google Webfont Loader cho phép bạn sử dụng dịch vụ của họ với các nhà cung cấp font lớn trên web

Nhược điểm

Ít phông để lựa chọn trong thự mục của Google. Không hỗ trợ cho iPhone hoặc iPad (mobile safari). Bây giờ thì đã hỗ trợ cho chúng.

Vật giá

Miễn phí

Biểu phí

Miễn phí

Kinh nghiệm của chúng tôi với Google fonts

Fonts API của google có lẽ là dễ nhất trong các dịch vụ liệt kê ở đây. Chủ yếu vì không cần đăng ký. Bạn chỉ cần duyệt qua các font họ cung cấp, chọn một và lấy Code. Liên kết với các stylesheet tại header của trang web, và thêm font vào font stack trong stylesheet.

Dịch vụ này nhanh, và độ trễ không đáng kể. Nó khá tuyệt với nhược điểm duy nhất là số lượng font hạn chế.

Kernest

Bạn có thể sử dụng Fontue, mã nguồn mở web font của Kernest phục vụ engine. Web font tool chuyền đổi phông thành định dạng phông sử dụng trên web và code mẫu.

Lựa chọn font

2.450

Lợi thế

Hầu hết các phông đều miễn phí

Ưu điểm

Web font mã nguồn mở. Nhiều phông để lựa chọn.

Nhược điểm 

Chỉ sử dụng với self hosting, đòi hỏi thiết lập bổ xung và các kỹ năng kỹ thuật

Vật giá

Miễn phí hoặc 15$

Thu phí

Một lần thu phí

Kinh nghiệm của chúng tôi với Kernest

Kernet có một lựa chọn tuyệt vời của font chữ miễn phí và trả tiền. Phông miễn phí có thể được thiết lập mà không cần đăng ký tài khoản. Chỉ cần tìm font bạn muốn dùng, đảm bảo các điều khoản được chấp nhận cho mục đích sử dụng cá nhân (không phải font nào cũng đồng ý cho việc thương mại), sau đó copy và paste code và link vào file của bạn.

Kernest cũng có một độ trễ như các dịch vụ khác.

Typotheque

Typotheque là một studio thiết kế đồ họa và xưởng font tại Hà lan, dịch vụ web của họ có số lượng font khá nhỏ. Hầu hết là tự thiết kế.

Số lượng phông

37 font family, hỗ trợ nhiều kiểu và ngôn ngữ khác nhau, điều này có nghĩa là có hơn 500 font đơn.

Lợi thế so với các dịch vụ khác

Sử dụng trên các trang web không giới hạn

Ưu điểm

Lựa chọn để mua một font (cho web và desktop) có giấy phép đầy đủ. Hơn 250 ngôn ngữ được hỗ trợ và 5 ngôn ngữ có thể được nhúng. Tất cả các phông chữ được độc quyền và thiết kế bởi typotheque. Cung cấp self-hosting cho các trang web lớn.

Nhược điểm

Hạn chế sự lựa chọn font (vì sự độc quyền của họ) băng thông hàng tháng (500MB cho mỗi font trong một font family)

Biểu phí

Một lần lệ phí (5$ cho mỗi GB khi vượt quá 500MB)

WebINK

WebINK là một nền tảng font web được phát triển bởi Extensis, một công ty phát triển phần mềm tại Portland, Oregon và chuyên quản lý font

Số fonts lựa chọn

2.000

Lợi thế so với các dịch vụ khác

Giá cả phải chăng

Ưu điểm

Giá cả tốt. Lựa chọn phông qua giao diện thông thường hoặc qua một ứng dụng quản lý font trên desktop có tên Vali Fusion 3 (Mac và Windows). Ứng dụng này có 1 chế độ xem trước trang web  khi chạy để thử nghiệm các font khác nhau, và một cái gọi là QuickMatch để thấy những font gần giống với font trên máy của bạn.

Nhược điểm

Giao diện khó hiểu. Mỗi dự án được giới hạn trong 4 trang web.

Giá

Miễn phí 30 ngày dùng thử trên các loại Font. Giá bắt đầu từ 0.99$/tháng (chỉ cho các lựa chọn “promotion” khuyễn mại) 1 G sử dụng và 4 trang web

Phí

Thuê bao hàng tháng

Tóm tắt

Đây là một tóm tắt ngắn của bài viết này.

Tham khảo thêm tại đây

Theo SmashingMagazine