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 

hatchshow1

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 

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

underline.js

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

underline.js

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

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 

fonttowidth

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

fontpair

Đâ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

fontpair

Đâ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

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 

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

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

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

ffallback

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

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

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.

Cùng tác giả

#Tag

typography

iDesign Must-try

Phudu - bộ phông miễn phí lấy cảm hứng từ biển quảng cáo viết tay của người Việt xưa
Phudu - bộ phông miễn phí lấy cảm hứng từ biển quảng cáo viết tay của người Việt xưa
Phudu là một kiểu chữ không chân truyền thống, lấy cảm hứng từ các biển quảng cáo viết tay của người Việt ngày xưa, do Dương Trần (Graphic & Type…
Lạc Tự (phiên bản mới 2023) - Bộ phông lấy cảm hứng từ cảnh quan đô thị Việt những năm 80 - 90
Lạc Tự (phiên bản mới 2023) - Bộ phông lấy cảm hứng từ cảnh quan đô thị Việt những năm 80 - 90
Lạc Tự (Lost Type) 2023 là bộ phông được thiết kế lại từ bộ phông cùng tên, do @trinhmark thực hiện năm 2018. Lạc Tự 2023 vừa được công bố…
International Typographic Style / Phong cách Ký tự pháp Quốc tế (Phần 4)
International Typographic Style / Phong cách Ký tự pháp Quốc tế (Phần 4)
Trong phần cuối cùng của loạt bài về Phong cách Ký tự pháp Quốc tế, chúng ta tiếp tục tìm hiểu thiết kế tại Basel và Zurich với Siegfried Odermatt…
International Typographic Style / Phong cách Ký tự pháp Quốc tế (Phần 3)
International Typographic Style / Phong cách Ký tự pháp Quốc tế (Phần 3)
Phong cách Ký tự pháp Quốc tế tiếp tục phát triển xa hơn nữa ở hai thành phố Basel và Zurich, nằm cách nhau 70 km ở miền bắc Thụy…
International Typographic Style / Phong cách Ký tự pháp Quốc tế (Phần 2)
International Typographic Style / Phong cách Ký tự pháp Quốc tế (Phần 2)
Trong phần thứ hai của loạt bài về trào lưu thiết kế Phong cách Ký tự pháp Quốc tế, chúng ta tìm hiểu những đồ hoạ mang tính khoa học…
International Typographic Style - Phong cách Ký tự pháp quốc tế (Phần 1)
International Typographic Style - Phong cách Ký tự pháp quốc tế (Phần 1)
Trong những năm 1950, một phong trào thiết kế nổi lên từ Thụy Sĩ và Đức và được gọi là Thiết kế kiểu Thụy Sĩ (Swiss Design) hay, đúng hơn…