Với một designer trong lĩnh vực typography, nắm rõ các kiến thức cơ bản là điều vô cùng quan trọng. Được coi là một yếu tố chủ chốt trong thiết kế typography, typeface là công cụ giúp thông điệp truyền tải đến khán giả bằng hình thức hấp dẫn và trọn vẹn. Vậy, typeface có phải là font, được cấu tạo ra sao và có đặc điểm gì, cùng MangoAds tìm hiểu trong bài chia sẻ dưới đây!
Typeface không phải là font
Nhiều người quan niệm typeface là font, tuy nhiên đây là định nghĩa hoàn toàn sai lầm. Font so với typeface như một bài hát và máy mp3. Typeface là tên cho một thiết kế chữ đầy đủ hay hiểu đơn giản là hệ thống bao gồm nhiều kiểu chữ. Trong khi, font đề cập đến kiểu chữ ở một định dạng cụ thể hoặc cơ chế lưu trữ cho thiết kế đó.
Ví dụ: Helvetica là một typeface. Helvetica.ttf là một font, Helvetica cỡ chữ 14pt là một font.
Typeface có thể được cấu thành từ nhiều file font. Không quan trọng có bao nhiêu tập tin file, vẫn chỉ có một typeface.
Hình 1. Helvetica là một typeface
Quy ước cơ bản của typeface
Typeface vừa là sản phẩm đồng thời cũng là công cụ chuyên dụng để thiết kế typography. Designer có thể sáng tạo một typeface dựa trên sở thích cá nhân hoặc lí do kĩ thuật. Những cảm hứng thiết kế này ảnh hưởng tính visual của typeface như khả năng dễ đọc, sự linh hoạt, tương phản… Nắm vững những kiến thức về các đặc điểm này sẽ giúp bạn tạo sự tự tin khi thiết kế typography và xây dựng được tính liên kết giữa các typeface có cùng đặc điểm.
Dáng chữ
Tất cả các mẫu chữ đều được tạo nên từ nhiều strokes (nét), một thuật ngữ chung chỉ hầu hết các bộ phận của chữ cái. Các typeface có độ dày đa dạng, từ mỏng như sợi tóc đến rất dày, được biết đến với độ tương phản cao.
Các typeface có độ dày nét ổn định được gọi là monoline. Một số nét thì thẳng và dài, như phần stem (đường viền của con chữ) của chữ h hoặc descender (phần đuôi) của chữ p, trong khi số khác thì ngắn và cong, như phần neck (phần cổ của chữ) và ear (phần tai trên của chữ) của chữ g. Vài nét kết thúc bằng serifs (chân của chữ), trong khi những chữ khác như f có thể kết thúc trong dạng tròn như ball terminal (phần kết thúc của nét nhưng không phải là chân chữ) hoặc dạng giọt nước như lachrymal terminal (nét cong như giọt nước ở cuối phần tay chữ). Vài nét bao quanh khoảng trắng tạo thành counter (vùng rỗng bên trong chữ), như phần bên trong chữ o.
Hiểu các từ vựng về type sẽ giúp bạn khám phá lý do vì sao typefaces lại có hình dáng, nó đến từ đâu và khi nào, và mục đích của nó là gì. Hiểu biết nhiều về công cụ nghĩa là bạn được trang bị tốt hơn để đưa ra các quyết định sáng suốt.
Đơn vị đo kích cỡ chữ: em
Các typeface có sự đa dạng về kích thước vật lý và những sự khác nhau đó phụ thuộc vào các đơn vị em. em là một đơn vị đo lường tương đối được sử dụng để đo kích cỡ của font.
Ví dụ: Nếu văn bản của bạn được thiết lập ở 16 pixel, 1 em = 16 pixel.
Tính tương đối của em hữu dụng trong việc tùy chỉnh kích cỡ font với các thiết kế responsive web. Trong khi, nếu sử dụng đơn vị đo lường cố định như pixel, designer buộc phải thiết kế từng typography cho các màn hình, thiết bị khác nhau.
Với em, mỗi ký tự tồn tại trong một hộp gọi là bounding box (nghĩa đen chính là hộp bao bọc). Chiều cao của hộp luôn là 1 em (trong trường hợp này là 16 pixel) nhưng chiều dài có thể thay đổi.
Cùng một văn bản nếu sử dụng 2 định dạng font cùng kích cỡ, bạn sẽ nhận thấy văn bản trở nên nhỏ hơn hoặc lớn hơn. Đó là bởi vì sự khác biệt giữa độ lớn của glyph so với em.
Trong thiết kế web, mỗi font web được lựa chọn sẽ quyết định thời gian người dùng phải đợi để trình duyệt web tải và hiển thị các file font. Một phương pháp phổ biến giữ chân người dùng là hiển thị content ở font mặc định của trình duyệt trước khi chuyển sang font gốc của designer. Hiệu ứng này gọi là FOUT (flash of unstyled text: hiển thị nhanh văn bản chưa được tinh chỉnh).
Nếu font bạn chọn khác biệt lớn về hình dáng hay kích thước so với font mặc định của trình duyệt hoặc font dự phòng của bạn, hiệu ứng FOUT càng nổi bật.
Sự tương phản của typeface
Sự tương phản của typeface là những khác biệt trong độ dày và mỏng của các chữ cái. Các typeface monoline (một đường) có lượng tương phản ít nhất. Ví dụ, Helvetica có độ dày nét cố định. Bạn sẽ thấy sự khác biệt lớn khi so sánh typeface monoline Helvetica với các typeface có độ tương phản cao như Bodoni, vốn có các nét đa dạng từ dày đến mỏng trong kiểu chữ.
Typeface tương phản thấp góp phần tạo nhịp điệu trơn tru, mượt mà cho việc đọc. Hầu hết các typeface dùng cho các văn bản dài có độ tương phản trung bình hoặc thấp, ít tương tác giữa từng chữ và từ. Điều này giúp văn bản có nhịp điệu liền mạch hơn, trong quá trình di chuyển mắt đọc các dòng chữ. Khi không bị xao nhãng bởi các thiết kế nổi bật, mắt bạn sẽ tập trung hơn vào việc đọc.
Các typeface có độ tương phản cao thường được sử dụng ở các headline hoặc nội dung nhỏ, ngắn, vì sự thay đổi liên tục trong độ dày nét chữ trong đoạn văn dài sẽ gây nhức mắt và xao nhãng khi đọc.
Tuy nhiên, quá ít sự tương phản giữa các nét hoặc sự khác biệt giữa các dáng chữ, như Helvetica cũng sẽ không phù hợp cho những đoạn văn dài. Các dáng chữ quá giống nhau, gây khó đọc.
Hình 2. Sự tương phản của typeface
Weight và style (độ dày, mỏng và kiểu dáng)
Weight đề cập đến độ dày, mỏng của nét chữ. Trên web, designer thường sử dụng thuộc tính font-weight của CSS. Thuộc tính chia làm 9 cấp độ dày mỏng của nét chữ với giá trị dao động từ 100 đến 900 (trong đó 100 là mỏng nhất, 900 là dày nhất).
Lưu ý: không phải mọi font đều bao gồm tất cả các weight. Hầu hết các font đặt weight normal (hoặc book) ở mức 400 và bold ở 700. Do mức độ dày mỏng của nét chữ không được ấn định trước, trong quá trình thiết lập typeface cho website các designer nên thử nghiệm và điều chỉnh weight phù hợp.
Về style, các typeface family thường có bốn kiểu dáng cơ bản:
- regular (đôi khi gọi là roman hoặc book),
- italic,
- bold,
- bold italic.
Ngoài ra, font-style cũng phụ thuộc vào weight của chữ. Dựa trên weight, font-style được chia thêm các dáng như very thin và condensed đến very heavy và wide.
Sự đang dạng của style trong bộ typeface sẽ tạo ra độ tương phản tốt trong bố cục typography, đồng thời đảm bảo tính thống nhất về phong cách trong thiết kế web. Bạn có thể dùng nhiều style cho headline, subhead, và thậm chí cả văn bản, và chúng đều có điểm chung xuyên suốt. Thay vì sử dụng nhiều typeface trong thiết kế, lựa chọn một typeface có nhiều style giúp designer thiết lập hệ thống rõ ràng trong khi giữ ngôn ngữ thị giác đơn giản.
Lưu ý: Các designer cần để ý đến số lượng font-style trong một typeface family trên web, vì trình duyệt hay có xu hướng thay thế những style gốc bị thiếu. Khi định dạng văn bản thành bold hoặc italic trong CSS, trình duyệt trước tiên sẽ tìm font phù hợp để render. Nếu không có font đó, trình duyệt sẽ tự tạo style italic hoặc bold bằng cách nghiêng hoặc làm mẫu chữ dày lên từ các font có sẵn (pseudo hoặc faux italic – bold: italic và bold giả). Tuy nhiên, những style này chỉ là một phiên bản được làm nghiêng của dáng chữ normal, thường sẽ xuất hiện các lỗi như:
- Các style italic giả: phần mỏng của chữ cái trông như bị ép lại, và phần counter có vẻ bị biến dạng.
- Với style bold giả, các chữ cái có vẻ hơi lem nhem, mọi nét của chữ cái đều đậm, thay vì tăng độ dày mỏng ở những vùng nhất định như style bold chuẩn.
X-height
X-height là chiều cao của các chữ thường được tính từ baseline (đường gốc để đặt các ký tự) đến midline (đường giữa) của các chữ in.
Chiều cao x-height chỉ là những giá trị tương đối, có thể lớn hay nhỏ tùy thuộc vào ý muốn của designer.
- Typeface có x-height rất thấp thường thể hiện sự sang trọng, tạo nên điểm nhấn giữa các dáng chữ, vì sự tương phản sẽ càng rõ rệt giữa chữ thường và in.
- X-height cao tạo nhiều không gian hơn cho con chữ. Những typeface có x-height cao thường dành cho ấn phẩm và trang web và là yếu tố quan trọng đối với giao diện hoặc điều hướng.
Tuy vậy, x-height cao không phải lúc nào cũng là lựa chọn sáng suốt. X-height càng lớn, việc nhận diện các đặc điểm nổi bật của từng con chữ trở nên khó khăn hơn. Ví dụ, những chữ cái a và d, hoặc n và h sẽ không khác biệt nhiều khi x-height tăng.
Không những thế, x-height cao còn ảnh hưởng đến counter (khoảng không gian bên trong chữ cái) và aperture (độ mở của các con chữ). Typeface với x-height cao thường có counter lớn và sẽ chiếm nhiều không gian trong hộp em hơn.
X-height quá lớn hay quá nhỏ đều ảnh hưởng trực tiếp đến khả năng đọc của người dùng. Cách tốt nhất để xem liệu typeface có đủ các đặc trưng cần thiết không thì hãy thử viết vài dòng và đọc thử. Nếu bạn bị vấp ở vài chữ hoặc tổ hợp các chữ, có lẽ bạn nên tìm typeface khác.
Kết luận
Bài viết đã cung cấp cho bạn đọc khái niệm và những quy ước về typeface. Ở phần tiếp theo, chúng ta sẽ tiếp tục nghiên cứu cấu trúc của một typeface bao gồm những thành phần nào và làm thế nào để lựa chọn một typeface phù hợp.
