Typography là thuật ngữ quen thuộc trong giới designer, được coi là một môn nghệ thuật làm việc với những con chữ. Vậy bản chất của Typography là gì, có ảnh hưởng ra sao trong lĩnh vực thiết kế web. Các bạn hãy cùng MangoAds tìm hiểu trong bài viết dưới đây!

Bản chất của Typography

Typography là gì?

Typography là cách thiết kế và bố cục các chữ cái giúp tạo hiệu ứng thị giác độc đáo mà vẫn giữ được tinh thần của nội dung muốn truyền tải. Typography xuất hiện ở nhiều nơi: báo, tạp chí, các biển hiệu ở tàu điện và đường cao tốc, email, website, trên các giao diện, bao bì sản phẩm…

Typography không tuân theo một nguyên tắc, hay quy luật cụ thể nào. Designer luôn sáng tạo những kiểu chữ, phong cách trình bày độc đáo: type với kích thước vừa đủ để đọc, nhiều whitespace, typeface đẹp mắt và vẻ ngoài hấp dẫn, nhưng họ không thể lường trước được sự thay đổi của môi trường và thiết bị. Học typography là một quá trình giúp bạn trở nên linh hoạt hơn để đưa ra lựa chọn phù hợp nhất trong mỗi trường hợp.

Hình 1. Kiểu chữ Bell Centennial trong danh bạ

Tầm quan trọng của Typography

Trong kỷ nguyên số, nội dung được coi là vấn đề trọng tâm, những người hoạt động trong lĩnh vực sáng tạo luôn tìm mọi hình thức để thông tin của mình thu hút được đọc giả. Typography trở thành công cụ hiệu quả và đang được chú trọng đầu tư. Typography là phương tiện chính của designer trong việc truyền tải thông điệp. Thiết kế và trình bày con chữ giúp hình thức của nội dung trở nên mới mẻ, hấp dẫn, mang tính thương mại cao, dễ dàng thu hút sự chú ý và tương tác của người dùng.

Cùng một thông điệp, nhưng qua những kiểu chữ, cách sắp xếp khác nhau sẽ tạo hiệu ứng khác biệt đối với người dùng. Cũng như âm nhạc, các nghệ sĩ khác nhau biểu diễn cùng một bài hát sẽ tạo ra một cách cảm nhận riêng cho thính giả.

Thiết kế Typography cần gì?

Typography được coi là môn nghệ thuật với những con chữ. Nhưng khác với bức tranh, bài hát, và các sản phẩm sáng tạo, type là một phương tiện truyền thải thông điệp, không phải là đích đến cuối cùng của tác phẩm. Typography tốt là một typography “vô hình”, giúp người đọc, xem nắm bắt được trọn vẹn thông điệp ẩn chứa trong đó. Đồng nghĩa, khi người đọc chú ý đến type, bạn đang làm công việc typography thất bại.

Hiểu ngôn ngữ typography

Trong công cuộc tìm hiểu về typography cho trang web hoặc bất kỳ ngữ cảnh nào khác, designer cần trang bị cho bản thân những kiến thức căn bản, những thuật ngữ hay sử dụng trong lĩnh vực này. Dưới đây, MangoAds sẽ liệt kê những thuật ngữ thường gặp trong typography:

• Font Serif: Phông chữ có chân ở các phần chính của chữ cái. Phông chữ này thường được sử dụng trong ấn phẩm như tạp chí, báo giấy.
• Kerning: giãn cách giữa các chữ cái với nhau
• Leading: giãn cách giữa các dòng
• Tracking: giãn cách giữa các chữ cái trong cùng 1 từ
• Hierarchy: dóng hàng, cột văn bản
• Slant: độ nghiêng
• Width: độ rộng
• Alignment: so các hàng chữ
• Counter: phần rỗng bên trong chữ cái

Trở nên thành thạo typography khiến bạn trở thành một phần của quá trình thiết kế. Để phát triển độ nhạy và linh hoạt với typography, hãy bắt đầu bằng việc học ngôn ngữ type. Điều này sẽ đưa typography của bạn từ vài con chữ trên trang lên một tầm cao mới. Thuần thục các nguyên tắc cơ bản, hoặc những phương pháp linh hoạt trong các ngữ cảnh, biến chúng thành kiến thức của bạn để có thể tự bước đi trên con đường của mình.

Không ngừng sáng tạo

Việc tạo ra Typography tuy đơn giản nhưng thiết kế đẹp lại rất khó. Yếu tố đầu tiên các designer cần phải lưu ý chính là sáng tạo typeface (kiểu chữ) thích hợp. Designer không thể sử dụng hết tất cả các typeface trong cả chặng đường thiết kế của mình. Câu hỏi đặt ra, số lượng typeface nhiều như vậy, tại sao designer phải liên tục sáng tạo font mới?

Giống như quần áo chúng ta mặc hay xe chúng ta chạy, typeface đại diện cho thời gian, địa điểm và văn hoá tại thời điểm designer sáng tạo ra. Khi thế giới và công nghệ thay đổi, phương tiện giao tiếp cũng phát triển theo dẫn đến sự cần thiết phải có những typeface mới. Các typeface là sự bổ sung cần thiết để theo kịp xu hướng của thời đại.

Ví dụ: Designer Matthew Carter thiết kế kiểu chữ Bell Centennial dùng để in danh bạ điện thoại trong thập niên 1970. Bell Centennial có đặc tính đặc trưng là bẫy mực (những đoạn mấp mô giữa đường giao nhau của các nét chính để cho mực có chỗ lan khi nó khô). Do thời điểm đó, danh bạ điện thoại được in trên giấy báo rẻ tiền, khiến mực bị ngấm và lan rộng. Các bẫy mực giúp các chữ cái mở rộng đến hình dạng mong muốn trong quá trình in. Không có chúng, các chữ cái sẽ trở nên hỗn độn, bị bao phủ bởi rất nhiều mực. Bell Centennial là lời giải cho những khó khăn khi in ở tốc độ cao với giấy chất lượng thấp.

Hình 2. Một số mẫu Typography design

Sàng lọc và kế thừa typeface

Bản thân các bộ typeface đã rất phức tạp. Một số bộ chữ chứa cả nghìn glyph (ký tự), mỗi glyph lại chứa nhiều chi tiết nhỏ. Sàng lọc các lựa chọn typeface thích hợp với nội dung là chuyện các designer cần làm.

Dù các typeface mới phù hợp với các tiến bộ kỹ thuật, những bộ chữ cũ lại có giá trị thiết kế. Như một báu vật gia đình được truyền đi qua các thế hệ, chúng tích lũy giá trị lịch sử. Những typeface truyền thống này lưu giữ một khoảnh khắc hoặc gợi cảm xúc chỉ bởi sự hiện diện của chúng. Hơn thế nữa, đây cũng là những mẫu thiết kế nguyên bản, tạo tiền đề cho sự phát triển của những typefaces mới.

Ví dụ: Năm 1990, Designer Matthew Carter thiết kế typeface cho màn hình. Thời điểm này, phông chữ được phác thảo bằng kỹ thuật số, công nghệ vectơ. Verdana và Georgia là các sản phẩm nổi tiếng và vẫn có giá trị trong thời điểm hiện tại cho các các type onscreen. Dựa trên các thuộc tính của màn hình (độ phân giải, khả năng hiển thị…), Verdana và Georgia đều có thiết kế khá cao ráo và khoảng cách giữa các chữ cái là đủ rộng để giúp người dùng dễ đọc.

Những dạng typeface cho web

Chúng ta đang ở giai đoạn mới trong quá trình chuyển giao typography. Cho đến thời điểm gần đây, nếu bạn muốn thêm type vào trang web, bạn chỉ có rất ít lựa chọn.

Phông chữ hệ thống (system font)

Đây là các phông chữ được cài sẵn trên hầu hết mọi máy tính như Times, Verdana, Arial, và Georgia. Ưu điểm của phông chữ hệ thống chính là tốc độ tải nhanh, dễ nhìn, phổ thông, đọc lâu không bị mỏi mắt

Ảnh

Bạn có thể đăng tải typeface dưới dạng ảnh. Điều này sẽ cho phép bạn dùng bất cứ typeface nào trên máy tính. Tuy nhiên, kiểu typeface này bị khoá bên trong hình ảnh (cố định ở các chiều và độ phân giải nhất định).

Phông chữ cho web (@font-face)

Kể từ khi kỹ thuật nhúng font ra đời, giới thiết kế web đã có thể ngay lập tức áp dụng các phông chữ độc đáo, tạo hiệu ứng thị giác cho trang của mình. Kỹ thuật nhúng phông được gọi @font-face rule. Nguyên tắc sẽ tạo ra một font định danh và trỏ tới một file font nào đó lưu trữ trên Internet.

Tất cả các trình duyệt lớn và phổ biến hiện nay đều hỗ trợ quy tắc @font-face của CSS và nguồn cung cấp phông chữ cho website cũng ngày càng đa dạng. Studio thiết kế đồ họa và xưởng font như Typotheque và Hoefler & Co. (trước đó là Hoefler & Frere-Jones) cấp quyền cho các website sử dụng các phông chữ của mình. Các công ty khác như Typekit, Webtype và Fontdeck cung cấp các dịch vụ đăng ký typeface từ nhiều nguồn thiết kế khác nhau. Nhờ đó việc chọn phông chữ cho website chỉ đơn giản là thêm vài dòng code vào file CSS của bạn.

Ví dụ mẫu code để nhúng font:

@font-face {

font-family: MyHelvetica;

src: local("Helvetica Neue Bold"),

local("HelveticaNeue-Bold"),

url(MgOpenModernaBold.ttf);

font-weight:bold;

font-style:bold;

}

Tuy nhiên hạn chế của việc nhúng phông chữ chính là tốc độ tải trang. Do phông chữ phải tải về từ máy chủ và thường có dung lượng lớn nên việc hiển thị phông chữ cần nhiều thời gian. Tuy nhiên, các designer đang tìm cách tinh giản những bộ phông chữ này, giúp nó trở nên nhẹ hơn, mang đến trải nghiệm tốt hơn cho người dùng.

Kết luận

Web typography đã có những bước tiến vượt trội trong thời gian ngắn. Giờ đây, việc sử dụng phông cho web không còn giới hạn ở những phông chữ hệ thống, designer có thể áp dụng các font trực tuyến giúp trang trở nên hấp dẫn hơn. CSS mang đến nhiều quyền kiểm soát để tinh chỉnh typography hơn bao giờ hết. Tất cả những thay đổi này mang ý nghĩa lớn trong việc truyền tải thông điệp một cách rõ ràng hơn. Nhưng với tư cách là người lập trình web chuyên nghiệp, bạn đừng chỉ tập trung vào các khía cạnh kỹ thuật của việc thiết kế web mà cũng cần hiểu các bản chất thị giác của typeface.