10 mẹo hay về kiểu chữ và thiết kế

Hãy thử 10 mẹo sau đây nếu bạn là người mới nhập môn thiết kế nhé!

Kiểu chữ và thiết kế thực tế đã ăn sâu vào cuộc sống của chúng ta. Mỗi khi mà bạn tạo ra hình thu nhỏ cho video Youtube của bạn hay thiết kế một tấm thiệp cưới, bạn đều động chạm tới kiểu chữ. Vậy vì sao không nâng tầm cho việc sử dụng và thiết kế kiểu chữ của bạn. Có một vài ví dụ về kiểu chữ mẫu mực nên chúng ta hãy tận dụng chúng.

  1. Cấp bậc, thứ tự của text trong thiết kế

Hãy thiết lập cấp bậc trực quan để khiến text của bạn có thể đọc lướt được. Hãy trả lời những câu hỏi sau: Phần nào là phần quan trọng nhất? Phần nào của thông điệp nên nổi bật lên? Tôi muốn người đọc đọc text theo thứ tự nào? Bằng cách nào có thể khiến việc này dễ dàng hơn cho người đọc?

Ví dụ về một đoạn text không có cấp bậc, thứ tự

Ví dụ về một đoạn text không có cấp bậc, thứ tự

Chỉ cần điều chỉnh kích thước các thành phần, bạn có thể tạo ra một bản thảo đậm nét và dễ đọc.

Có vô số cách để thiết lập cấp bậc cho text trong tác phẩm của bạn: tương phản, màu sắc, kích cỡ, độ đậm nhạt, cách bố cục.

Ví dụ về một đoạn text có cấp bậc, thứ tự

Ví dụ về một đoạn text có cấp bậc, thứ tự

Ví dụ về một đoạn text với cấp bậc được chia khá ấn tượng

Ví dụ về một đoạn text với cấp bậc được chia khá ấn tượng

  1. Cách kết hợp các font chữ với nhau

Việc ghép đôi các font chữ với nhau cần cả kỹ thuật và nghệ thuật khi thực hiện. Có thể nói độ tương phản giống như keo giữ chúng với nhau. Nếu chúng quá tương tự nhau, sẽ cần khá nhiều cố gắng để phân biệt và điều này không hề dễ chịu cho người đọc.

Ví dụ về việc chọn 2 font chữ quá tương đồng nhau

Ví dụ về việc chọn 2 font chữ quá tương đồng nhau

Sans Serif và Display là những cặp font dễ kết hợp cùng nhau

Sans Serif và Display là những cặp font dễ kết hợp cùng nhau

Một cặp font tốt khác khi chọn 2 font từ nhóm font Oswald với độ đậm nhạt khác nhau

Một cặp font tốt khác khi chọn 2 font từ nhóm font Oswald với độ đậm nhạt khác nhau

Thực ra, mắt chúng ta ghét sự hàm hồ mà thích sự tương phản hơn.

Vậy chúng ta cần làm gì bây giờ?

  1. Hãy tránh xa việc ghép đôi hai font chữ cùng thuộc nhóm Serif. Lựa chọn tốt hơn nhiều là kết hợp 1 font Serif và 1 font Sans Serif.
  2. Hãy cẩn thận với những font chữ với kích thước và độ đậm nhạt như nhau. Việc kết hợp 1 font đậm với 1 font nhạt thì tốt hơn nhiều so với việc 1 font đậm đi kèm 1 font hơi đậm

Một cách khác để tăng độ tương phản giữa cặp font mà bạn chọn chính là tinh chỉnh khoảng cách giữa các kí tự text. Hoặc bạn có thể thử ghép cặp những font hoàn toàn khác nhau, ví dụ như 1 font Sans Serif đi kèm 1 font theo kiểu chữ viết tay chẳng hạn.

  1. Những khoảng trắng

Những thành phần thiết kế đồ họa cũng cần khoảng trống để “thở”. Chia tách những khối chữ bằng việc thêm những khoảng trống (khoảng trắng) giữa chúng. Chú ý margin và tránh xa viền của những hình ảnh nhé!

Những thiết kế vón cục lại thường xấu!

Những thiết kế vón cục lại thường xấu!

Những thành phần thiết kế vón cục với nhau là một trong những lỗi phổ biến nhất khi thiết kế kiểu chữ, vì vậy hãy chú ý tới nó nhé!

Khoảng trắng luôn cần thiết cho thiết kế kiểu chữ

Khoảng trắng luôn cần thiết cho thiết kế kiểu chữ

Một ví dụ khác về tác dụng của khoảng trắng

Một ví dụ khác về tác dụng của khoảng trắng

Một ví dụ khác về khoảng trắng có thể giúp thiết kế của bạn gọn gàng như thế nào

Một ví dụ khác về khoảng trắng có thể giúp thiết kế của bạn gọn gàng như thế nào

Mẹo: chỉ sử dụng nhiều hơn 2 font chữ khi bạn bị bắt buộc làm điều đó.

  1. Căn chỉnh trong thiết kế của bạn

Để tạo ra những thiết kế có text dễ đọc, hãy chắc chắn rằng kí tự text của bạn được căn theo cách hợp lý nhất. Một cách tiếp cận tốt là nhóm các thành phần theo mối quan hệ logic giữa chúng. Một tiêu đề và phụ đề có thể được đặt cùng nhau trong khi những đường link mạng xa hội có thể hợp nhất trong 1 box riêng lẻ.

Những đoạn text như thế này khiến người xem khó chịu khi đọc

Những đoạn text như thế này khiến người xem khó chịu khi đọc

Căn giữa cũng không giúp cho text dễ đọc hơn

Căn giữa cũng không giúp cho text dễ đọc hơn

Một ví dụ cho thấy sự hữu dụng của căn trái

Một ví dụ cho thấy sự hữu dụng của căn trái

Hãy nhất quán trong việc sử dụng căn chỉnh trong thiết kế của bạn. Hãy vẽ ra một phác thảo tưởng tượng và gắn chúng ở trên đầu của thiết kế. Sau đó thì căn những thành phần theo phác thảo đó. Tránh những phần có thể xuyên qua viền ngoài của khung lưới. Căn phần lớn các thành phần dưới dạng căn giữa, căn trái hoặc căn phải.

Hỏi bản thân bạn, Forrest Gump sẽ làm gì? Thường thì giải pháp đơn giản nhất lại là điều bạn nên làm. Đơn giản là cứ căn trái mọi thứ.

Mẹo: Khoảng trắng là một phần thiết yếu cho việc căn chỉnh.

  1. Khả năng đọc

Vai trò quan trọng nhất của kiểu chữ là làm cho nội dung text có thể đọc được chứ không phải để làm cảnh. Vậy, nội dung đọc được có nghĩa là gì?

Một đoạn nội dung dạng text có thể đọc được nếu nó sở hữu những đặc tính sau:

A. Tương phản, nhất là tương phản sáng tối

B. Khoảng cách giữa các kí tự phù hợp

C. Được giãn dòng phù hợp

D. Mặt chữ sạch sẽ, không có những chi tiết rườm rà

E. Có kích thước đủ lớn

F. Nền không có những chi tiết cản trở

G. Đủ không gian trống xung quanh

Nếu người xem không thể đọc được chữ trong thiết kế, bạn có rắc rối rồi đó!

Nếu người xem không thể đọc được chữ trong thiết kế, bạn có rắc rối rồi đó!

Luôn ưu tiên khả năng đọc trước những chi tiết rườm rà

Luôn ưu tiên khả năng đọc trước những chi tiết rườm rà

Ưu tiên cho khả năng đọc bằng mọi giá!

Ưu tiên cho khả năng đọc bằng mọi giá!

  1. Màu sắc

Nếu bạn muốn thành công trong thiết kế kiểu chữ, hãy học những điều cơ bản về màu sắc. Màu bổ sung là gì? Được gì hay mất gì khi sử dụng tuần hoàn 2 màu sắc khác nhau?

Những màu có độ bão hòa cao như thế này có thể khiến người ta khó chịu!

Những màu có độ bão hòa cao như thế này có thể khiến người ta khó chịu!

Có nhiều trang web có thể giúp bạn có thể tăng tốc quá trình học về màu sắc của mình

A. Ví dụ như bạn có thể vào Adobe Color CC, chọn những quy tắc chọn màu bổ sung và nó sẽ cho bạn thấy nó có thể ghép gặp những cặp màu bổ sung hoàn hảo như thế nào. Giống như Teal và Mustard trong ví dụ thứ 2 dưới đây.

Những tương phản từ màu bổ sung – hai màu đối nhau trong bánh xe màu

Những tương phản từ màu bổ sung – hai màu đối nhau trong bánh xe màu

Kết hợp màu hài hòa – sử dụng màu đi kèm liền kề với màu bổ sung

Kết hợp màu hài hòa – sử dụng màu đi kèm liền kề với màu bổ sung

Đơn sắc – các màu được tạo ra từ cùng một màu nhưng với sắc thái khác nhau

Đơn sắc – các màu được tạo ra từ cùng một màu nhưng với sắc thái khác nhau

B. Hoặc bạn có thể truy cập colorhunt.co và chọn từ hàng tỷ các bộ màu được phê duyệt bởi cộng đồng thiết kế.

Mẹo: thường thì sự tương phản sáng tối giữa text và nền là điều khiến cho text có thể đọc được. Tương phản bão hòa màu là sự tương phản mạnh thứ hai. Tương phản sắc thái màu là yếu nhất, đặc biệt là đối với những người bị mù màu.

  1. Sự tương phản

Chúng ta đã nhắc tới sự tương phản. Nó làm cho mọi thứ nổi lên, nó làm hài hòa những font khác nhau và nó khiến cho nội dung dễ chịu khi đọc.

Đối với kiểu chữ, có ít nhất 5 kiểu tương phản khác nhau mà chúng ta cần chú ý, hãy kể tên chúng dưới đây

7.1. Tương phản kích thước

Cách dễ nhất để gây sự chú ý cho một thành phần là làm cho nó lớn hơn trong khi thu nhỏ những thành phần còn lại.

22

7.2. Tương phản nhờ sự đậm nhạt của nét chữ

Nhiều nhóm font như Lato cho phép bạn lựa chọn những font có độ đậm nhạt khác nhau, từ mảnh như sợi tóc đến siêu đậm (có 4 tới 7 khoảng dừng ở giữa).

23

7.3. Sự tương phản màu sắc

Trong kiểu chữ sáng tạo, tương phản màu sắc là bạn đồng hành của người thiết kế. Nó có thể chia thành 3 kiểu nhỏ hơn: tương phản sáng tối, độ bão hòa màu và bởi sắc thái màu.

24

Kiểu đáng chú ý nhất là tương phản sáng tối. Nó khiến cho mọi thứ dễ đọc và ngược lại.

Một kiểu tương phản khác là dựa vào độ bão hòa màu sắc, ví dụ là sự khác nhau giữa màu đỏ hoàng hôn và màu hồng của vỏ tôm chẳng hạn.

Tương phản dựa trên sắc thái màu cho chúng ta biết màu sắc được dùng xa với màu chuẩn như thế nào trên bánh xe trộn màu. Nó không có hiệu quả rõ rệt như tương phản sáng tối.

7.4. Tương phản do khoảng cách kí tư

25

Một cách ít phổ biến để tăng độ tương phản cho text là tinh chỉnh khoảng cách giữa các kĩ tự

7.5. Tương phản do lựa chọn kiểu font

26

Những kiểu font khi được kết hợp cùng nhau cũng mang lại một mức độ tương phản nhất định.

  1. Bố cục, các sắp xếp

Bố cục trong kiểu chữ là cách mà bạn sắp xếp text trên trang hoặc hình ảnh. Đây là một định nghĩa khá rộng đúng không?

Hãy chụp lại chúng. Bạn đang nhìn vào bức ảnh của Gleb này và đo đếm những khả năng khác nhau có thể xảy ra trong tâm trí của mình. Tôi sẽ đặt kí tự này ở đâu? Tôi có muốn nó trôi xung quanh vai trái của Gleb hay không?

Hoặc có thể bạn muốn chỉ sắp xếp chúng trong một text box nào đó chẳng hạn?

Bố cục số 1: text đổ cùng với vai, tạo ra một mối liên hệ về hình ảnh với người mẫu

Bố cục số 1: text đổ cùng với vai, tạo ra một mối liên hệ về hình ảnh với người mẫu

Bố cục số 2: text được chuyển về nền, nhấn mạnh lớp trước của hình ảnh và chiều sâu 3D

Bố cục số 2: text được chuyển về nền, nhấn mạnh lớp trước của hình ảnh và chiều sâu 3D

Bố cục số 3: tạo cảm giác 3D thật hơn!

Bố cục số 3: tạo cảm giác 3D thật hơn!

Đó chính là bố cục. Vì vậy sẽ tốt hơn nếu bạn đảm bảo rằng chúng phù hợp với hình ảnh của bạn theo một cách nào đó.

  1. Tính nhất quán

Giống như bất kì tên mọt sách nào trong ngành nói với bạn, tính nhất quán là vàng. Hãy khiêm tốn và sử dụng không quá 2 font đối với mỗi hình ảnh. Hãy giới hạn những hiệu ứng màu mè như đổ bóng hay chuyển sắc.

Qúa nhiều phong cách khiến thiết kế trông vớ vẩn!

Qúa nhiều phong cách khiến thiết kế trông vớ vẩn!

Gắn chặt với 1 phong cách xuyên suốt thiết kế

Gắn chặt với 1 phong cách xuyên suốt thiết kế

Những giới hạn bản thân đó không ngăn cản sự sáng tạo như bạn nghĩ đâu. Mặt khác, chúng có thể kích thích sự sáng tạo của chúng ta bằng việc bắt chúng ta phải lựa chọn khôn ngoan hơn.

Sử dụng lặp lại và luôn gắn bó với một ngôn ngữ hình ảnh nhất định trong suốt thiết kế để tránh việc xung đột giữa các phong cách với nhau.

Và cuối cùng, giữ thiết kế của bạn càng đơn giản càng tốt!

  1. Những thành phần phụ đi kèm

Khi chuẩn bị kết thúc thiết kế, hãy thêm những chi tiết phụ đi kèm ví dụ như:

A. Nhãn (label)

B. Biểu tượng (icon)

C. Đường kẻ (lines)

D. Những thành phần vẽ tay

E. Những biểu tượng được chỉnh sửa

F. Những thành phần trang trí nhỏ

G. Sử dụng những thành phần minh họa không phải là text để làm thiết kế của bạn sinh động hơn

Thiết kế khi chưa có những chi tiết trang trí đi kèm

Thiết kế khi chưa có những chi tiết trang trí đi kèm

Thiết kế với những chi tiết trang trí linh tinh được thêm vào

Thiết kế với những chi tiết trang trí linh tinh được thêm vào

Nhiều chi tiết trang trí hơn nữa được thêm vào!

Nhiều chi tiết trang trí hơn nữa được thêm vào!

Nguồn: creativeshrimp.com, http://www.dpicenter.edu.vn

Viết phản hồi

Lưu ý: không hỗ trợ HTML!
    Xấu           Tốt
Bài viết liên quan
Cách áp dụng và chọn tỉ lệ trong layout Cách áp dụng và chọn tỉ lệ trong layout 10 mẹo hay về kiểu chữ và thiết kế

Cách áp dụng và chọn tỉ lệ trong layout

(Bài viết được trích từ hocviendpi – Tác giả: hoangngoc374 – K21 ) Thực ra nh..