15 Frameworks và tools vô cùng hữu dụng để làm Typography

Ngày nay thiết kế web sử dụng rất rất nhiều Typography. Tất nhiên với kỹ thuật hiện thời thì nó gồm cả việc sử dụng những kỹ thuật CSS và web fonts để khiến mọi việc dễ dàng cho bạn.

Bài viết liệt kê ra 15 trang web giúp bạn làm Typography với tư cách là một người thiết kế web. Chúng sẽ giúp bạn tạo ra các trang web sử dụng Typography tiện lợi.

1. HatchShow





Nó giúp bạn sử dụng phông ở kích thước lơn nhằm phủ kín nội dung. Hơn nữa, plugin còn có tác dụng đo chiều rộng và độ dài của các chữ. Cuối cùng là tạo ra những kích thước chữ cho phù hợp với độ dài rộng.

2. TypeRendering





Công cụ này hoạt động tương tự như Modernizr. Ngoại trừ việc nó theo dõi trình duyệt của bạn để tạo ra phông chữ (render). Nó cũng adds thêm các custom classes dựa trên những gì nó thấy.


3. FlowType




Một Plugingiúp thay đổi kích thước chữ dựa trên chiều ngang của nội dung. Nó cũng giúp đặt một số lượng chữ lý tưởng trên từng dòng dựa trên chiều ngang khung hình.


4. UnderlineJS





UnderlineJS là JavaScritpt và nó giúp cho việc tạo những chữ gạch chân (underlined text) đẹp, không bị những điểm nhoè. Bạn cũng có thể so sánh và sự tương phản của bản dùng thử với chuẩn “text-decoration”.


5. GridLover








Lại thêm một công cụ nữa, nhưng là một công cụ tuyệt vời giúp bạn tạo ra một kiểu typography cơ bản cho thiết kế của mình. Công cụ này có line size, margin và height cùng với một giao diện người dùng với một thanh kéo đơn giản. Nó cũng có khả năng tạo ra các SCSS, inLESS & Stylus.

6. Font-To-Width




Một công cụ JavaScript giúp phông chữ nằm vừa vặn chính xác với chiều ngang của khung chứa. Công cụ này sẽ tính ra kích thước phông chữ với spacing theo yêu cầu trong các từ. Font-to-width là công cụ tốt nhất để xác định tiêu đề cho thiết kế của bạn.

7. TypeScale



Đây là một công cụ online giúp bạn tìm ra kích thước phông chữ. Hơn thế, nó đơn giản và có một giao diện người dùng thân thiện để sửa kích thước, co giãn, family.

8. Font Pair




Đây là một trong những thư viện web font phổ biến nhất trong thế giới World Wide Web. Công cụ này chứa rất rất nhiều phông chữ. Nó còn là một lựa chọn của Google Font, nơi để so sách các sự khác biệt giữa mặt chữ, kiểu chữ một cách dễ dàng.

9. Typeplate




Một trong những công cụ lý tưởng cho người thiết kế web dùng để tạo Typography. Nó bao gồm một số lượng lớn những styles có small capital, scaling, colors drop cap, indentation hyphenation code bock, blockquote và nhiều thứ khác.

10. TypeSettings



Một gói CSS tuyệt vời, công cụ này còn dễ dàng truy cập vào Sass & Stylus khi bạn cần cho dự án.

11. Typewolf



Mục tiêu chính của trang web là tạo động lực cho những thiết kế hiện đại. Nó liệt kê những trang web sử dụng typogrphy đẹp và đi kèm những thông tin về kiểu chữ, phông chữ, bản quyền….

12. TypeWonder





Công cụ này giúp bạn kiểm thử các kiểu chữ trên mọi website. Nếu bạn muốn kiểm tra, bạn chỉ việc gõ URL vào Typewonder. Đây là công cụ tốt nhất cho những ai muốn tạo 1 trang với 1 phông chữ, nhưng không chắc về tên phông và những thứ khác.

13. FFFFALLBACK



Công cụ này tạo ra một thứ vô cùng tuyệt diệu cho web designers. Trang này khiến mọi thứ siêu dễ dàng cho web developers để tìm ra những phông chữ dự phòng (fallback fonts). Bạn tới trang web muốn kiểm tra, rồi kéo bookmarklet vào toolbar của trình duyệt đang chạy trang web đó và thưởng thức tính năng của FFFFALLBACK.

14. Fontdeck



Trang này sẽ cho phép bạn xem các phông chữ miễn phí! Bạn sẽ chỉ trả tiền cho kiểu chữ nào bạn muốn mua. Trang web cũng hỗ trợ các chữ quốc tế. Nếu bạn tìm kiếm thứ gì đó dễ nhận ra, nhanh và dễ dàng, thì đây sẽ là công cụ bạn có thể chọn lựa.

Công cụ hiệu quả trên mọi trình duyệt như Opera 10, IE 5, Safari 3, FF 3.5, Chrome, Blackberry và Android.

15. FontFriend




Đây là một công cụ bookmarklet (cách dùng giống như FFFFALLBACK) đáng kinh ngạc cho việc thử nghiệm typo dành cho những người thiết kế web. Nó có khả năng kiểm thử rất nhanh các kiểu chữ. Công cụ này cũng rất dễ sử dụng, và hiệu quả trên mọi trình duyệt.

Nguồn: iDesign.vn​