Những nguyên tắc kết hợp Typeface (font)

Xin chào mọi người, gàn đây mình có thấy nhiều bạn quan tâm đến typography hay photoquote có nhắc rất nhiều về việc kết hợp các font. Mình có dịch một bài viết nhỏ trên diễn đàn Nope.com về những nguyên tắc cơ bản trong việc lựa chọn kết hợp các Typeface cho các bạn tham khảo.

Phần dịch của mình mang tính chất dịch hơi thô và có nhiều chỗ mình có lược bớt để tập trung hơn. Các bạn có thể tham khảo đầy đủ tại link sau : http://www.noupe.com/design/a-crash-course-in-typography-principles-for-combining-typefaces.html

Do có một số từ ngữ riêng biệt như Contrast, Weight, hay Typeface là những từ mình thấy bị yếu nghĩa hơn khi chuyển sang tiếng Việt nên mình sẽ giữ nguyên tiếng Anh.

Cám ơn

Priciples for Combining typeface (Nguyên tắc kết hợp typeface)
By Cameron Chapman

Khi kết hợp các typeface quan trọng nhất các bạn cần nhớ đó là Contrast và Mood. Sự kết hợp các typeface có hiệu quả là một trong những kỹ năng cần học thông qua luyện tập liên tục, thử nghiệm và thất bại, nhưng một khi đã nắm vững được những nguyên tắc cơ bản của việc kết hợp, bạn sẽ có những công cụ cần thiết, cái mà bạn cần để tìm ra sự kết hợp trong khi võ đoán về những gì sẽ hoặc không làm việc cùng nhau.

Ở đây chỉ là sự kết hợp của 2 typeface, như là bạn dùng cho Body copy (phần văn bản chính) và cho Headline.


Contrast (tương phản)

Contrast là một trong những khái niệm quan trọng dùng trong sự kết hợp giữa 2 typeface, với các Contrast riêng, các typeface có xu hướng xung đột lẫn nhau, việc tự nhiên tạo ra một cái ngẫu nhiên sẽ làm phá hỏng các cấu trúc thiết kế của bạn. Việc tạo ra sự khác nhau về những Contrast riêng dựa trên một vài nguyên tắc cơ bản, tất cả những điều đó sẽ được đề cập dưới đây

Nhưng đầu tiên, cần hiểu rõ chính xác cái gì là Contrast, Contrast là độ khác biệt giữa các typeface, những typeface mà quá giống nhau thường có xu hướng xung đột. Tâm trí bạn thường không ngay lập tức nhận ra sự khác biệt giữa chúng, và cuối cùng thì chúng lại xảy ra, thật tai ương thay. Các typeface mà không quá giống nhau có thể xuất hiện một cách lộn xộn và vô tình, thông thường chúng rất gây chán mắt.


Weight (độ dầy)

Weight của typeface đóng một vai trò quan trọng trong sự xuất hiện của chúng. Chúng ta thường nghĩ đến các từ như “light”, “medium”, “regular”, “bold”, những typeface khác nhau có những sự bắt đầu về Weight khác nhau (cùng size nhưng giữa các font đều khác kích thước) . Sự kết hợp các typeface dựa trên Weight là một cách khá đơn giản trong việc tạo ra độ tương phản Contrast giữa các typeface.


(Chuckfive thì hơi dầy khi kết hợp với Disco
Nó chơi hợp hơn với Helvetica Neue Light
Disco cũng chơi tốt với Helvetica Nueu Light)

Bạn sẽ muốn tìm những typeface có sự khác biệt rõ ràng về Weight, nhưng là không phải khác nhau quá lớn (như kiểu của Chuckfive heavy). Sự khác biệt quá lớn giữa Weight của các typeface cần phải được tạo ra bằng nhiều khía cạnh khác tương đồng nhau nữa như là Structure và Style.


(Sự giống nhau về Structure được cho phép cùng với việc có nhiều Weight trên duy nhất một typeface, làm cho chúng kết hợp dễ dàng)

Style và Decoration (phong cách và trang trí)

Style của Typeface có một sự ảnh hưởng cực lớn tới kết quả nhận được. Về tổng quan, khi làm việc với nhiều Style, bạn thường sử dụng 2 định dạng phổ thông là Bold và Italic. Underline cũng hay được sử dụng, nhưng trong thiết kế web, nó thường chỉ được sử dụng để chỉ các liên kết kèm Link. Những Decoration khác bao gồm những chi tiết outline và đổ bóng, cả hai cái đó có thể được sử dụng để kết hợp với nhiều typeface khác nhau.


(Có thể kết họp giữa các typeface bằng các style giống nhau)

Style và Decoration có thể được sử dụng để tạo Contrast giữa một Type family (một họ chữ, nghĩa là một nhóm chữ cấu trúc tương đồng) hoặc Typeface. Kết hợp Style Regular và Italic, với nhiều Weight khác nhau, hoặc những thứ như là Shadow và Outline có thể tạo nên sự khác biệt giữa các Font family và tạo ra sự tương phản phù hợp.


(Bạn có thể tạo ra Contrast giữa một typeface bằng việc sử dụng các style khác nhau
Bạn có thẻ tạo ra Contrast giữa một Type family bằng việc sử dụng các style khác nhau nữa)

Scale và Hierarchy (kích thước và phân cấp)

Scale là kích cỡ, là size của font này với font khác, là một yếu tố rất quan trọng trong sự phối hợp. Hierarchy là sự phân cấp, sự khác nhau giữa các yếu tố trong một thiết kế được ảnh hưởng mạnh bởi Scale (kích cỡ) của những typeface được sử dụng. Ví dụ, những từ đầu dòng làm tiêu đề hiển nhiên phải lớn hơn kích cỡ của các chữ khác trong đoạn văn. Cũng như vậy với các phần khác, cái tiêu đề thứ 2 phải bé hơn cái đầu, thứ 3 phải bé hơn cái thứ 2 …



Như làm một quy tắc chung, sự phân cấp Hierarchy phải bắt đầu bởi tiêu đề H1 là lớn nhất, thông tin bình thường hoặc chú thích thì có kích cỡ nhỏ nhất. Bạn cần phải giữ sự cân bằng giữa các kích cỡ chữ trong một Weight và Style nữa. Như vậy bạn không cần có quá nhiều biến thể giữa một Size chữ giữa font nhỏ nhất và lớn nhất.



Classification (Phân loại)

Về tổng thể, khi kết hợp các Typeface, bạn sẽ muốn chọn các font không cùng Classification, có nghĩa trong cùng một loại. Ta hay dùng sự kết hợp giữa Serifs và Sans-serif, hoặc giữa Serif và Script, … Và bạn sẽ có nhiều thời gian hơn và dễ dàng hơn để kết hợp những thứ khác để tạo nên Contrast khác nhau để tránh xung đột .


(Gramond làm việc tốt với Benton Gothic.
Nhưng lại không làm việc tốt với Hoefler.)

Nhiều khi cùng một Class các typeface thỉnh thoảng cũng kết hợp được với nhau , nhưng chúng ta cần cân nhắc thêm nhiều thứ. Đầu tiên, bạn muốn tìm ra những typeface mà có sự khác biệt đủ lớn đề khi nhìn chúng ta có thể nhận ra ngay sự khác biệt, trong khi sử dụng cùng Mood, Structure và những nhân tố khác được cố định. Thử nghiệm và mắc lỗi là điều tốt nhất để tìm ra những typeface có cùng class có thể làm việc với nhau.


(Gramond không làm việc với Calson.
Helvetica không làm việc vói Geneva)

Một mẹo nhỏ khi lựa chọn các Typeface là những cái mà cùng một Class tổng quan (VD cùng là Serifs) nhưng lại thuộc nhánh khác nhau (như Old style và Modern, hoặc giữa Geometric và Grotesque), nó sẽ tạo ra nhiều Contrast hơn ngay từ đầu.


(Chuck fine làm việc tốt với Gentium.
Fontin Sans làm việc với Hero Light.)

Structure (cấu trúc)

Đóng một vai trò lớn trong sự kết hợp các typeface, bạn phải chọn những typeface nhưng cái mà có cấu trúc rất rất giống nhau, hoặc cực kì khác nhau. Typeface mà rất khác nhau trong nhiều mặt có thể được kết hợp bởi những cấu trúc giống nhau của nó , điều ngược lại hiếm xảy ra hơn.


(Crimson Text và Gill Sans Có cáu trúc giống nhau.
ChuckFive và Futura có cấu trúc rất khác)

Hãy nhìn cấu trúc của chúng từng phần một, kiểu như x-height của nó giống gần nhau, hoặc có cùng một hình dạng (letterform) cấu tạo nên các chữ cái. Tốt hơn là sử dụng những thứ có cấu trúc khác biệt nhau hơn là những thứ mà sêm sêm , hoặc giống quá như thế này.

Màu Sắc và Texture

Khi bạn cần đến Sự tương phản mạnh về hình ảnh (visual Contrast ), màu sắc và Texture có thể là điều huyền diệu. Ví dụ như khi bạn muốn kết hợp các typeface mà gần giống nhau, hay cùng một type family vậy, việc thay đổi màu sắc của một vài yếu tố sẽ ngay lập tức gây hứng thú. Thêm texture cũng tương tự như vậy


(Sử dụng màu sắc và texture để thêm phần thú vị)

Ngoài ra nếu bạn có những kiểu chữ cực kì khác nhau rồi, thêm màu, texture và kết hợp chúng lại, sẽ tạo ra được cái nhìn hài hòa. Các nguyên tắc về màu sắc vẫn được áp dụng tốt với các kiểu chữ, nhưng đừng nên lạm dụng quá nhiều màu sắc là ổn.


Extreme Contrast ( tương phản cực mạnh)

Có thể là một lựa chọn tốt nếu bạn làm việc với các typeface Display và Script, trong những ví dụ dưới đây, có thể sẽ rất khó để tìm ra những typeface với Contrast phù hợp mà giống nhau. Hãy kết hợp một cái giản đơn với một cái phức tạp để tìm kết quả tốt nhất, chứ không phải là tìm 2 kiểu chữ phức tạp cho chơi với nhau.


(Fortunaschwein làm việc tốt với một font đơn giản như Colaborate)

Mood (Sắc thái)

Là điều quan trọng để các typeface kết hợp, mood có thể bất kì là formal, hay casual, fun hay serious, hoặc cái mẹ gì cũng được. Đây là nơi mà rất nhiều người mắc phải lỗi lầm với việc kết hợp các Typeface, chọn các typeface không chỉ là sự giống về Mood, mà phải là Mood phải phù hợp với cả nội dung của project cái mà bạn đang thiết kế hướng đến.


(Droid Serif hiện đại như là District Thin
Czaristite thì thông thường, như là Duality
Goudy Old Style nghiêm túc, như là Benton Gothic)

Ví dụ

1) Oak Street Bootmaker

Hoefler Text and Franklin Gothic, kết hợp lại, đây là 2 font thuộc dạng Classic, nó tạo ra một ấn tượng cho người đọc thấy được một cái j đó rất truyền thống.



2) Pound & Grain

Kết hợp 2 font Serif , Cũng như có một font Sans ở Trang chủ của họ. 2 Serif làm việc ngon với nhau bởi vì chúng thuộc nhánh khác nhau (1 thằng mang đậm dấu của Slab, một thằng Traditional)



3) Burciaga

Kết hợp 3 font riêng biệt: Droid Serif, Georgia, and Dancing Script, 2 cái Serif là Droid và Georgia làm việc với nhau tốt đến đáng ngạc nhiên, Dancing Script mang lại vẻ sang trọng hơn nữa .



4) Stuart Bicknell Photography

Stuart Bicknell Photography uses sử dụng Size và Style để tạo Contrast , Cho dù thực tế hàu như họ sử dụng Times New Roman (và có tí Arial).



5) Foundation Six

Foundation Six sử dụng sự kết hợp của Clarendon and Helvetica Neue, một kiểu gì đấy nhìn khá hiện đại nhưng vẫn mang nét bảo thủ.



6) CalebAcuity Americas

CalebAcuity Americas là sự kết hợp YanoneKaffeesatz Bold và Lucida Sans. Nó tạo ra một cái nhìn khá hiện đại, Và là một ví dụ tuyệt vời cho sự kết hợp thành công của các Sans Serif.



7) Analog

Sử dụng duy nhất một kiểu chữ, nhưng khác nhau trong Style, màu sắc, và kích cỡ để tạo nên Contrast.



8) Thor Datacenter

Thor Datacenter kết hợp vài font gồm Aller Display, Journal Regular, và Arial. Sự thêm vào của một font Script là JournalRegular với các sans serif khác trong một palette làm cho trang nhìn thông thường và gọi mời hơn.



9) 47 Degrees

47 Degrees kết hợp LeagueGothic với ChunkFive và Helvetica theo kiểu rất hiện đại và giản dị. Họ cũng dùng Museo300 một cách chọn lọc, làm tăng thêm hiệu ứng hình ảnh cho website thêm thú vị.



10) Logo Nest

Logo Nest họ kết hợp rất nhiều typeface để tạo ra vẻ cổ điển, và họ giữ tất cả mọi thứ đều thống nhất, kể cả màu sắc (hầu như đều sử dụng đen trắng)



Cám ơn các bạn đã đọc bài .
Mình có thú vui nhỏ sưu tầm và đọc cái bài typo bên các forum nước ngoài, bạn nào có chung sở thích nếu muốn có thể giao lưu với mình tại Fb.com/biksence , chúng ta có thể chia sẻ và giúp đỡ nhau thêm.

Cám ơn