Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

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

Chủ đề thuộc danh mục 'Tác phẩm đẹp - Tài liệu tham khảo Typography' được đăng bởi Đức Biks, 5/9/14.

Lượt xem: 49,388

  1. Đức Biks Thành viên cấp 1

    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.

    [​IMG]
    (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 Style.

    [​IMG]
    (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 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.

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

    StyleDecoration 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 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.

    [​IMG]
    (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 …

    [​IMG]

    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 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.

    [​IMG]

    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 .

    [​IMG]
    (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.

    [​IMG]
    (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.

    [​IMG]
    (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.

    [​IMG]
    (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 :D

    [​IMG]
    (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.

    [​IMG]
    (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.

    [​IMG]
    (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.

    [​IMG]

    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)

    [​IMG]

    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 .

    [​IMG]

    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).

    [​IMG]

    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ủ.

    [​IMG]

    6) CalebAcuity Americas

    CalebAcuity Americas là sự kết hợp YanoneKaffeesatz BoldLucida 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.

    [​IMG]

    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.

    [​IMG]

    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.

    [​IMG]

    9) 47 Degrees

    47 Degrees kết hợp LeagueGothic với ChunkFiveHelvetica 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ị.

    [​IMG]

    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)

    [​IMG]

    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

    ...
    Chỉnh sửa lần cuối: 5/9/14
    neyu2293, suty, Nguyễn Thị Kim Chi27 người khác thích bài viết này.
  2. Trần Duy Hoàng

    Trần Duy Hoàng Thành viên cấp 3

    đánh dấu :)
  3. pro_dragon

    pro_dragon Thành viên cấp 2

    Bookmark :)
  4. N.P

    N.P Thành viên cấp 4

    Bài viết khá bổ ích cho các bạn muốn làm các nội dung liên quan đến demo text, làm magazine, báo, hoặc một số ít Photo Quote.

    Bạn nào đọc mà chưa hiểu về Serif, Sans Serif, Script... thì nên tìm hiểu về Type Classifications, nó khá bổ ích cho nhu cầu tìm kiếm font của các bạn.

    Theo cá nhân mình thấy thì thường làm báo hoặc magazine ngta có xu hướng chọn Serif, còn nếu là web hoặc mobile thì thường người ta sẽ chọn Sans Serif nhiều hơn. Hạn chế chọn cả Serif và Sans Serif đi cùng nhau (thường thì kết hợp không khéo chúng nó sẽ đã nhau không thương tiếc).

    Còn trong Typography hiện nay thì các bạn có xu hướng chọn font Script nhiều hơn, vấn đề kết hợp giữa Script và các font khác, Script và ornament... cũng khá là đau đầu :))
    TOANLETHANH, pro_dragonFMP thích bài viết này.
  5. Sun

    Sun Mới đăng kí

    lý do tạp trí, báo haowjc magazine thường là những ấn phẩm mang tính cần sự trang nhã, lịch sự, mà font serif thì là bộ font cổ điển có chân từ rất lâu thời còn in ấn bảng khắc, hay khắc lên đá nên người ta cần dòng kẻ nhỏ để nhìn nó thẳng, thêm điều nữa, vì nó có chân, nên những cái chân nhỏ nó sẽ khiến thị giác nhìn nó giống như một đường kẻ, vì vậy nó sẽ giúp quá trình đọc và không bị nhầm lẫn dòng kẻ, vì vậy nó thường được sử dụng cho các văn bản dài dạng in ấn, nhưng một số người cũng thích sử dụng sans cho nhìn hiên đại
    còn về bộ font sans serif, nó là font hiện đại, người ta hướng tới những cái mới, lược bỏ sự rườm rà, nên sẽ nhìn thấy xuất hiện nhiều cho các sản phẩm hiện đại nhất là về web hay mobile
    còn về Script: vì nó nhái lại dạng handwriting nên nó mang xu hướng viết tay, rườm rà với mục đích trang trí (mà nhu cầu thẩm mĩ của vn mình thì vô cùng thích mấy cái rườm ra, mấy cái quằn tà là vằn )nên tại vn người ta hay sử dụng cho các tác phẩm photoquote, bìa face vv .... :D
    ps: được đọc bản này của chủ thớt từ lâu rồi mà chưa nhai xong =)))))))))
  6. Vũ Việt Hùng

    Vũ Việt Hùng Thành viên cấp 2

    Cái này lượm được trên mạng.
    [​IMG]
    Alkanaknight, SunN.P thích bài viết này.
  7. MixFlow

    MixFlow Thành viên cấp 1

    rất bổ ích, tks thớt :D
  8. kajaya18

    kajaya18 Thành viên cấp 1

    nhìu cái quá, nhai từ từ vậy,
  9. nguyenanmar

    nguyenanmar Banned

    để học dần <3
  10. Lê Nam Long

    Lê Nam Long Mới đăng kí

    có hướng dẫn chọn màu chữ trên màu nền cho nổi k ạ
Từ khóa:

Ủng hộ diễn đàn