Typography cơ bản · phân cấp thông tin cho chữ

Những ai làm việc với web chắc hẳn đã quá quen thuộc với cách phân cấp thông tin bằng việc sử dụng các tag như <h1> va <em>, tuy nhiên nếu sử dụng như vậy thì tính thẩm mỹ nằm ở đâu trên một web với khối lượng nội dung chữ viết lớn. Chính vì vậy, chúng ta phải hiểu rõ hơn về phân cấp thông tin cho chữ viết. Chỉ khi hiểu được về hệ thống phân cấp, chúng ta mới có thể tạo ra các mẫu thiết kế đẹp, sâu sắc và có khả năng giao tiếp cao hơn với người xem trên trang web của mình.

Dưới đây cùng tìm hiểu vấn đề này bằng cách xây dựng một hệ thống phân cấp ở mức phức tạp cao bằng cách từng bước sử dụng thêm các yếu tố thị giác mới nhé ^^

Đầu tiên, chúng ta cùng bắt đầu với một đoạn nội dung chữ chưa được xử lý bởi bất kỳ yếu tố phân cấp thông tin nào mà chỉ sử dụng hoàn toàn bằng 1 loại typeface với 1 độ lớn và độ dầy chữ duy nhất. Điều duy nhất truyền đạt cho người xem về cấp thông tin là thứ tự sắp xếp các nội dung. Dù không có tính ứng dụng trong thiết kế thực tế nhưng đây là một khơi đầu rất thích hợp cho thiết kế của bạn.

Tiếp theo, chúng ta bắt đầu làm rõ thông tin bằng cách sắp xếp các thông tin theo nhóm. Và một lần nữa tiếp tục thiết lập lại hệ thống cấp bậc theo thứ tự trình bày văn bản.

Sau đó, thay đổi độ dày chữ để nhấn mạnh phần thông tin quan trọng hơn. Hãy lưu ý nhé, khi có sự xuất hiện của yếu tố phân cấp thứ 2, ta không cần thiết phải sắp xếp văn bản theo thứ tự quan trọng từ trên xuống dưới. Như hình phía trên, “Chia sẻ về thiết kế chữ” và các chữ liên quan được đẩy lên đầu để thể hiện nội dung bao trùm cho toàn bộ phần văn bản phía dưới, tuy nhiên, cụm từ này lại không phải là cụm từ quan trọng nhất.

Tiếp, chúng ta tiếp tục thêm yếu tố kích thước vào hệ thống chữ. Việc tăng kích thước chỉ cho người xem thấy phải bắt đầu đọc từ đâu. Tăng khoảng cách các phần để tạo thêm kết cấu cho tổng thể.

Bây giờ thì đẩy thêm vào phần căn lề và khoảng cách, đồng thời đa dạng hoá hệ thống kích thước và độ dày của chữ. Mục đích của việc này là giúp tăng tương phản: nhấn mạnh vào phần văn bản quan trọng nhất và làm giảm sự quan trọng của các nội dung kém quan trọng hơn bằng yếu tố kích thước và độ dày chữ.

Tiếp theo thêm một chút màu sắc để dẫn dắt thị giác. Trong hình phía trên, các yếu tố đồ hoạ (như đường nét và hình khối) cũng được thêm vào để nhấn mạnh các khối nội dung. Nhìn chung, các luật áp dụng cho chữ như kích thước và độ dày cũng áp dụng được cho các yếu tố đồ hoạ này. Đồng thời, cân bằng lại tổng thể bằng cách tạo hướng nhấn cho thị giác (hướng trái so với hướng phải) và điểm nhấn bởi các yếu tố bị cắt ở cạnh giấy.

Kết quả tổng thể chung tạo ra hiệu ứng dẫn mắt người xem vào con chữ, sau đó theo logic đến các yếu tố gần đó và chuyển các khu vực khác nhau theo sự dẫn dắt của các yếu tố màu sắc rải rác trong bố cục chung.

Trong thực tế, phân cấp thông tin một cách phù hợp phải được áp dụng từ cấp độ nhỏ (trong từng khu vực, phần tử nhỏ hơn trong khổ thiết kế) và cấp độ lớn (toàn bộ khổ thiết kế).