Đến với ebook này, chúng ta sẽ có khái niệm và hiểu rõ các nguyên tắc của font chữ thông qua việc nắm bắt kiến thức về kerning, tracking, leading của font và cách tuân thủ những nguyên tắc đó, qua đó thành công trong việc sử dụng font chữ để tạo ra các thiết kế tuyệt vời. Ebook được chia sẻ nguyên bản dưới định dạng PDF.

—————————–

TẢI VỀ TẠI ĐÂY

hoặc

Để lại comment hoặc inbox email, facebook cho chúng tôi nếu link download có vấn đề 🙂

XEM THÊM —————————-

• TYPOGRAPHY – PHẦN 1: CỘI NGUỒN CON CHỮ
• DOWNLOAD FONT NƯỚC NGOÀI CHO MỤC ĐÍCH CÁ NHÂN
• HƠN 2000 FONT VIỆT HÓA MIỄN PHÍ
• FOLLOW FACEBOOK PHONGCHUVIET ĐỂ NHẬN ĐƯỢC NHIỀU THÔNG TIN THÚ VỊ HƠN!
• HOT! THE TYPOGRAPHER’S TOOLBOX VIỆT HÓA
• BUNDLE 13 FONT SCRIPT VIỆT HÓA TUYỆT ĐẸP THÁNG 4!
• EBOOK | BẠN CÓ THỂ VẼ TRONG 30 NGÀY

GRAPHIC DESIGN: THE NEW BASICS

ENGLISH FOR DESIGN STUDENTS

THE PORFOLIO HANDBOOK

Tên gốc: You can draw in 30 days, the fun, easy way to learn to draw in one month or less

Bạn có gặp khó khăn khi lựa chọn font chữ ? Làm thế nào để tìm kiếm được font chữ trong một bức ảnh hay một thiết kế trước đó mà không có file gốc. Trong lúc bạn đang suy nghĩ về google thì mình có một giải pháp giúp bạn đây…

• Contrast: độ tương phản dày-mỏng của nét chữ ở mức vừa phải.
• Serif luôn đi kèm bracket, đầu của serif hơi cong, bracket cũng thường là đường cong.
• Axis: một vài phiên bản được nhận biết bởi chữ hướng nghiên của ký tự e thường (lowcase)

B. TRANSITIONAL SERIFS

• Contrast: mạnh hơn font Old-style một chút
• Serif: tương tự như Old-style, đầu serif rõ ràng vuông vắn hơn nhờ sự phát triển của công nghệ in ấn.
• Axis: luôn thẳng đứng

 C. NEOCLASSICAL & DIDONE SERIFS

• Contrast: mạnh
• Axis: thẳng đứng
• Bracket: không có hoặc rất nhỏ
• Terminal: hình tròn (hầu hết) thay vì nét vẩy của bút lông

D. SLAB SERIFS

• Contrast: yếu
• Serif: dày, nặng và dày bằng bề dày của stroke.
• Bracket: nhỏ (hoặc không có)

Khoảng bao nhiêu người trên thế giới đang sử dụng font chữ mỗi ngày nhỉ? Rất nhiều đúng không. Còn bạn thì sao ? Nếu sử dụng mỗi ngày thì bạn có hiểu font chữ là gì không? Nếu bạn là một designer, mình tin chắc sẽ có lúc bạn nhầm lẫn font, type-face, type-style hay type-family … Chẳng sao cả, rồi bạn sẽ hiểu ngay trong vài phút tới đây thôi.

Type-style là các biến thể khác nhau của các type trong cùng một type-face.

Ví dụ: 5 type-style của arial-face là roman, italic, bold, bold italic.

Character angle – độ nghiêng

Type-style cơ bản nhất của type-face là roman. Một type-style khác mô tả độ nghiêng chính là italic. Có một thuật ngữ khác thường thấy là Oblique. Về cơ bản thì 2 từ này đều chỉ về các type-style nghiêng, tuy nhiên sẽ có một chút khác biệt. Nếu bạn quan tâm thì chúng ta sẽ tìm hiểu kỹ hơn ở một bài viết khác.

Character weight – độ đậm

Hầu hết các type-face đều có type-style bold và bold italic. Một số type-face bao gồm nhiều mức độ đậm khác nhau như: light, medium, semibold (demibold), extrabold hay black.

Character width – độ rộng ngang

Một số type-face có thêm type-style độ rộng ngang được đặt tên là condensed hoặc extended.

FONT

Font là một bộ character bằng kim loại hoặc gỗ trong một type-face, có cùng type-style và có 1 kích thước duy nhất. Tuy nhiên định nghĩa này chỉ phù hợp trong giai đoạn in ấn chế bản thủ công.

Ví dụ: font-arial-8pt và font-arial-10pt là hai font khác nhau, cũng như arial-bold và arial-Italic cũng là hai font khác nhau.

Kỷ nguyên kỹ thuật số với sự ra đời của font máy tính thì định nghĩa của font cũng có chút thay đổi. Việc thay đổi kích cỡ của một font chữ trên máy tính trở nên rất đơn giản, các font làm bởi định dạng vector có thể phóng to thu nhỏ tuỳ ý. Chính vì vậy, định nghĩa về font thay đổi thành “font là một bộ character trong một type-face, nó có cùng type-style và gồm nhiều kích thước“.

Ví dụ: font Arial 8pt và Arial-10pt bây giờ là thuộc cùng 1 font, và Arial Bold và Arial Italic sẽ là hai font khác nhau.

 TYPE-FACE

Type-face là bố của font, nó bao gồm nhiều font.

Ví dụ: type-face Arial sẽ bao gồm: font arial-bold, font arial-italic, font arial …

TYPE-FAMILY

Type-family là bố của type-face. Một type-family có thể chứa nhiều biến thể, nhưng sẽ luôn luôn có các dấu hiệu nhận biết dựa trên những đặc điểm thiết kế chung. (Ví dụ: Helvetica chính là một type-family, Helvetica-family bao gồm nhiều type-face như helvetica-neune, helvetica-LT, helvetica-rounded …) Điều này cho phép các designer duy trì sự đồng nhất của thiết kế typography trên sản phẩm nhưng không bị nhàm chán, bằng cách sử dụng nhiều type-face/type-style ở cùng một bộ type-family.

Khái niệm Type-family được làm sáng tỏ khi bộ Stone-family ra đời vào thập niên 1980. Stone-family bao gồm 3 type-face:

• Stone serif
• Stone san
• Stone infomal

Ở mỗi type-face có 6 type-style tạo nên tổng cộng 18 type-style khác nhau. Đồng nghĩa với việc designer có thể tạo nên một thiết kế phong phú về chữ mà không làm mất đi sự đồng nhất khi dùng một type-family này.

TYPE MEASUREMENT

Nhu cầu thiết kế phải đẹp, dễ đọc và rõ ràng, đặc biệt là với các văn bản dài, đòi hỏi cần chú ý đến các đại lượng về kích thước-chiều cao-chiều rộng-khoảng cách giữa các ký tự, từ, dòng và đoạn văn.

Có 3 đại lượng cơ bản khi làm việc với con chữ:

• Points: sử dụng để đo chiều cao, chẳng hạn như kích thước loại (chiều cao của chữ) và khoảng cách giữa các dòng và đoạn văn.

• Picas: sử dụng để đo chiều rộng, chẳng hạn như chiều rộng của một cột sắp chữ (chiều dài của dòng) hoặc không gian giữa các cột. Pica thuận lợi hơn inches vì ​​không gian nhỏ có thể được đo trong toàn đơn vị thay vì các phân số.
• Ems và ens: đại lượng chỉ phần không gian của type.

[XEM THÊM]

PHẦN 1 – CỘI NGUỒN CON CHỮ

PHẦN 2 – CƠ THỂ CON CHỮ – TYPE ANATOMY

PHẦN 4 – CÁC HỌ CƠ BẢN CỦA TYPE-FACE

Thành phần cơ bản của typography chính là các character (ký tự). Character chính là các chữ cái, chữ số, các dấu câu hay các biểu tượng tham chiếu. Mỗi character được tạo nên bởi rất nhiều bộ phận và đó chính là một phần linh hồn của typography.

PHÂN LOẠI CHARACTER

– uppercase (u.c.)/cap

Thường gọi là chữ in hoa, các uppercase character có kích cap-height bằng nhau. Sẽ rất khó đọc nếu chỉ sử dụng caps-character cho cả một đoạn văn bản, chính vì thế caps-character thường dùng cho các tiêu đề hay câu cần nhấn mạnh.

– lowercase (l.c.) character

Thường gọi là chữ viết thường. Lowercase character được sử dụng cho văn bản vì nó tạo ra nhịp điệu lên xuống của văn bản, thuận mắt và dễ đọc hơn uppercase character.

– numeral / figure character

Là các ký tự số đếm từ 0 đến 9.

2. SPECIAL CHARACTERS

– Pi character 

• Pi ký tự trong toán học: + % = ÷ –
• Pi ký tự dấu câu: . , : ; ! ” ( ) – 
• Pi ký tự có dấu: å á é ö Ü
• Pi tham chiếu: ® © ™ † §

Trên các máy tính Macintosh, ký tự đặc biệt có thể được xem trong bất kỳ phông chữ với các tiện ích Caps Key dưới apple menu. Trên các máy Windows có thể vào run gõ “charmap” để xem tất cả các ký tự.

– Ligature character 

Chỉ các character kép kết hợp từ các character đơn lẻ (xem thêm: ligature)

 THÀNH PHẦN CẤU TẠO CỦA CHARACTER – TYPE ANATOMY

Typographic character cấu thành bởi một số thành phần cơ bản. Cách đơn giản nhất để phân biệt đặc điểm của các thiết kế khác nhau là so sánh cấu trúc của các thành phần này. Dưới đây là một số quy tắc để xác định các thành phần của một character.

Ascender line: đường kẻ trên

Median: …

Baseline: đường gốc để các character đặt lên.
Descender line: đường kẻ dưới

X- Height: chiều cao của character viết thường tính từ baseline – median.

Cap Height: chiều cao của character viết hoa tính từ baseline – ascender line.

Ascender: phần trên character tính từ đường median – ascender line.

Descender: phần dưới character tính từ đường baseline – descender line.

Bar: hoặc Cross Bar, là các thanh ngang trong các character như H, A, T, e, f, t.

Bowl: đường cong tạo ra các vùng counter kín

Counter: vùng rỗng bên trong character.

Ear : phần tai trên của character g viết thường.

Link: liên kết giữa 2 phần trong 1 character, như ký tự g trên ví dụ.

Loop: phần vòng tương character g trên ví dụ.

Serif: phần phụ kết thúc của stroke tạo ra chân chữ. (font có chân)

Spine: đường cong của character S.

Spur: nét vẩy kết thúc các ký tự a, i, l, u, n, m

Axix / Stress: hướng của các charactor có phần counter.

Stroke: hoặc Stem, là đường viền của character.

Terminal: Phần kết thúc của nét, nhưng không phải là chân serif. (Thường có tại ký tự: a, i, h, n …)

Kerning: khoảng cách giữa các character

Set width: chiều rộng một character

Bracket:: phần cong nhỏ thêm vào ở các góc vuông

Contrast: độ tương phản dày mỏng trong 1 character (ký tự)

KẾT

Giờ thì bạn có thể so sánh và đánh giá mức độ chi tiết của từng font chữ rồi nhé. Có một điều lưu ý nhỏ là tên gọi của các thành phần cấu tạo của các character có thể thay đổi, ở một số vùng khác nhau có thể có các tên gọi khác nhau.

[XEM THÊM]

PHẦN 1 – CỘI NGUỒN CON CHỮ

PHẦN 3 – TYPE, FACE, FONT… VÀ GÌ NỮA?

PHẦN 4 – CÁC HỌ CƠ BẢN CỦA TYPE-FACE

Bạn thân mến, bạn có biết Typography là một từ ghép giữa 2 từ “typo & graphy“, nó được định nghĩa như là một nghệ thuật sử dụng các con chữ. Có một vài đầu sách đưa ra các định nghĩa khác tuy nhiên nhìn chung đều mô tả về sự kết hợp, sắp đặt và sử dụng khéo léo các thành phần con chữ để tạo nên một thiết kế nhằm truyền tải thông điệp và ý đồ của người thiết kế tới người xem.

Kết hợp các kiểu chữ cho phù hợp là một nghệ thuật. Thật vậy vẻ đẹp của kiểu chữ là không biên giới. Trong khi không có những quy tắc tuyệt đối để tuân theo, điều quan trọng bạn cần hiểu và thực hành tốt để kết hợp chúng khi thiết kế.

Khi được sử dụng nhiều và cẩn thận, những nguyên tắc này luôn mang lại hiệu quả phù hợp. Bài này sẽ xem xét một số cách thực hành tốt nhất cho việc kết hợp kiểu chữ – cũng như những sai lầm bạn có thể tránh gặp phải.

* KẾT HỢP MỘT SANS SERIF VỚI MỘT SERIF

Đây là nguyên tắc phổ biến nhất để tạo ra sự kết hợp kiểu chữ. Phối hợp chữ Sans Serif ở phần đầu và một kiểu chữ Serif ở phần sau. Sự kết hợp này có từ rất lâu nhưng nó vẫn vô cùng tuyệt.

* TRÁNH DÙNG LOẠI TƯƠNG TỰ

Kiểu của cùng phân loại, nhưng từ những family typeface khác nhau, sẽ tạo ra sự bất hòa hợp. Cá tính riêng của biệt của chúng không kết hợp tốt với nhau, tạo ra sự rối rắm trong typographic.

Trong ví dụ đầu tiên bên trái chúng ta có một tiêu đề với Clarondon Bold, loại có chân lớn. Phần nội dung của hình bên trái là Oficina Serif cũng có chân lớn. Kiểu chữ Serif đậm được biết tới đặc tính của riêng chúng, và chúng muốn thống trị một mình trong khu vực được sử dụng. Đưa cả hai serif chân chữ lớn với nhau tạo ra sự căng thẳng không cần thiết.

Bây giờ nhìn ví dụ bên phải. Tiêu đề Bold Clarendon ghép với New Baskerville. New Baskerville là một serif linh hoạt chuyển tiếp với glyphs (yếu tố tạo nên chữ) rộng phù hợp với Clarendon Bold. Đồng thời nó hạ thấp phần lưng nên cho phép Clarendon có tất cả tính cách nó muốn.

Sự kết hợp như vậy khá độc đáo. Chọn các kiểu chữ từ những phân loại khác nhau giúp tránh những căng thẳng không cần thiết trong thiết kiểu chữ của bạn.

* CHỈ ĐỊNH VAI TRÒ RIÊNG BIỆT

Một trong những cách dễ dàng để kết hợp nhiều font chữ từ một số kiểu chữ là xây dựng một quy luật cơ bản dựa trên vai cho cho mỗi chữ hoặc kiểu chữ. Trong ví dụ tiếp theo, chúng tôi đã sử dụng Akzidenz Brotesk Bold viết hoa trong phần tên tác giả ở đầu trang,

Sau đó chúng tôi sử dụng Rockwell bold cho tiêu đề bài viết, và phần giới thiệu là kiểu chữ Bemboo với kích thước khác nhau. Cuối cùng tiêu đề cấp độ 2 là Akzidenz Grotesk Medium.

Chúng tôi đã chỉ định Rockwell cho tiêu đề gây chú ý. Chúng không giống như Sans Serif cho tiêu đề và Serif cho phần thân bài như chúng ta đã thảo luận trước đó. Nhưng trong sự lựa chọn này, chúng ta có sự thay đổi lớn về kích thước, độ đậm và chức năng của từng phông chữ được sử dụng.

Tất cả trong tất cả, có 4 font chữ trong 3 kiểu chữ được sử dụng, nhưng tất cả đều gắn kết vì mỗi chức năng giao cho 1 font được cố định, phân cấp rõ ràng.

Đơn giản để hiểu kiểu chữ (typeface) là những gì bạn thấy như: Kiểu chữ có chân, không chân, có chân lớn, cao, lùn, viết tay v.v. Còn Font là những tên gọi như font Arial Bold, Arial Narrow, Verdana, Futura LTd, Futura Bold v.v…

* TƯƠNG PHẢN VỀ ĐỘ ĐẬM MỎNG

Hãy tạo sự khác biệt về độ đậm để giúp người đọc phân biệt và đi theo thiết kế của bạn.

Trong ví dụ bên trái, chúng ta có một sự tương phản không tồi, nhưng rõ ràng chưa đủ “đô” để tạo sự tương phản tốt. Với Myriad Light đặt tiêu đề và nội dung là Minion Bold, chúng có xu hướng đi ngược lại đòi hỏi người đọc chú ý tiêu đề trước.

Bên phải chúng ta có Black Myriad ở trên Minion Medium. Nó có vẻ quá tương phản nhưng rõ ràng người đọc biết cần biết cái gì cần đọc đầu tiên.

* TẠO SỰ PHÂN BIỆT TRONG TYPOGRAPHIC

Sự phân biệt trong Typographic là hiệu ứng kết hợp các biến thể của độ đậm, kích thước, bề dày nét, kerning, căn hàng, và một số yếu tố khác.

Một cách dễ dàng để nhìn thấy sự phân biệt của typography là nheo mắt cho đến khi bạn không thể nhìn rõ chữ, nhưng vấn có thể thấy lờ mờ các văn bản để xem tổng thể.

Nếu bạn nheo mắt để nhìn vào các ví dụ dưới. Bạn sẽ thấy cách bố trí bên trái khiến văn bản hòa vào nhau. Trong khi cách bố trí bên phải có sự phân biệt từng khu vực dù ta đã nheo mắt khi nhìn nó.

Không nên có sự nhầm lẫn giữa tiêu đề, nơi mắt bạn đi tiếp tới các phần khác. Sử dụng thông minh về sự phân biệt, phân cấp trong hình ảnh của trang giúp bạn thể hiện rõ thông điệp của mình.

 * KHÔNG KẾT HỢP NHIỀU LOẠI TÍNH CÁCH CỦA FONT

Một điều sai lầm thường bị bỏ qua trong typography là không nhận ra tính cách, tâm trạng của từng kiểu chữ. Kiểu chữ có tính cách của riêng nó. Chúng thay đổi mức độ ngữ cảnh, dù không nhiều.

Đó vấn đề về kết hợp cá tính của kiểu chữ cho một công việc cụ thể, nhưng đó cũng là vấn đề khi chọn 2 loại font kết hợp.

Trong ví dụ bên trái. Chúng tôi để Franklin Gothic Bold kết hợp với Souvenir. Franklin Gothic đem lại cảm giác vững chắc mạnh mẽ, nhưng cũng đem lại cảm giác sang trọng tinh tế. Nó không dễ thương nhưng hiệu quả. Mặt khác Souvenir vui tươi, giản dị, đẹp đẽ.

Hai kiểu chữ đi với nhau giống như anh lính bảo vệ tòa lâu đài bên cạnh một cô bé đang chơi đùa dưới chân mình nhằm khiến anh ta mỉm cười. Sự kết hợp tâm trạng như vậy rõ ràng không tốt. Kết hợp hai tâm trạng của kiểu chữ khiến người đọc chú ý tới kiểu chữ thay vì tìm một thông điệp của nội dung.

Bên phải, chúng tôi chọn cho Souvenir một người bạn phù hợp hơn. Futura Bold có nhiều tính cách, nó sẵn sàng phù hợp với Souvenir cho một số lý do. Trước tiên cả hai kiểu chữ có chiều cao tương tự, có những glyphs (những nét tạo thành chữ) dạng tròn.

Hai kiểu chữ bổ trợ lẫn nhau, trong ví dụ này chúng tạo ra một niềm vui và tâm trạng lạc quan, không căng thẳng.

Bên phải chúng tôi đã thay Antique Olive Nord bằng Antique Olive Bold đỡ cục mịch. Còn Garamond Narrow được thay bằng một font nào đó đậm hơn – sau khi xem xét thì chúng tôi sử dụng Chaparral. 

Chaparral có chiều cao lớn hơn Garamond, về tổng thể nó hiện đại và trung tính hơn để chống lại sự hiện diện đầy cá nhân của Antique Olive Bold.

*SỬ DỤNG KÍCH CỠ KHÁC NHAU

Chúng tôi liệt kê nguyên tắc đơn giản cuối cùng: Sử dụng kích thước khác nhau để tạo sự tương phản nhằm phân biệt. Trong ví dụ bên trái, tiêu đề và nội dung có vẻ hòa với nhau thành một cụm (khi bạn nheo mắt). Trong khi nheo mắt và nhìn qua bên phải bạn thấy có sự khác biệt.

Bên phải chúng ta có hai phông chữ giống nhau, nhưng khác kích cỡ. TheMix Italic để khá lớn, trong khi New Century Schoolbook được giảm đến một kích thước đủ để đọc rõ, hai kích thước có sự tương phản nhưng không quá nhiều hoặc quá ít.

Sử dụng kích thước khác nhau giúp phân biệt các cấp, tăng thêm sự đa dạng của typographic.