Nếu như Grip phân chia không gian, giúp bố cục typography ở mức độ vĩ mô, các nguyên tắc về căn chỉnh trang, sử dụng màu sắc và whitespace (khoảng trắng) mà những điều chỉnh ở mức độ nhỏ nhưng vô cùng quan trong. Cùng MangoAds khám phá giá trị của các nguyên tắc này mang lại cho typography ở bài viết dưới đây!

Nguyên tắc vàng trong bố cục typography cho page

Căn chỉnh và các từ nối

Căn chỉnh là một trong những điều designer buộc phải làm khi gặp trường hợp đoạn văn quá dài buộc phải xuống dòng có bốn loại căn chỉnh cơ bản: trái, phải, giữa và căn đều.

• Trái, phải, giữa là vị trí văn bản được căn chỉnh và những kiểu này tạo kết cấu đoạn văn với các góc văn bản nằm không đồng đều.
• Văn bản căn đều được căn ở cả bên trái và phải của vật chứa bằng cách tăng hoặc nén khoảng cách của từng dòng.

Các văn bản trong tạp chí và sách đều được căn đều và luôn bổ sung các từ nối, nhằm tạo tính hài hòa, sử dụng hiệu quả không gian. Việc căn chỉnh và sử dụng từ nối trong website lại phức tạp hơn, do phụ thuộc vào các yếu tố như font và kích thước, dẫn tới việc căn đều có thể cho ra các kết quả không như kỳ vọng.

Bạn có thể sử dụng từ nối thô với CSS:

• webkit-hyphens: auto;
• moz-hyphens: auto;
• hyphens: auto;

Các từ nối của CSS tạo sự cân bằng cho đoạn văn. Nhờ các từ nối này, chúng ta có thể có một đoạn văn được shape gọn gàng ngay cả khi các con chữ phải xuống hàng. Tuy nhiên, trong một vài trường hợp, sử dụng từ nối dẫn đến các khoảng cách lớn giữa các chữ.

Căn đều và từ nối đều là các công cụ hữu hiệu cho việc sắp đặt văn bản, nhưng các designer phải luôn đảm bảo chúng hoạt động ổn với typeface bạn dùng và các setting của nó trong thiết kế.

Màu sắc

Màu sắc của typeface sẽ giúp tạo ra một bức tranh màu tổng thể cho page. Hãy đảm bảo typography nhằm nâng cao cho trải nghiệm của người dùng. Việc lựa chọn và cân chỉnh màu của toàn đoạn text cần đảm bảo sự hài hòa, cân bằng với trang và giao diện site. Trong phần này, MangoAds muốn đề cập đến gray value cho typeface.

Bạn sẽ không muốn gây choáng ngợp cho thiết kế, hay tạo ra quá nhiều sự chú ý cho type, hoặc các đoạn văn dài có độ tương phản cao, lời khuyên MangoAds dành cho bạn là hướng đến gray value trung bình.

Bạn có thể chỉnh sửa các giá trị như line-height để thay đổi màu sắc typography, từ đó tìm ra một màu gray vừa đủ, không quá nhạt cũng không quá đậm. Ví dụ, văn bản được set ở màu xám đậm (ví dụ, mã màu #333) thường sẽ mang lại trải nghiệm độc tốt hơn so với màu đen huyền(với màn hình).

Whitespace (khoảng trắng)

Khoảng trắng hay còn gọi không gian trắng hoặc không gian âm là phần trống trên trang web, không được lấp đầy bằng content hoặc banner. Khoảng trắng tạo không gian để mắt có thể đọc, mà còn tạo một môi trường chào đón độc giả.

Trong thiết kế, typography tốt hay không là nhờ các khoảng trắng giữa các chữ, và chính bản thân từng con chữ. Whitespace đóng khung các content và tạo cấu trúc cho trang. Whitespace là một chi tiết nhỏ nhưng mang đến kết quả lớn. Khoảng trắng chính là khung hình của thiết kế, tạo sự thoải mái trong trải nghiệm đọc của độc giả.

Một trong những khoảng trắng hay được sử dụng trong thiết kế đó là margin (lề). Margin xuất hiện ở giữa hoặc xung quanh các thành phần trên trang, viền của layout. Chúng giúp văn bản trở nên dễ đọc bằng cách phân biệt các nguyên tố với nhau.

Đối với các ấn phẩm, bạn sẽ để ý thấy có nhiều khoảng không ở phía bên ngoài trang hơn là phần bên trong. Khoảng trống lớn này giúp ngón cái giữ cuốn sách mà không che mất văn bản. Đối với màn hình, để giới hạn không gian như ấn phẩm là không cần thiết, xong các designer nên tạo khoảng trống đó để cung cấp không gian thở cho văn bản. Nếu không có một margin hợp lý cho văn bản, các từ ngữ sẽ trông rất chật chội và gây nhức mắt cho người đọc.

MangoAds khuyên bạn nên để 1.5-2 ems phần lề margin xung quanh thân văn bản. Tuỳ thuộc vào kích thước văn bản và vị trí kề cạnh của nó với các yếu tố khác trên trang, bạn sẽ cần nhiều/hoặc ít margin hơn để tạo cảm giác đầy đặn/giảm bớt sự trống trải.

Tỷ lệ và nhịp điệu trong typography

Xây dựng hệ thống cho việc điều chỉnh kích thước và khoảng cách typography tạo ra sự thống nhất trong đội ngũ designer, giúp công việc thiết kế dễ dàng hơn. Để tạo ra một tỷ lệ chuẩn có liên quan và linh hoạt cho việc điều chỉnh kích thước, hãy bắt đầu với các con số có ý nghĩa khác như độ rộng của cột văn bản hoặc độ lớn của type headline. Một tỷ lệ có mục đích nhất định giúp hợp lý hoá và giới hạn các lựa chọn của bạn thành một công thức. Từ đó, ta có thể áp dụng công thức này xuyên suốt thiết kế của mình. Hơn nữa, các tỷ lệ tạo một mối quan hệ ngầm giữa các thành phần thiết kế.

Điều chỉnh kích thước có 2 loại: sử dụng tỷ lệ ước có sẵn và tỷ lệ tùy chỉnh. Tỷ lệ, thường dựa trên các ký hiệu âm nhạc hoặc tỷ lệ vàng (1:1.61803399), được dùng để tạo palette cho các option có thể có với kích thước. Ví dụ, trong dãy Fibonacci, mỗi số là tổng của hai số liền trước: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, và cứ thế tiếp diễn. Vì các con số đã có quan hệ sẵn với nhau, bạn có thể lấy các lựa chọn kích thước nhanh chóng. Ví dụ, bạn có thể set type ở 13px và heading ở 34px. Di chuyển đến các vị trí cao hơn trên thanh tỉ lệ, bạn có thể chọn 987px cho chiều rộng layout, với cột chính ở 610px và sidebar là 377px.

Hoặc nếu không thích áp dụng thang tỷ lệ có sẵn, bạn có thể bắt đầu với một kích thước type gốc rồi áp dụng các thuật toán để tạo ra một tỷ lệ tùy chỉnh của cá nhân. Giả dụ type và các đoạn văn trong thiết kế của bạn đọc được thoải mải nhất ở 18 pixel khi set typeface Chaparral. Dùng cùng tỷ lệ bên trên (1:1.61803399), tỷ lệ kết quả sẽ là 6.876, 11.125, 18, 29.124, 47.123...

Typography không phải lúc nào cũng là về con số, tìm điểm chung về typography giữa các trình duyệt có thể rất khó. Bởi các typeface cùng kích thước không phải lúc nào cũng chiếm cùng một khoảng trống. Chúng không phải các nguyên tố cố định, mỗi typeface cần được cân nhắc riêng trong ngữ cảnh của thiết kế. Tuy độ sắc nét của con số trông có vẻ hấp dẫn, điều quan trọng trong typography là cách một thiết kế đọc và cảm giác như thế nào.

Sử dụng các tỷ lệ là điểm bắt đầu tuyệt vời, nhưng không phải là nơi bạn hoàn thành mọi việc. Chìa khoá của thiết kế chính là biết khi nào cần rẽ hướng. Bạn nên đánh giá type trong bối cảnh. Các kết quả về mặt visual là thứ quan trọng cần điều chỉnh, và chúng có ý nghĩa hơn vài con số. Bởi, độc giả sẽ thấy văn bản và các mối quan hệ thay vì những phép toán tạo nên chúng.

Lời kết

Mọi điều trong thiết kế typography đều được liên kết, các yếu tố nhỏ xây dựng nên một kết cấu lớn và ngược lại. Mối quan hệ chúng chia sẻ có thể được tiếp cận từ nhiều góc độ khác nhau, nhưng đều có sự gắn bó chặt chẽ. Am hiểu các mối quan hệ này sẽ giúp bạn hiểu sâu hơn về typography và cách điều chỉnh các biến thể ảnh hưởng đến chúng. Các type thành công sẽ luôn thiên về về tính thẩm mỹ của thiết kế và cách thức bạn truyền tải thông điệp. Nếu đã làm được cả hai điều trên, MangoAds xin chúc mừng, bạn đã thành công.