20+ xu hướng kiểu chữ website cho năm 2022


Bạn muốn cải tiến thiết kế của mình một cách nhanh chóng? Sử dụng các xu hướng kiểu chữ (typography) mới và thú vị có thể là câu trả lời. Các nhà thiết kế đang sử dụng độ đậm nhạt, cutout, gradient và thậm chí thể nghiệm để tạo ra kiểu chữ nổi bật.

Thay đổi kiểu chữ hoặc thay đổi hình ảnh theo phong cách thịnh hành có thể mang lại cho thiết kế một diện mạo mới mà không cần cuộc “đại tu” toàn bộ. Không biết chắc nên bắt đầu từ đâu? Danh sách dưới đây sẽ giúp bạn hình dung ra xu hướng 2022 và có cảm hứng cho việc phải ứng dụng nó vào thiết kế của mình như thế nào. 

 

  • Tiêu đề 2 màu 

 

Two-Color Headlines

Có khá nhiều màu sắc trong các tiêu đề ngày nay. Kiểu thiết kế này dễ dàng thu hút sự chú ý do màu sắc có thể giúp nhấn mạnh một số từ/ cụm từ quan trọng nhất. 

Điều hơi khác một chút về những gì chúng ta đang thấy giờ đây là màu sắc được nhấn nhá dọc một nội dung, thay vì chỉ cố định một từ ở đầu hoặc cuối.

Ấn tượng đẹp là một chuyện, nhưng thách thức là bạn phải đảm bảo tất cả các màu sử dụng đều giúp chữ đọc được dễ dàng, đảm bảo cho việc người nhìn sẽ quét qua và đọc được thông điệp một cách nhanh chóng.

 

 

  • Đặt chữ chạy theo một đường định sẵn

Text on a path

 

Có thể mất một phút để tìm ra xu hướng thiết kế kiểu chữ này. Bạn hãy nhìn phần text hình tròn ở góc dưới cùng bên trái của ví dụ trên (hình tròn màu xanh lá cây) – các chữ cái được tạo trên một đường dẫn để tạo thành một hình tròn.

Có rất nhiều trang web sử dụng kỹ thuật này với văn bản – thường ghép nối nó với hoạt ảnh – để giúp thu hút người dùng xuống trang hoặc khuyến khích một số loại hành động tương tác.

Tạo hình tròn là một dạng đường phổ biến. 

Khi ứng dụng trend này, điều quan trọng là bạn chỉ nên sử dụng ít chữ để không làm rối thông điệp trong hiệu ứng. 

 

 

  • Yếu tố chữ làm background

Background Text Elements

 

Nhà thiết kế hiện nay sẽ dùng tất cả mọi thứ để tạo nên một background có chiều sâu. Typography cũng được ứng dụng như thế. Phần lớn các trường hợp đòi hỏi độ tinh tế nhất định (như bạn có thể thấy ở ví dụ trên)

Thông thường người ta sử dụng các chữ cái hoặc cụm từ với kích thước lớn hơn hẳn để trở thành một phần của background, lựa chọn sao cho có tương đối ít tương phản với màu nền chính. Hiệu ứng này tạo nên một chiều sâu tốt như thể chữ nổi vậy. 

Điều tuyệt vời là nó cho phép bạn nhấn nhá thêm cho từ khóa hay logo trong thiết kế. Thách thức là khi bạn xếp chữ thành nhiều dòng. Khi ấy kích thước và tỉ lệ là những yếu tố vô cùng quan trọng cần xem xét để mọi thứ không bị rối mắt. 

 

  • Sử dụng đường viền chữ

Outline Fonts

Đây quả là một xu hướng lớn. Bạn có thể dễ dàng tìm thấy ở bất kì banner và trang web nào. Mặc dù tùy trường hợp với cách sử dụng đa dạng, có thể chỉ ra một số cách tiếp cận chữ sử dụng viền màu như sau: 

  • Dùng với font San Serif
  • In hoa tất cả chữ cái
  • Đi chung cùng đoạn text được phủ màu
  • Dùng với kích cỡ lớn để làm background

Các lựa chọn đều rất thú vị. Bạn chỉ cần cẩn trọng với việc giữ cho nó dễ đọc. Chữ cái có thể dễ dàng chìm vào hình ảnh và video. Vậy nên hãy quan tâm tới màu sắc, vị trí và độ tương phản. 

Và.. nhớ đừng lạm dụng nó! Font chữ dạng đường viền sẽ hiệu quả với điểm nhấn nhá chứ không phải toàn bộ thông điệp 

 

 

  • In nghiêng

Italics

 

Một xu hướng của năm nay có thể bạn không ngờ tới là In nghiêng. 

Từng một thời gian rất lâu biến mất khỏi những lựa chọn cho thiết kế website, giờ đây In nghiêng đã lợi hại trở lại. Từ ứng dụng trong tiêu đề tới phụ chú, in nghiêng được sử dụng trở lại trong sự đi kèm với dạng typefont khác. 

Kiểu chữ nghiêng thông thường đi kèm với in đậm hoặc gạch chân như ví dụ trên kia để trở nên hiệu quả nhất. 

 

 

  • Các layers “khó đọc” 

 

rumfoo

 

Hai xu hướng typography tới đây bất ngờ đều đi ngược lại với nguyên tắc “dễ đọc” trong thiết kế. Chúng có chút khó đọc hơn. Nhưng điều này lại trở nên chấp nhận được khi toàn bộ thiết kế được lấp bằng khoảng trống rộng rãi và đặc biệt có sự tương tác và chuyển động. 

Trong ví dụ về xu hướng này, các yếu tố chữ với kích cỡ lớn như hình được nằm dưới một layer vật thể ở bên trên. Mặc dù vậy, phần không bị che đi của chữ đủ để gợi ý giúp người đọc có thể đoán biết được phần bị che đi. Vật thể ở bên trên khi ứng dụng vào website cũng được tạo hiệu ứng tương tác để lúc ẩn lúc hiện để lộ ra đoạn chữ.  

Yếu tố cuối cùng giúp mọi thứ trở nên thuyết phục hơn là vì đoạn text này không phải thông tin quan trọng nhất trong tổng thể thiết kế. Đó là tên của brand, thông tin mà bạn có thể thấy trong logo hay URL web, nó sẽ bớt quan trọng đi khi thiết kế đang đi vào chi tiết những gì brand làm. 

 

 

  • Văn bản text hiển thị ngoài màn hình

Text That Goes Off the Screen

 

Theo xu hướng sử dụng layer “khó đọc”, văn bản text chuyển động bên trên hay ra ngoài màn hình. Hiệu ứng này ở khắp mọi nơi và thường đi kèm với một phông chữ quá khổ và chỉ một vài từ cuộn về phía bên trái của màn hình.

Xu hướng kiểu chữ này hoạt động tốt nhất khi không có nhiều chuyển động khác đứng cùng và các từ có thể đọc được chỉ với vài giây xem. Nếu văn bản quá phức tạp, sẽ tiềm ẩn nguy cơ người dùng không thể hiểu được thông điệp nói gì.

Như với ví dụ trước, hãy đảm bảo các thành phần văn bản hỗ trợ cung cấp nhiều thông tin để mọi người biết chính xác thiết kế là gì.

 

 

  • Font chữ thể nghiệm

Experimental Typefaces

Font chữ thể nghiệm trở thành xu hướng phổ biến hiện nay với việc đưa những phong cách cá nhân đa dạng vào thiết kế. Các kiểu cách tân có thể tới bằng nhiều cách: đường viền, hình khối, màu sắc, chuyển động. 

Điều hay ho nhất của xu hướng này là chúng giúp cho font chữ trở thành một thiết kế độc nhất dành riêng cho dự án. 

Nếu bạn muốn thử xem qua một vài dạng font chữ thể nghiệm, hãy thử ghé Typelab.

 

 

  • Serifs (chữ có chân)

serifs

Serifs (font chữ có chân) đã quay trở lại. Từng bị coi là khó để đọc online, giờ đây kiểu chữ với những nét thừa nhỏ trong kí tự đã và đang xuất hiện khắp mọi nơi. 

Và nhân tiện cũng cần nói rằng, việc kết luận chữ có chân khó đọc online sau cũng cũng mới chỉ là một niềm tin chưa được xác thực. 

Nếu như bạn muốn sử dụng chữ có chân cho các dự án web, hãy tìm những phong cách kí tự có đường thân dày, đồng thời chú ý tới khoảng cách dòng khi các kí tự chứa những chữ có móc cao (l, k, d..) và móc thấp (g, j…)

Từ những chữ cái có chân vuông vức, như ví dụ bên trên, tới những chân chữ cách điệu tỉ mỉ hơn, serifs dường như có rất nhiều ứng dụng và sự thu hút, có thể là một cú hích cho outline thiết kế.

 

 

  • Chữ.. “lùn và mập” (low-x heights) 

Short, Fat Fonts (Low X-Heights)

 

Một phong cách chữ khác đang lên xu hướng hiện nay là kiểu chữ có chiều cao thấp và chiều rộng kéo giãn. Kiểu chữ này thường có tất cả các bộ ký tự viết hoa, nhưng khi chúng có các chữ cái viết thường, có thể được xác định bằng chiều cao x thấp.

Kiểu phong cách này có thể là lựa chọn tối ưu khi không có nhiều thông tin chữ trên khổ giấy. Nó cũng phù hợp nhất cho các từ hoặc cụm từ ngắn hơn, do tính dễ đọc.

Phông chữ dẹt và ngắn này thường tạo cho thiết kế cảm giác siêu hiện đại. Chúng gần như mang tính tương lai về phạm vi và thiết kế trong nhiều trường hợp.

 

 

  • Kiểu chữ viết tay

Handwriting Styles

Kiểu đánh dấu Sharpie khá phổ biến trong giới thiết kế trang web khi nói đến kiểu chữ hiển thị. Và có rất nhiều kiểu chữ viết tay để bạn lựa chọn để bạn có được giao diện phù hợp.

Phần lớn xu hướng kiểu chữ viết tay hiện nay tập trung vào các chữ in với các ký tự viết hoa và viết thường với các nét dày, cứng.

Kiểu chữ này cũng có thể bao gồm một số phần tô điểm bổ sung để làm cho một số ký tự nhất định trông đặc biệt hơn. 

 

 

  • Căn lề trái

 

Left Alignment

 

Kiểu chữ căn trái có điểm mạnh là dễ đọc, trang nhã và tạo ra đôi chút bất đối xứng mang màu sắc cổ điển. 

Mẹo sử dụng các chữ căn trái là cần chú ý tới việc tách dòng cũng như kích cỡ sao cho phù hợp. Hãy nghĩ về phần chữ như những yếu tố riêng lẻ. Nhiều dòng chữ và nhiều cụm từ có thể cho lớn hơn phần còn lại. Từ đó điều chỉnh khoảng cách sao cho phù hợp. 

Để có độ thống nhất xuyên suốt thiết kế, hãy cân nhắc gióng các yếu tố khác cũng sang trái. Hãy tạo ra một đường lưới và chọn khoảng trống cũng như vị trí của các yếu tố. 

 

 

  • Chữ không chân (sans serifs) nét tròn

Rounded Sans Serifs

Đây là một xu hướng mà hầu hết mọi người đều có thể sử dụng và nó đơn giản đến mức bạn thậm chí có thể không nhận ra đang sử dụng cho đến khi bắt đầu chủ động để ý. 

Điều tuyệt vời về xu hướng này là nó hoạt động với nhiều thiết kế. Chữ sans tròn là một trong những kiểu chữ dễ đọc nhất. Hầu hết các nhà thiết kế đang sử dụng các phông chữ với các nét đồng nhất từ ​​trung bình đến dày với khoảng cách chữ phù hợp chính là nằm trong xu hướng này. 

Kiểu chữ không chân tròn tập trung vào khả năng đọc hiểu tối ưu. Ngoài ra, ta còn có thể ghép nối chúng với các xu hướng kiểu chữ khác để có không khí hiện đại hơn. Ví dụ trên sử dụng cả sans serifs tròn và văn bản căn trái.

 

 

  • Gradients tinh tế

Subtle Gradients

Các nhà thiết kế dường như chưa bao giờ chán được hiệu ứng gradients (chuyển màu) 

Gradient tinh tế giống như một phương ngữ riêng biệt trong thiết kế chữ và hiện đang là xu hướng năm 2022. 

Điều tuyệt vời ở đây là gradient tinh tế tới nỗi ban đầu có thể bạn sẽ chưa thể phát hiện ra chúng. Chỉ một chút đổi màu nhẹ kéo mắt nhìn qua cái chữ cái. 

Gradients được sử dụng tốt nhất với kiểu chữ dày hơn và để nhấn trọng âm các từ hoặc cụm từ cụ thể.

Hãy cẩn thận đừng lạm dụng nó quá nhiều. Gradient văn bản tốt duy trì độ tương phản nhất quán giữa các từ để không gây lóa khi đọc và để nó nổi bật so với nền.

 

 

  • Kiểu chữ hoạt họa

Animated Typography

 

Một trong những xu hướng thiết kế tổng thể lớn nhất hiện nay là hoạt họa/ chuyển động. Và không có lí do gì nó không được sử dụng cho thiết kế chữ.

Ngày càng nhiều kiểu thiết kế sử dụng các chữ cái chuyển động ngang dọc cao thấp hoặc chuyển động khi di chuột tới. Tất cả kĩ thuật này nhằm đem tới trải nghiệm tương tác tốt hơn cho người dùng. 

Khi tạo hoạt ảnh cho văn bản chữ, điều quan trọng là phải xem xét cách thức và vị trí người dùng sẽ đọc thông tin (một số yếu tố động như video chưa hoạt động tốt trên tất cả các thiết bị di động). Hãy điều chỉnh để ngay cả khi hoạt ảnh không hoạt động bình thường, vẫn có trải nghiệm người dùng đánh giá trong đó thông điệp rõ ràng.

Về vấn đề đó, các hình ảnh động văn bản tốt nhất thường bắt đầu bằng chữ rõ ràng và dễ nhìn. Hoạt ảnh bắt đầu phát sau một khoảng thời gian trì hoãn hoặc như một phần của sự tương tác của người dùng. Điều này có thể làm người dùng thích thú và ngạc nhiên (thậm chí có thể dẫn đến nhiều thời gian trên trang web hơn).

Cân nhắc tốc độ cẩn thận với các hình ảnh động kiểu chữ – nếu văn bản di chuyển quá nhanh, người dùng sẽ bỏ lỡ thông điệp hoàn toàn; nếu văn bản di chuyển quá chậm, người dùng có thể nhấp đi trước khi đọc tất cả nội dung. Nó phải vừa phải. (Kiểm tra người dùng có thể giúp bạn tìm thấy tốc độ lý tưởng.)

 

 

  • Các tiêu đề nhiều chữ

 

Stacked Text Blocks

 

Nhìn chung các kiểu chữ, đặc biệt là tiêu đề đang có xu hướng có kích thước nhỏ hơn một chút, đồng thời có khối lượng thông tin lớn hơn. 

Xu hướng này rất quan trọng vì nó cho thấy sự thay đổi trong tư duy giao tiếp với người dùng, cố gắng có thông điệp đầy đủ hơn, thay vì kỳ vọng rằng một từ sẽ đủ để lôi kéo ai đó tương tác với một thiết kế. Nhiều thông tin được trình bày theo cách trực quan hấp dẫn có thể là giải pháp tốt hơn để thu hút nhiều người dùng hơn.

Cân nhắc chính khi xếp chồng nhiều dòng văn bản là tìm một kiểu chữ có thể đọc được ngay cả khi nhiều chữ cái (hoặc thậm chí khi được sử dụng toàn bộ chữ hoa, đây là một lựa chọn phổ biến), có khoảng cách dòng thích hợp để các dòng được dễ dàng phân biệt và rằng các ngắt trong bản sao là hợp lý. Khi xếp chồng văn bản, nên có một dòng chảy riêng biệt từ dòng này sang dòng khác rõ ràng trong cách đọc các từ và người dùng nên chuyển sang dòng tiếp theo của bản sao trước bất kỳ phần nào khác của thiết kế.

Do những thách thức với việc ngắt dòng mà vẫn cần dễ đọc, khối văn bản chữ thường nằm ở một bên của màn hình để người thiết kế có nhiều quyền kiểm soát hơn. Cấu trúc này cũng có thể tạo ra sự hài hòa giữa một phần tử văn bản và một hình ảnh khác trên màn hình để tạo ra sự cân bằng không đối xứng hấp dẫn khi nhìn vào.

 

 

  • Kiểu chữ màu 

Color Fonts and Type

Trong khi có rất nhiều văn bản màu đen và trắng trong các phong cách tối giản hơn, màu sắc đang quay trở lại. Nhiều nhà thiết kế đang sử dụng kiểu chữ màu sáng với phong cách tối giản, chẳng hạn như Tilted Chair như ở trên. Màu sắc có thể làm tăng thêm sự quan tâm của thị giác và sự nhấn mạnh vào các từ có màu sắc.

Các tùy chọn sáng sủa, chẳng hạn như màu đỏ trong ví dụ, giúp thu hút ánh nhìn và đóng vai trò thúc đẩy tuyệt vời cho tin nhắn, xây dựng bản sắc thương hiệu và thu hút người dùng vào thiết kế.

 

 

  • Kiểu bôi hightlight

Highlighted Type

Đây là một trong những xu hướng khá đem lại ngạc nhiên khi nhìn thấy: nhấn mạnh highlighter vào chữ để tạo điểm nhấn.

Từ hightlight đơn giản để tách các chữ cái khỏi nền đến gạch chân bằng những hightlight chuyển động, có rất nhiều cách để sử dụng xu hướng thiết kế kiểu này. Và mặc dù nghe có vẻ hơi kỳ quặc khi bạn mô tả về nó, nhưng hình ảnh thực tế rất tuyệt vời.

Kỹ thuật này tốt nhất cho những từ mà bạn thực sự muốn người dùng nhìn thấy. Nó cũng hoạt động tốt hơn đối với các khối văn bản ngắn để trở nên nổi bật mà không bị lấn át trong thiết kế.

 

 

  • Cutouts và Overlay

Cutouts and Overlays

 

 

Hiệu ứng phân lớp là một cách tuyệt vời để làm cho một thiết kế trông bớt phẳng hơn. Việc lồng hình ảnh vào layer background của chữ thường giúp thông điệp chữ trở nên rõ ràng hơn. 

Sự lồng ghép này có thể hoạt động vứi cả ảnh, partterns, thậm chí video background. Ta chỉ cần chú ý tránh sử dụng nhiều hiệu ứng quá gây ngợp cho người trải nghiệm. 

 

 

  • Hiệu ứng lớp layer với các yếu tố khác trong thiết kế

 

Layering with Other Elements

 

Trong hầu hết các dự án, chữ và các vật thể thiết kế khác được giữ khá tách biệt. Nhưng ý tưởng đó đã thay đổi khá nhiều gần đây và các nhà thiết kế không ngại cho phép văn bản và các yếu tố khác chồng lên nhau. Kết quả cuối cùng có thể tuyệt vời hơn mong đợi, và thực sự giúp người dùng tập trung vào các từ trên màn hình hơn một chút.

Trong khi các cách sử dụng phổ biến nhất của xu hướng kiểu chữ trong thực tế là yếu tố văn bản chồng lên hình ảnh hoặc khối màu trơn, MJND đã nâng cao nó lên một bậc. Thiết kế này kết hợp người trong hình ảnh với kiểu chữ để nó được cắt ra xung quanh anh ta (giống như người đang đi vào vùng chữ).

 

Đây là một kỹ thuật phát triển từ thiết kế in ấn và có thể tạo ra sản phẩm đẹp. Bí quyết là có hình ảnh phù hợp và duy trì khả năng đọc của từng chữ cái. (Hãy cẩn thận để không tạo ra các từ không theo ý muốn vì thiếu các nét hoặc bộ phận của ký tự.)

 

 

  • Hiệu ứng “Overdone” 

meissl

Xu hướng “Overdone” như minh họa giúp thiết kế có cảm giác hoài cổ và được đặc trưng bởi văn bản và hiệu ứng văn bản ở trên cùng khiến bạn phải đọc từ từ. Phần chữ có thể chứa mọi loại hiệu ứng cùng lúc: từ đường viền, đổ bóng, xếp góc xiên, mờ dần và màu sắc táo bạo… Không có hiệu ứng nào không được cân nhắc.

Và bạn càng có nhiều hiệu ứng, thì càng có nhiều người dùng xem. Phong cách này hoạt động tốt nhất với một sơ đồ thiết kế đơn giản, chẳng hạn như Schnitzel Love, ở trên.

 

Kết luận

 

Với cá nhân tôi, nghiên cứu tìm hiểu xu hướng kiểu chữ là một trong những điều tôi yêu thích nhất. Chữ là một phần thiết yếu của tất cả các thiết kế.

Xu hướng kiểu chữ yêu thích của tôi là những xu hướng vượt qua ranh giới của những gì phổ biến nhưng vẫn duy trì khả năng đọc. Còn bạn, kiểu chữ yêu thích của bạn là gì? 

Nguồn: designshack.net

Tham khảo khoá học sắp khai giảng và ưu đãi mới nhất! Lịch học Đăng ký ngay