Làm Sao Chọn Font Phù Hợp Thiết Kế

Tran Minh Hong 25.11.2010 0

Tạo ra các kiểu kết hợp Typecface tuyệt vời là môn nghệ thuật, không phải khoa học. Thật vậy, vẻ đẹp của Typography không có biên giới. Không có một nguyên tắc tuyệt đối để làm theo, điều quan trọng bạn phải hiểu và áp dụng một số cách thực hành tốt nhất khi kết hợp các Font trong một thiết kế. Khi được sử dụng với sự cẩn trọng và sự chú ý, những nguyên tắc này sẽ luôn mang lại những kết quả tinh tế. Hôm nay, chúng tôi sẽ giới thiệu một số cách thực hành kết hợp Typeface tốt nhất – cũng như một số cách để tránh những sai lầm ngớ ngẩn.

Kết hợp một Sans Serif với một Serif

Một nguyên tắc phổ biến nhất đối với việc tạo ra các kết hợp Typecface đó là liên kết một sans serif ở phần Header (tiêu đề) với một serif trong phần Body (nội dung). Đây là một cách kết hợp theo lối cổ điển, và nó hầu như không thể mắc phải một sai lầm nào.

Trong ví dụ dưới đây – một layout bài viết tiêu biểu – chúng tôi đã liên kết Gothic Bold No.2 với Bell Gothic bên phía tay trái. Cả 2 typeface này đều là sans serif. Tuy nhiên, chúng có những tính chất riêng rất khác nhau. Khi đề cập đến thiết kế Header và Body, có một nguyên tắc nhỏ rất thú vị đó là: không tạo ra sự chú ý quá mức đến tính chất riêng của từng Font. Trade Gothic được coi như là một No-Nonsense Typeface. Mặt khác, Bell Gothic năng động và đanh thép hơn.

Combine-serif-with-sans-serif in Best Practices of Combining Typefaces

Kết hợp cả hai kiểu chữ lại với nhau sẽ tạo ra một sự xung đột không mong muốn trong thiết kế. Trade Gothic thường được sử dụng trong những nội dung diễn đạt sự việc, sự thật, nhưng Bell Gothic lại thích hợp trong các nội dung mang tính hài hước, vui vẻ. hai cùng nhau tạo ra một cuộc xung đột không mong muốn trong thiết kế. Sự căng thẳng này không phải là mục đích của thiết kế, và cần phải tránh.

Bây giờ, hãy xem ví dụ bên phải. Chúng tôi đã thay thế Bell Gothic bằng kiểu chữ Sabon trang trọng, đó là loại typeface serif, nó kết hợp rất tốt với Trade Gothic. Cả hai đều tập trung vào sự rõ ràng với các glyphs (nét chạm) rất dễ đọc do x- height cao. Trong ngữ cảnh đó, cả hai Typeface này đều có cùng một nhiệm vụ đó là tạo nên một sự kết hợp tuyệt vời.

Tránh sự phân lớp giống nhau

Khi kết hợp các typeface của các phân loại giống nhau, nhưng từ các họ typeface khác nhau, có thể dễ dàng tạo ra sự không phù hợp. Những tính chất riêng biệt của chúng không có sự hòa lần tốt và tạo ra một loại Typographic Mud, hãy chú ý cẩn thận xem có phải trả tiền hay không.

Trong ví dụ đầu tiên ở phía bên trái, chúng tôi có một bộ Heading bằng Font Clarendon Bold là loạislab serif. Phần Body bên phía trái là Font Officina Serif, cũng là loại slab serif. Các Typeface Slab Serif được biết đến vì tính chất riêng biệt của nó, và chúng muốn thống trị toàn bộ phạm vi chúng được sử dụng trong một thiết kế. Đặt cả 2 Slab Serif này gần nhau có thể tạo ra một cũng là một tấm chân. Sàn kiểu chữ serif được biết đến với cá tính riêng biệt của họ, và họ muốn thống trị bất kỳ khu vực trong một thiết kế chúng được sử dụng in Đưa hai serifs bản với nhau có thể tạo ra một sự dư thừa và một cảm giác không đẹp mắt.

Avoid-similar-categories2 in Best Practices of Combining Typefaces

Bây giờ, chú ý ví dụ bên phải. Header sử dụng Font Clarendon Bold đã được liên kết với New Baskerville mang tính chất trung tính hơn. New Baskerville là một typeface transitional serif với các Glyphs rộng thật độc đáo của bộ Clarendon rậm. Đồng thời, trong ví dụ này, chúng tôi đã loại bỏ và cho phép Clarendon có toàn bộ tính chất mà ví dụ này cần. Sự kết hợp này tạo ra một kết quả khá độc đáo.

Chọn typeface từ các phân loại khác nhau ngay từ khi bắt đầu để tránh việc gây nên sự cẳng thẳng trong thiết kế và trong Typography sau này.

Chỉ định các vai trò riêng biệt

Một cách dễ dàng nhất để kết hợp các Font từ một số typeface khác nhau, đó làthiết kế một lược đồ dựa trên vai trò đối với mỗi Font hoặc mỗi typeface, và đưa vào sơ đồ. Trong ví dụ tiếp theo, chúng ta đã sử dụng Akzidenz Grotesk Bold trong tất cả các chữ cái in hoa trong dòng chữ đúc tác giả phía trên cùng. Sau đó, chúng ta sử dụng Rockwell Bold cho phần tiêu đề của bài viết. Phần gới thiệu nội dung và nội dung, Typeface Bembo được sử dụng với các kích thước khác nhau. Cuối cùng, tiêu đề của cấp độ thứ 2 được sử dụng Font Akzidenz Grotesk Medium.

Assign-distinct-roles in Best Practices of Combining Typefaces

Chúng tôi đã lưu Rockwell với sự khác biệt rất lớn để chú ý đến các Headline, và loại bỏ sự kết hợp một sans serif ở phần Header và một Font serif ở phần nội dung như chúng tôi đã thảo luận trước đây. Nhưng, trong chọn lựa đó, chúng tôi cũng có một sự thay đổi lớn về kích thước, Weight và chức năng trong số các Font đã sử dụng.

Toàn bộ, có 4 Font từ 3 typeface khác nhau đã được sử dụng ở đây, và tất cả chúng đều được đặt vào cùng một thiết kế gắn kết, vì mỗi Font được chỉ định với một vai trò đã xác định trước và mỗi một vai trò đã được định rất rõ ràng trong sự phân cấp Typographic. Khi còn nghi ngờ, hãy xác định lại.

Tạo tương phản giữa các Font Weights

Một cách chắc chắn để làm rối sự phân cấp typographic của bạn đó là: thiếu sự phân biệt các yếu tố trong hệ thống phân cấp với nhau. Ngoài ra, để thay đổi kích thước,hãy chắc bạn đang tạo ra những sự khác biệt rõ ràng trong các Font Weights để hỗ trợ việ hướng con mắt của người đọc tới xung quanh thiết kế của bạn.

Trong ví dụ bên trái, chúng tôi đã có độ tương phản kích thước Font khá lớn, nhưng không đủ để tạo độ tương phản Weights Font. Myriad Light, khi thiết lập bên trên Minion Bold,có xu hướng làm mờ và đánh mất tính trực quan. Tuy nhiên, chúng ta muốn con mắt của người đọc đi tới phần tiêu đề, không phải phần nội dung, ít nhất, đó là lúc ban đầu.

Contrast-font-weights in Best Practices of Combining Typefaces

Bên phải, chúng ta đã thiết lập Myriad Black bên trên Minion, Weight trung bình. Có thể có một chút vụng về, nhưng không gây nên sự nhầm lẫn đối với những gì được cho là người đọc nhìn thấy ngay từ ban đầu.

Tạo ra một loại màu sắc typographic

Màu sắc Typographic là hiệu ứng kết hợp của các biến thể về Font Weight, kích thước, độ rộng nét gạch, sự cách quãng, kerning (sự điều chỉnh khoảng cách giữa 2 ký tự cặp đôi trong dạng hiển thị, để khi in ra được cân đối và phù hợp với nguyên tắc thẩm mỹ hơn) và một số yếu tố khác. Một cách dễ dàng để xem màu sắc typograrphy đó là liếc nhìn layout cho đến khi bạn không thể đọc được gì nữa, nhưng có thể vẫn còn nhìn thấy text trong các mục tổng thể giá trị tông màu.

Nếu bạn liếc qua các ví dụ bên dưới, bạn sẽ nhận thấy rằng layout tràn ra bên phía trái trở thành một BLOB (Binary Large Objec – Là kiểu dữ liệu của một cột trong bảng RDBMS, có thể lưu ảnh lớn hoặc dữ liệu văn bản như những thuộc tính) của Text không có nét gì nổi bật, phần Bottom lại quá dày. Tuy nhiên, layout bên tay phải lại có sự phân cấp trực quan, ngày cả khi bạn không thể đọc được nó. Không phải là vấn đề về khoảng cách của bạn so với trang này xa gần như thê nào, không có sự nhầm lẫn về vị trí của Title – tiêu đề, mà là vị trí tiếp theo mà mắt bạn sẽ di chuyển tới là đâu.

Create-different-typographic-colors in Best Practices of Combining Typefaces

Bạn nên sử dụng những loại màu sắc Typography có thể củng cố được hệ thống phân cấp trực quan của trang, nó phải luôn gắn trực tiếp với ý nghĩa của nội dung và ý định muốn gửi gắm của thông điệp.

Không làm xáo trộn các tâm tính của typecface

Một trong những sai lầm thường bị bỏ qua của Typographic đó là không nhận tính khí vốn có của TypefaceCác Typeface đều có cá tính riêng. Chúng thay đổi tâm tính đó đến mức độ nào phải dựa vào ngữ cảnh, nhưng không đáng kể. Có một vấn đề ở đây đó là chúng ta thường quên nhận dạng cá tính của Typecface đối với một công việc cụ thể, vấn đề càng trở nên nghiêm trọng khi chúng ta thêm một typeface chưa được chọn lựa kỹ càng để tạo nên sự hòa trộn.

Trên trái của ví dụ này, chúng tôi đã kết hợp Franklin Gothic Bold với Souvenir. Cảm giác ban đầu về Franklin Gothic là rất Stoic- nghiêm khắc, vững chắc, mạnh mẽ, nhưng, nó lại truyền tải một thông điệp có cảm giác rất trang trọng và tính tế. Nó không mang tính dịu dàng, nhưng lại tràn đầy trách nhiệm. Mặt khác, Souvenir lại rất vui tươi, giản dị, một chút hững hỡ và rất dễ thương. 2 typeface này kết hợp lại với nhau giống như một tên lính gác ở Cung điện Buckingham đã không đói hòi đến một cô gái vui tươi đang nhón chân và cố gắng chờ đợi anh ta mỉm cười. Kiểu kết hợp tâm trạng này thật không phù hợp chút nào. Hãy kết hợp tâm tính của các Typeface để có thể thu hút được sự chú ý đến Typography thay vì thông điệp, đó là những kết quả trong một thiết kế nghèo nàn.

Dont-mix-moods in Best Practices of Combining Typefaces

Bên phải, chúng tôi đã kết hợp Souvenir với một typeface có thiện chí hơn. Futura Bold có rất nhiều tính cách, và nó có một số tính cách có thể đáp ứng được với Souvenir. Đầu tiên, cả hai loại typeface này đều có x-heights cao. Cả hai đều có Glyphs rộng và có hình dạng chữ cái rất tròn. Cả hai typeface này đều có những nét quanh có tinh tế nhưng không quá nổi bật. Song Typeface này không thể thay thế hay ngự trị typeface kia. Trong ví dụ này, cả hai cùng hoạt động để tạo ra một tâm trạng vui vẻ và lạc quan. Không có cảm giác về sự căng thẳng, mệt mỏi.

Tạo sự tương phản giữa sự Khác biệt với Trung tính.

Một thiết kế Typographic rõ ràng, dễ đọc đòi hỏi phải chú ý cẩn thận đến cảm giác căng thẳng cố ý hay không cố ý. Người ta đặt nó ở một ví trị không cố ý gây căng thẳng đó là với cá tính đã phân loại trong số các lựa chọn về kiểu chữ của bạn, bạn có thể cần một Typeface thứ hai để giữ một vai trò trung tính.

Trong ví dụ của chúng tôi, cột bên trái là sự kết hợp giữa Dax Bold với Bernhard Modern. Đây là một lựa chọn kém cỏi, ít nhất có 2 lý do để giải thích mà chúng tôi sẽ kiểm chứng.

Contrast-distinct-with-neutral in Best Practices of Combining Typefaces

Trước tiên, Dax có các glyphs hẹp và một x-height lớn, trong khi Bernhard Modern có một số Glyphs rất rộng và một x-heights thấp nhất trong số các Typeface cổ điển phổ biến nhất. Thứ hai, Dax là một typeface không Formal, hiện đạị, và lanh lợi. Nó rất lý tưởng để truyền tải một thông điệp kỹ thuật, hiểu biết, hiện đại. Mặt khác, Bernhard Modern lại sang trọng, thanh bình, tinh tế và thậm chí là một cái gì đó gần gũi, thân mật. Kết hợp sự thiếu tính chất hóa học trong số các thuộc tính này lại cùng với những cá tính rất khác biệt của mỗi typefacevà bạn đã làm giảm bớt các chức năng của Typography.

Hãy nhìn vào một sự lựa chọn tốt hơn. Đó là cột bên phải, trong cột này chúng tôi đã kết hợp Dax Bold với Caslon. Caslon là một kiểu chữ theo phong cách cũ, nhưng nó được hiện đại hóa và giảm bớt rắc rối để kết hợp với các Typeface khác tạo nên sự độc đáo. Nó hoạt động rất tốt với Dax trong ngữ cảnh này. Chú ý bạn có thể thấy cá tính của Dax như thế nào trong phần Headline, còn Caslon nhường chỗ và cung cấp thông tin cho người đọc. Trong ngữ cảnh này, Caslon hoạt động như một lựa chọn trung tính để hỗ trợ và làm cho Dax hoa mỹ hơn.

Tránh những sự kết hợp quá khác biệt

Khi đã có quá nhiều sự tương phản được tạo ra trong một số cài đặt, bởi vì chúng ta đã chọn những typeface quá khác nhau, có thể tạo ra một sự mất cân bằng về tính trực quan trên toàn bộ thiết kế.

Ở bên trái, chúng tôi có Antique Olive Nord – một font đặc biệt rậm – kết hợp với Garamond Narrow. Sự tương phản quá nhiệt tình và các hiệu ứng của nó rất rõ ràng. Trong hầu hết trường hợp, sự tương phản tuyệt đối này vượt ra ngoài sự kiểm soát và làm cho chúng ta trở nên lung túng. Nó không thể dùng để truyền tải thông điệp của nội dung.

Avoid-disparate-font-combinations in Best Practices of Combining Typefaces

Bên phải, Antique Olive Nord đã được thay thế bằng một Antique Olive Bold dịu hơn. Garamond Narrow cũng được thay thế bằng Book Weight Garamond, nhưng sau khi đã cân nhắc kỹ – có một lựa chọn tốt hơn nhiều – đó là Chaparral. Chaparral có x-height cao hơn Garamond và nhìn một cách tổng thể thì nó hiện đại hơn và nó là một lựa chọn mang tính trung tính hơn để thiết lập tương phản với thuộc tính hiện diện của Antique Olive Bold.

Hãy giữ sự đơn giản – chỉ cần 2 Typeface

Trong tất cả những nỗ lực sắp xếp các thư viện typeface rộng lớn để tìm kiếm “một sự kết hợp phù hợp”, đôi khi thường dễ dàng bỏ qua nhiều lựa chọn rõ ràng và dễ dàng hơn: liên kết 2 typeface bằng cách sử dụng một sự kết hợp giữa một sans serif và một serif cổ diển.

Trong ví dụ dưới đây, chúng tôi đã tạo ra một hệ thống phân cấp rõ ràng, trực quan, tìm ra mức độ đa dạng cao, tạo một màu sắc Typographic mạnh mẽ, mang lại một cảm giác thú vị. Và tất cả đều nhằm mục đích tăng tính dễ đọc. Nhưng tất cả được thực hiện chỉ với 2 Typeface. Tuy nhiên, chúng tôi đã sử dụng toàn bộ 5 Font chữ: 3 Font Helvetica Neues và 2 Font Garamonds.

Use-two-typefaces in Best Practices of Combining Typefaces

Tại sạo sự kết hợp này lại được thực hiện quá dễ dàng như vậy? Vì một số yếu tố. Đầu tiên, khi sử dụng các Font chữ khác nhau từ cùng một Typeface, có thể bạn sẽ có một độ tương thích về tính trực quan cao mà thậm chí không phải làm gì. Thứ hai, chúng ta đã chọn những kết hợp thật sự đã được thử nghiệm với việc sử dụng một Typeface ở Heading cổ điển và mang tính trung lập và môt typeface dành cho nội dung cũng cổ điển và trung tính.

Cả Helvetica Neue và Garamond đã phân biệt các tính cách trung lập, và chúng có thể cùng nhau dệt nên các layout phức tạp và kết hợp xung quanh những typeface khác vì chúng tôi đã duy trì một hệ thống phân cấp trực quan rất chặt chẽ. Lập kế hoạch cho những quy tắc và làm theo chúng, với những typeface phù hợp có thể mang lại các kết quả tuyệt vời với một chút nỗ lực.

Sử dụng các kích cỡ điểm khác nhau

Chúng tôi đã lưu lại một trong những nguyên tắc đơn giản để nhất cho đối với phần cuối cùng này: sử dụng các kích thước điểm khác nhau để tạo ra sự tương phản và sự phân biệt.

Trong ví dụ bên trái, Heading và Nội dung cùng tràn vào BLOB không đẹp mắt của text. Sử dụng một phương pháp đã nêu trên và xem ví dụ bên trái. Và liếc mắt sang phía bên phải, hãy chú ý đến đến sự khác biệt mặc dù nó đã bị mờ.

Use-different-point-sizes3 in Best Practices of Combining Typefaces

Bên tay phải, chúng ta có 2 Font chữ tương tự nhau, nhưng kích thước khác nhau. TheMix Italic đã được nâng lên đáng kể, trong khi New Century Schoolbook đã giảm kích thước đế rõ ràng và dễ đọc hơn.

Sử dụng các kích thước điểm khác nhau nhằm hỗ trợ việc phân biệt hệ thống phân cấp Typographic và tăng sự đa dạng về màu sắc Typographic.

Kết luận

Trên thực tế, không có một quy tắc cứng nhắc và nhanh chóng nào cho việc kết hợp các Typeface, để có được các lựa chọn tuyệt vời, cần nhiều thời gian và có thể có một chút căng thẳng, nhưng cũng có một bộ nguyên tắc độc đáo, tiện dụng, cũng có thể hiểu như là các tình huống của Typographic để tránh, để hướng dẫn tiến trình kết hợp các typeface nhanh nhất có thể để mang lại một kết quả làm hài lòng mọi người.

Dịch và biên tập từ: SmashingMagazine

Xem bài viết gốc

Bình Luận »