Kết hợp chữ cho thiết kế luôn là một vấn đề khó khăn khi thiết kế. Cũng giống như việc chọn nhạc cho video, việc chọn font cho thiết kế có thể là một trong những khâu mất nhiều thời gian nhất khi thiết kế. Tuy nhiên, bạn có thể đang cần gấp một vài lựa chọn chữ cho sản phẩm hay website của mình và có thể trễ deadline nếu như không quyết định ngay.
Trong bài viết này, bạn sẽ tìm thấy nhiều công cụ online sẽ bổ sung cho việc kết hợp các kiểu chữ và giúp bạn tham khảo được nhiều mẫu kết hợp đẹp hơn. OK bắt đầu nào!
Những công cụ kết hợp chữ trên web
Những trang web bên dưới đây có sẵn các combo cho bạn lựa chọn. Bạn không cần phải có một font muốn chọn trước để ghép với các font khác.
1. Google font
Google Fonts không chỉ là một dịch vụ để chọn phông chữ tùy chỉnh. Nó cũng là nơi bạn có thể tìm hiểu thêm về kiểu chữ đã chọn của mình, bao gồm các đề xuất về một số kiểu chữ hoạt động tốt với nó.
Khi bạn chọn một kiểu chữ trên Google Fonts, nhấp vào nút Pop out nhỏ ở dưới cùng bên phải của hộp chứa phông chữ.
Tiếp theo, nhấp vào tab Pairing và bạn sẽ thấy các ví dụ về cách lựa chọn của bạn được ghép nối trên web với các kiểu chữ khác.
Mặc dù mình thích web này, nhưng theo quan điểm của mình, nó không nói gì nhiều về bối cảnh mà các cặp chữ được đề xuất sử dụng.
Chẳng hạn, loại trang web nào sử dụng Open Sans và Roboto cùng nhau? Chúng là các trang web thiên nhiều về chữ như các trang web tin tức và blog? Hay chúng là các trang web tập trung vào hình ảnh như một trang web porfolio nhiếp ảnh? Những chỗ nào sử dụng Open Sans và những chỗ nào sử dụng Roboto?
Đây là những thông tin siêu hữu ích khi chọn kết hợp chữ với nhau và để tìm thấy nó, chúng ta phải tìm ở nơi khác.
2. Beautiful Web Type
Beautiful Web Type là sự lựa chọn các kiểu chữ từ Google Fonts.
Các ví dụ này hơi chung chung – chúng không được lấy từ các trang web thực sự với các mục tiêu và chiến lược cụ thể. Trang web chỉ hiển thị các lựa chọn kết hợp chữ được thiết kế đẹp. Lưu ý cách phân cấp văn bản, độ dày font và kiểu, tất cả đóng một phần trong việc làm cho văn bản dễ đọc hơn và truyền đạt đúng ý tưởng.
3. Google Web Fonts Typography Project
Một bộ sưu tập đầy cảm hứng khác về các kết hợp kiểu chữ từ Google Fonts có trên trang web Google Web Fonts Typography Project.
Các thiết kế trên trang web này là hình minh họa đẹp về cách kết hợp chữ và sử dụng của chúng trên web. Mục tiêu chính là giao tiếp, không phải dùng font để trang trí.
4. Typ.io
Typ.io cung cấp cho bạn rất nhiều thông tin về các thiết kế kiểu chữ hợp thời trang và một loạt các trang web cập nhật với các kiểu chữ được kết hợp tốt.
Bạn sẽ không chỉ thấy các kiểu chữ phù hợp, mà bạn cũng sẽ hiểu được vai trò trong thiết kế của các trang web thực – kiểu chữ nào được sử dụng cho các tiêu đề, kiểu nào cho đoạn văn, loại trang web dùng font chữ đó, ví dụ: porfolio, blog, marketing, vv
Bạn có thể tìm kiếm các trang web theo ngành, kiểu chữ và dịch vụ font chữ.
Cuối cùng, nhấp vào hình ảnh với sự kết hợp kiểu chữ yêu thích của bạn, bạn sẽ nhận được mã CSS và các liên kết đến các trang web bạn có thể mua hoặc tải xuống các font chữ này.
5. Fonts In Use
Fonts in Use là một tài nguyên phổ biến khác cung cấp một bộ sưu tập các kiểu chữ hoạt động tốt với nhau, được lấy từ các trang web thực.
Chức năng tìm kiếm ấn tượng của nó cho phép bạn duyệt kho lưu trữ kiểu chữ bằng:
- các thể loại (category)
- định dạng
- kiểu chữ
Những công cụ kết hợp chữ có định hướng
Để sử dụng những trang web bên dưới, bạn cần bỏ vào những định hướng trong phần tìm kiếm của mỗi trang web để có thể chọn được font chữ phù hợp
1. Typespiration
Cái hay của Typespiration là nó cho phép bạn duyệt các thiết kế khác nhau, hiển thị các phông chữ và bảng màu đẹp miễn phí.
Nếu bạn nhấp vào bất kỳ thiết kế nào, bạn sẽ có tùy chọn:
- Xem trước cận cảnh thiết kế. Nếu bạn nhấp vào nút Baseline grid ở trên cùng bên phải để kiểm tra cách văn bản nằm trên lưới trục như thế nào.
- Tìm hiểu về các font và màu sắc được sử dụng trong thiết kế.
- Sao chép và dán mã HTML và CSS mà bạn cần để tạo lại thiết kế trong dự án của bạn.
2. Font Pair
Font Pair cho phép bạn duyệt các kết hợp kiểu chữ trên cơ sở một số bộ lọc:
Nếu bạn đã quyết định chọn một kiểu chữ và bạn đang tìm kiếm một kết hợp phù hợp, chỉ cần nhập tên của nó vào hộp tìm kiếm ở đầu trang. Trang web sẽ hiển thị danh sách các đề xuất sử dụng lựa chọn của bạn. Rất tuyệt đúng không!
3. Canva Font Combinations
Canva Font Combinations là một dịch vụ thông minh cho phép bạn tìm thấy các kết hợp tuyệt vời cho kiểu chữ bạn đã chọn.
Chỉ cần chọn một phông chữ và Canva Font Combinations sẽ hiển thị cho bạn font chữ nên đi cùng với font bạn đã chọn. Nhược điểm là số lượng font đầu vào hơi ít để bạn lựa chọn.
4. Font Combinator
Font Combinator là một công cụ trực tuyến mạnh mẽ, tuyệt vời để duyệt kết hợp các kiểu chữ được thiết kế bởi typotheque, một xưởng đúc và thiết kế kiểu ở Hà Lan.
Bạn có thể chọn kiểu chữ từ các bộ ký tự Latin, Hy Lạp và Cyrillic. Hộp chọn cho phép bạn duyệt các cặp phông chữ bằng nhiều từ khóa khác nhau như Thanh lịch, Cổ điển, Hợp thời trang, v.v. Bạn có thể chỉnh sửa hoàn toàn văn bản trên màn hình, điều chỉnh kiểu của kiểu chữ đã chọn và kéo bất kỳ kiểu chữ nào được liệt kê ở bên phải của trang trên đến khu vực trưng bày để thử nghiệm.
Những công cụ không chỉ kết hợp chữ mà còn giúp bạn học được kiến thức
Những công cụ mình sắp giới thiệu không chỉ giúp bạn đưa ra những gợi ý kết hợp chữ với nhau mà còn cung cấp cho bạn rất nhiều kiến thức khác.
1. Type Connection
Đây là một công cụ tương tác rất hay dưới dạng một trò chơi hẹn hò để tìm các cặp font phù hợp và thông qua đó tìm hiểu về từng kiểu chữ.
Type Connection bắt đầu với các kiểu chữ nổi tiếng đang tìm kiếm sự phù hợp. Bạn là người mai mối, người sẽ tìm kiếm đối tác lý tưởng bằng một trong những chiến lược kết hợp kiểu chữ. Ở mỗi bước, bạn sẽ học được điều gì đó về ý nghĩa của các thuật ngữ, lịch sử loại, v.v. Khi thua, bạn sẽ hiểu được cái nào ghép với nhau được và cái nào không.
Không dừng lại ở trò chơi. Trang web Type Connection là một kho tàng các cách kết hợp typographic và rất nhiều liên kết đến một loạt các tài liệu tham khảo về kiểu chữ.
2. Mixing Typefaces (PDF)
Mixing Typefaces là một file PDF của U&lc (Upper and lower case)
Đây là một ma trận giúp bạn đưa ra những cách kết hợp chữ đúng đắn. Số nằm ở giao điểm của hai kiểu chữ cho biết mức độ tương thích giữa chúng:
- Kết hợp tốt (Combine at will)
- Cũng được (Not a conservative choice)
- Không được (Think again)
3. The Art of Mixing Typefaces
The Art of Mixing Typefaces là một infographic tuyệt vời về việc kết hợp các Font của Google được tạo bởi FastPrint, lấy cảm hứng từ tài liệu U&lc mà mình đã giới thiệu ở trên.
Thông tin được truyền tải bằng cách sử dụng màu sắc chứ không phải số, nhưng nội dung cũng khá giống nhau.
4. The Art of Combining Fonts
The Art of Combining Fonts là một công cụ bắt mắt tuyệt vời để về kiểu kết hợp chữ với nhau, đọc cũng rất thú vị.
5. Mixing and Matching Fonts
Mixing and Matching Fonts cũng là một infographic thú vị khác với rất nhiều bài học nhỏ về typography biên tập bởi Fontaholic
6. The Ten Commandments of Typography
Infographic này của DesignMantic bao gồm cả các ví dụ về sự kết hợp kiểu chữ và lời khuyên tuyệt vời về kiểu chữ.
công cụ kết hợp Xem trước và hiển thị font trên trình duyệt web
Trước khi mua hoặc tải xuống một font, bạn nên thử nghiệm cách hiển thị trong trình duyệt ở các độ phân giải màn hình khác nhau. Các công cụ trực tuyến dưới đây thực hiện tốt công việc cho phép bạn xem trước các font đã chọn.
1. Google Fonts preview and streaming
Khi bạn duyệt một phông chữ trên thư viện Google Fonts, bạn có nhiều tùy chọn hiển thị khác nhau để xem trước lựa chọn của mình. Bạn có thể:
- Xem trước một câu riêng (chế độ xem mặc định)
- Xem trước một từ
- Xem trước một đoạn văn
- Xem trước một mảng lớn của font bạn chọn
- Chọn chữ khác nhau để xem trước hoặc nhập câu riêng mà bạn muốn
- Tăng và giảm kích thước font trong bản xem trước của bạn
2. Adobe Typekit preview and web font streaming
Giống như Google Fonts, Typekit của Adobe cho phép bạn xem trước một số font chữ ấn tượng.
Không giống như Google Fonts, Typekit là một dịch vụ dựa trên đăng ký cung cấp các gói giá khác nhau. Bạn có thể thử Typekit bằng cách sử dụng gói đăng ký miễn phí, cho phép bạn chọn hơn 940 phông chữ cho trang web của mình.
Bạn có một số tùy chọn để duyệt font gồm các đề xuất cho tiêu đề và đoạn văn, ngôn ngữ, họ font, v.v.
OK trên đây là mọi công cụ mà mình biết có thể giúp bạn kết hợp các font chữ tốt hơn, bạn còn biết công cụ nào khác không? Nếu có chia sẻ với mình nhé!
Nếu bạn thấy bài viết của mình hữu ích hãy chia sẻ và để lại comment bên dưới cho mình biết nhé!
