Typography là nghệ thuật tìm kiếm và xây dựng mối quan hệ giữa các nguyên tố, từ lớn nhất đến nhỏ nhất và ngược lại. Sau khi đã hiểu các khía cạnh kỹ thuật và thẩm mỹ của việc đánh giá typeface, hãy cùng MangoAds bàn về cách các chi tiết nhỏ trong typography kết hợp với nhau để tạo hệ thống giao tiếp.

Typography thiết lập các cấp bậc, sắp xếp các content theo các đặc tính riêng và theo mối quan hệ giữa chúng với nhau. Bố cục Typography tốt sẽ giúp độc giả dễ dàng lướt nhanh các thông tin và hiểu chúng. Bố cục không logic sẽ khiến content trông như một mê cung và người đọc sẽ không thể hiểu được hết thông tin bạn truyền tải.

Một trong những phương pháp cơ bản để bố cục typography hợp lý là dựa vào các yếu tố: kích thước, khoảng cách, màu sắc, và sự ước lượng. Khi kết hợp cùng nhau, các yếu tố này sẽ tạo ra typography chất lượng giúp truyền tải thông điệp hiệu quả, dễ đọc.

Typography chất lượng cần gì?

Có 2 yếu tố ảnh hưởng đến typography chất lượng hay không, đó là sự tương phản và hệ thống cấp bậc trong hình thức nội dung:

Sự tương phản

Sự tương phản là nguyên lý quan trọng nhất trong thiết kế đồ hoạ, giúp người đọc phân biệt đâu là điểm quan trọng, điều gì liên quan và loại bỏ những chi tiết thừa. Các thông tin như vậy sẽ giúp người dùng có thể điều hướng rất hiệu quả các thông tin trong bản thiết kế.

Không có sự tương phản, mọi thứ trên trang sẽ trông giống nhau về kích thước và tầm quan trọng, bỏ mặc người xem với hai lựa chọn: tiếp tục đọc để giải mã từng mẩu thông tin hoặc thoát ra.

Hình 1. Tưởng phải trong Typography

Hệ thống cấp bậc

Hệ thống cấp bậc được thiết lập bằng cách nhóm các items tương tự nhau; phân cấp bậc cả về mặt ngữ nghĩa (trong phần markup của HTML) và thị giác (trong thiết kế). Ví dụ, trong định dạng mặc định của trình duyệt cho tiêu đề chính, tiêu đề phụ, đoạn văn, bạn sẽ thấy các cấp bậc có sẵn: kích cỡ tiêu đề h1 thì lớn hơn h2 và h3, và chúng khác biệt so với đoạn văn.

Cách tốt nhất để tạo thứ bậc trong hệ thống typography là kiểm tra các thành phần cơ bản trên website trước. Bạn có thể phân nhỏ các thành phần theo nhiều cách khác nhau:

• Dựa vào mặt ngữ nghĩa để chia: headline h1, h2, h3, h4...
• Dựa vào nhiệm vụ từng thành phần (với các typeface siêu nhỏ) để chia ra caption (chú thích) hoặc các đoạn text đặc biệt như block quote

Phân biệt được sự khác nhau căn bản trong từng phần của nội dung sẽ giúp typeface dễ đọc, phù hợp với mục đích của thông điệp.

Lưu ý: Các thứ bậc là một hệ thống, đảm bảo sự thống nhất trong toàn bộ trang. Ví dụ, bạn quyết định tiêu đề chính và phụ luôn có màu đỏ và được in hoa, các câu chú thích (caption) ở định dạng Georgia 12 pixel với màu #666. Một khi đã thiết lập các đặc điểm đó, đừng phá vỡ các quy tắc này với các loại content tương tự. Phá vỡ nguyên tắc sẽ khiến giao diện web trở nên lộn xộn dẫn đến người đọc hoang mang không biết nhóm các nội dung giống nhau như thế nào.

Những yếu tố quan trọng khi phân cấp cho phần chữ viết trong văn bản

Đoạn văn

Đây là nơi người dùng dành nhiều thời gian trải nghiệm, nên designer cần đảm bảo ta đang dùng typeface thích hợp cho nhu cầu đọc kéo dài. Phương pháp cơ bản giúp nâng cao trải nghiệm đọc là chọn một typeface ít tính trang trí, đồng dạng vì chúng hoà vào background và đoạn văn trở thành tiêu điểm chính. Các typeface phù hợp phải đảm bảo các yếu tố sau:

1. Kích thước type

Kích thước font ổn là bao nhiêu? Các kích thước số có thể đánh lừa designer vì không phải lúc nào chúng cũng phản ánh đúng độ lớn của typeface.

Cách tốt nhất để lựa chọn kích thước là cân nhắc đến người đọc và khoảng cách đọc. Với laptop, đa số mọi người sẽ ngồi cách màn hình 45-60cm, khoảng cách này sẽ gần hơn khi họ dùng thiết bị di động, Nói đơn giản, khoảng cách từ mắt người dùng đến thiết bị càng xa, kích thước type phải càng lớn.

Thông thường, kích thước văn bản cho các ấn phẩm–khoảng 10pt (hoặc 13 pixel), trong khi kích cỡ dành cho thiết bị điện tử thường là 16 hoặc 18 pixel (1-1.2 ems).

Trong lựa chọn kích cỡ, bạn cũng nên cân nhắc đơn vị đo lường và cách sử dụng chúng.

• pixel: khi cần hình dung độ lớn cụ thể của chữ
• ems, rems (root em, có giá trị tương đối với các yếu tố html),
• percentage: kích thước tương đối giúp bạn điều chỉnh tốt hơn với một dải thiết bị và viewport rộng lớn. Bạn vẫn có thể dùng pixel khi các yếu tố đòi hỏi một kích thước nhất định.

Hình 2. Type size trong typography 2. Độ dài và khoảng cách dòng

Độ dài của 1 dòng trong văn bản thường phụ thuộc vào font, cỡ chữ, dao động từ 45-75 ký tự, tối đa là 80. Giới hạn này được đưa ra dựa trên hoạt động vật lý của mắt khi phải di chuyển từ cuối dòng này đến đầu dòng kia. Nếu các dòng chứa quá nhiều ký tự, mắt người đọc sẽ khó đọc lướt được.

Trong trường hợp muốn tăng độ dài của dòng, bạn cần tăng khoảng cách giữa các dòng (line-height). Tăng khoảng cách sẽ tạo không gian để mắt người đọc di chuyển dễ dàng hơn trong hành trình khám phá văn bản của bạn. Căn chỉnh khoảng cách dòng rất quan trọng trong responsive website. Khoảng cách giữa các dòng nếu quá hẹp sẽ làm đoạn văn chật chội và khó đọc, trong khi nếu khoảng cách quá rộng sẽ khiến mọi thứ trở nên tách biệt và không có sự liên kết.

Một line-height lý tưởng không tồn tại, vì mọi typeface đều khác nhau. Vậy khoảng cách dòng bao nhiêu được coi là vừa đủ? Trước hết, bạn cần cân nhắc đến thiết kế của typeface cũng như typesetting. Mức line-height thông thường là tầm 1.2-1.8.

Lưu ý: Bạn nên bỏ trống đơn vị cho line-height, vì các giá trị có thể trở nên hỗn loạn bởi các lỗi kỹ thuật của thuộc tính cascading trong CSS

Ngoài ra, để chọn trong kích thước chuẩn cho 1 typeface, hãy đọc thử văn bản trong setting đó và đánh giá các ascender và descender của chữ cái có chạm vào nhau hoặc quá gần nhau không? Nhờ đó, bạn có thể tăng, giảm line-height đến khi có khoảng giãn cách phù hợp.

Trong trường hợp tách đoạn, line-height hợp lý là: một dòng trống giữa hai đoạn văn hoặc một indent ở dòng đầu tiên của đoạn mới.

3. Indent và blank line

Có nhiều cách để nhận biết một đoạn văn mới, từ các dòng đầu tiên viết sát lề đến sự xuất hiện của các dấu văn bản thực thụ (¶), gọi là pilcrow. Trên web, các phương pháp quen thuộc là sử dụng blank line (dòng trống) giữa các đoạn hoặc indent (thụt lề) ở dòng đầu tiên.

Không có nguyên tắc cụ thể về việc đánh dấu một đoạn văn mới, tùy vào sở thích cá nhân hoặc house style, các designer nên chọn 1 phương pháp hợp lý và đảm bảo đặc điểm này được duy trì trong tất cả các nội dung trên web.

Nếu sử dụng blank line, hãy đảm bảo bạn set cùng kích thước với type hoặc nhỏ hơn một chút. Với các indent ở dòng đầu tiên, làm chúng cỡ 1 em. Khoảng cách này giúp các đoạn văn trở nên rõ ràng và tách biệt nhau.

Headline (Tiêu đề)

1. Các tiêu đề thông thường

Headline là yếu tố thu hút sự chú ý của người đọc. Mọi người sẽ lướt qua headline của bạn và quyết định xem có nên tiếp tục đọc hay không. Headline có nhiều dạng, từ tiêu đề chính (heading) và tiêu đề phụ (subheading) của bài báo, đến tagline trong marketing...

Headline ký hiệu dòng mở đầu cho một văn bản. Nó điều hướng người đọc và là cơ hội đầu tiên để bạn gây ấn tượng. Các headline thường được ấn định cỡ chữ to, khoảng cách, sự căn chỉnh, hoặc màu sắc khác biệt với những text thông thường. Một headline nhỏ có thể ảnh hưởng đến hệ thống cấp bậc và làm giảm độ hiệu ứng thị giác.

Headline thường được set ở tỉ lệ lớn hơn so với phần body text. MangoAds khuyên bạn hãy dùng các phép tính đơn giản, nhân đôi hoặc nhân ba kích thước body text để tìm kích thước headline khả thi. Ví dụ: Bạn thử kích thước ở body text là 12 pixel, vậy kích cỡ cho headline sẽ khoảng 32 pixel.

Khi đã có kích thước gốc cho headline, bạn có thể thiết lập mối quan hệ giữa heading và subheading. Việc phân cấp bậc cho các tiêu đề giúp người đọc đoán được vai trò của từng phần trong nội dung. Do đó, thiết kế nên củng cố các vai trò, bắt đầu từ các thẻ h1 rồi đến h2, h3... Sự tương phản giữa các thẻ heading với nhau, giữa heading và text thông thường nhằm tạo cấp bậc thị giác và xây dựng hệ thống typography trong các thiết kế web, giúp cấu trúc web đa dạng hơn.

Một khi đã hiểu được mối quan hệ cơ bản giữa các thẻ tiêu đề, bạn nên cân nhắc chọn typeface hỗ trợ phù hợp.

Ví dụ: Trong một trang tin tức, bạn cần lựa chọn typeface giúp giải quyết vấn đề: các headline có độ dài đa dạng, nhiều dấu câu hoặc các ký tự có dấu, những đoạn text được trích dẫn… Trong trường hợp này, typeface dạng condensed sẽ là lựa chọn tốt, vì bạn có thể thêm nhiều ký tự vào mỗi hàng và tránh sự ngắt dòng ngượng nghịu.

2. Big type

Hình 3. Ví dụ về Big tyoe

Big type là một loại headline nhưng có thể không nằm ở đầu bài viết. Big type thường xuất hiện ở các homepage và splash page (thường dùng trong wifi marketing, là trang thông tin người dùng thấy đầu tiên khi đăng nhập wifi).

Dạng Big type có tác dụng tạo được điểm nhấn hoặc gợi tâm trạng, thường sử dụng trên poster phim hoặc bìa sách.

Với responsive design (thiết kế đáp ứng), hãy tinh chỉnh kích thước type và ngắt dòng để giữ headline ngay ngắn trong mọi màn hình. MangoAds gợi ý 3 giải pháp giúp bạn tinh chỉnh typeface phù hợp với mọi màn hình: plug-in jQuery của FitText; Lettering của Paravel và Font-to-Width của Nick Sherman và Chris Lewis.

• FitText cho phép kích thước type của một nguyên tố trên page tăng hoặc giảm tuỳ thuộc vào loại màn hình. Do đó, type của bạn sẽ luôn lấp hết không gian chiều rộng dù đang hiển thị trên các màn hình khác nhau. Tính năng này cực kỳ hữu dụng khi bạn cần headline to và được hiển thị đầy đủ.
• Font-to-Width được xây dựng trên các concept tương tự, nhưng tận dụng lợi thế của các type family lớn bằng cách cho phép bạn chỉ định một font khác để lấp chiều rộng màn hình thay vì đổi kích thước type.
• Lettering làm việc với từng con chữ đơn lẻ và cho bạn quyền truy cập chúng với CSS. Ở đây, designer có thể điều chỉnh nhanh với kerning (khoảng cách giữa các chữ riêng lẻ), màu sắc...

Kết luận

Bài viết đã cung cấp cho người đọc những yếu tố quyết định một typeface chất lượng và những điểm quan trọng cần lưu ý khi phân cấp cho phần thông tin chữ viết trong bài viết. Ở phần tiếp theo, chúng ta sẽ nghiên cứu những yếu tố quan trọng khi thiết kế typography.