paint-brush
Cách chọn phông chữ hoàn hảo cho trang web và quảng cáo của bạntừ tác giả@lanamiro
582 lượt đọc
582 lượt đọc

Cách chọn phông chữ hoàn hảo cho trang web và quảng cáo của bạn

từ tác giả Lana Miro10m2023/02/15
Read on Terminal Reader

dài quá đọc không nổi

Typography là một phần thiết yếu của bất kỳ dự án thiết kế đồ họa nào. Phông chữ có thể làm cho trang web trông đẹp hơn và ảnh hưởng đến cảm xúc cũng như tâm trạng của người dùng. Điều quan trọng đối với một nhà thiết kế đồ họa là phải biết sự khác biệt giữa kiểu chữ và phông chữ. Nhiều đặc điểm phông chữ góp phần giúp người đọc dễ dàng giải mã các ký hiệu văn bản.
featured image - Cách chọn phông chữ hoàn hảo cho trang web và quảng cáo của bạn
Lana Miro HackerNoon profile picture

Typography là một phần thiết yếu của bất kỳ dự án thiết kế đồ họa nào. Phông chữ có thể làm cho trang web trông đẹp hơn và ảnh hưởng đến cảm xúc cũng như tâm trạng của người dùng. Đó là lý do tại sao việc chọn phông chữ phù hợp cho trang web là điều cần thiết để đảm bảo sự thành công của thiết kế đồ họa.


Tuy nhiên, việc tìm kiếm phông chữ hoàn hảo cho một dự án có thể là một thách thức. Có thể mất nhiều thời gian để chọn đúng phông chữ. Để đưa ra lựa chọn đúng đắn, có một vài điều cần nhớ.

Phông chữ là gì?

Kiểu chữ và phông chữ là hai thuật ngữ thường được sử dụng để biểu thị cùng một ý nghĩa. Trong thực tế, khi hầu hết mọi người nói phông chữ , họ thực sự đề cập đến một kiểu chữ . Điều quan trọng đối với một nhà thiết kế đồ họa là phải biết sự khác biệt giữa hai điều này.


Một kiểu chữ là một tập hợp các nét chữ cụ thể có chung các đặc điểm thiết kế và nó có thể được mô tả như một họ phông chữ có cùng thiết kế cơ bản.


Một ví dụ quen thuộc là kiểu chữ Arial , bao gồm nhiều phông chữ khác nhau về kích thước, trọng lượng và các đặc điểm khác, nhưng tất cả đều dựa trên thiết kế tân kỳ cục sans serif. Vì vậy, Arial là một kiểu chữ, Arial Black 14 điểm là một phông chữ và Arial 14 điểm thông thường là một phông chữ khác.

phông chữ arial


Khi tìm kiếm kết hợp phông chữ cho trang web , hãy nhớ rằng thường sử dụng các phông chữ thuộc cùng một họ.


Tại sao phông chữ lại quan trọng?

Trước khi thảo luận về các đặc điểm phông chữ khác nhau giúp phông chữ phù hợp với các ngữ cảnh khác nhau, hãy phác thảo các mục đích mà tất cả các thiết kế kiểu chữ phục vụ.

Cung cấp khả năng đọc

Khả năng đọc của trang web đo lường mức độ dễ dàng mà khách truy cập có thể đọc và hiểu tài liệu bằng văn bản.


Có ba loại yếu tố góp phần vào khả năng đọc:


  • thuộc tính cá nhân của người đọc (khiếm thị và các yếu tố sức khỏe khác);
  • có gì trong văn bản (sự tương tác của chủ đề, ngữ pháp phù hợp, độ phức tạp của cú pháp);
  • kiểu chữ (lựa chọn kiểu chữ và khuôn khổ của nó, tức là phông chữ).


Khả năng đọc chắc chắn được kết nối nhưng không nên nhầm lẫn với dễ đọc .


Tính dễ đọc là một tính năng thiết kế kiểu chữ đảm bảo mỗi ký tự có thể phân biệt được với ký tự khác. Nhiều đặc điểm phông chữ góp phần giúp người đọc dễ dàng giải mã các ký hiệu văn bản và do đó, khả năng đọc văn bản tổng thể và chúng tôi sẽ thảo luận chi tiết hơn về chúng ở phần sau của bài viết.


Các phiên bản kiểu chữ được trang trí cao mang lại nhiều cá tính cho một thương hiệu, nhưng về cơ bản chúng hy sinh khả năng đọc văn bản.


Đó là lý do tại sao chúng chủ yếu được sử dụng để tạo các định dạng độc lập lớn, chẳng hạn như logo, biểu ngữ, bản in áo phông và tiêu đề. Hãy nhớ rằng, kiểu chữ được tạo ra để truyền tải thông điệp, vì vậy, trong hầu hết các trường hợp, khả năng đọc có trước khi thiết kế.


Biểu thị phân cấp văn bản

Hệ thống phân cấp kiểu chữ cho phép thiết kế phân chia theo thứ bậc để dẫn người tiêu dùng đến một số loại thông tin nhất định bằng cách sử dụng các phông chữ khác nhau và tạo các bố cục văn bản khác nhau.


Cách dễ nhất để sử dụng hệ thống phân cấp kiểu chữ là sử dụng các kích thước phông chữ khác nhau cho các phần văn bản khác nhau: loại nhỏ hơn thường được sử dụng cho nội dung cơ thể, trong khi loại lớn hơn được sử dụng cho tiêu đề và tiêu đề. Các phương pháp khác để phân biệt các phần thông tin khác nhau bao gồm dấu đầu dòng, khoảng trắng, màu phông chữ, v.v.


Do có rất nhiều tùy chọn để tạo các phần dữ liệu trực quan khác nhau nên hệ thống phân cấp kiểu chữ không nhất thiết phải là giải pháp một kích cỡ phù hợp với tất cả. Thay vào đó, hãy sử dụng nó để tạo các thiết kế ban đầu phù hợp nhất với dự án của bạn đồng thời tăng khả năng đọc của trang web.


phân cấp kiểu chữ (Nguồn: https://uxcel.com/blog/beginners-guide-to-typographic-hierarchy)


Một trong những nhiệm vụ quan trọng nhất của nhà thiết kế là sắp xếp hiệu quả nội dung trên trang web sao cho dễ sử dụng. Vì rất nhiều dữ liệu mà các nhà thiết kế xử lý dựa trên văn bản, nên điều cần thiết là phải tìm hiểu các yếu tố khác nhau góp phần xây dựng hệ thống phân cấp như thế nào.

Cải thiện điều hướng trang web

Nếu bạn đã tạo một hệ thống phân cấp kiểu chữ hiệu quả trên một trang, nghĩa là thiết lập một số cấp độ phân cấp, chọn loại phông chữ, kích thước, màu sắc, v.v., để phân biệt tất cả các loại nội dung, hãy đảm bảo áp dụng cùng một phương pháp ở mọi nơi trên trang web .


Khi người dùng đến với nền tảng của bạn lần đầu tiên, họ phải tìm ra vị trí của các công cụ điều hướng , nội dung quan trọng nhất được biểu thị như thế nào, màu của các liên kết, v.v. Nếu bạn giữ các khía cạnh này nhất quán trong tất cả các trang trên trang web, bạn sẽ tạo ra trải nghiệm người dùng tốt hơn cho độc giả của mình.

Tạo thương hiệu doanh nghiệp

Phông chữ là một yếu tố quan trọng trong việc xây dựng thương hiệu trang web, ảnh hưởng lớn đến cách người dùng xem trang web của bạn. Nhận thức của người tiêu dùng về một thương hiệu có thể bị ảnh hưởng tích cực bởi việc sử dụng các thành phần kiểu chữ đẹp trong biểu trưng của nó và các mô tả sản phẩm có thể trở nên hấp dẫn hơn bằng cách sử dụng các kết hợp phông chữ hấp dẫn về mặt thẩm mỹ.

Kiểu chữ hiệu quả thu hút sự chú ý của người đọc mà không làm họ mất tập trung vào bản chất của nội dung. Nó không chỉ có thể làm cho trang web của bạn trở nên đặc biệt hơn mà còn khiến khách truy cập bắt đầu liên kết thương hiệu của bạn với kiểu chữ được sử dụng trên trang web của bạn. Trong thời điểm người dùng truy cập hàng chục tài nguyên Internet mỗi ngày, bạn không thể nhấn mạnh quá mức giá trị của một hình ảnh thương hiệu mạnh và vai trò của phông chữ trong việc tạo ra nó.

Truyền đạt tâm trạng và cảm xúc

Khi chọn phông chữ, điều quan trọng cần nhớ là hình thức của các ký tự có thể ảnh hưởng đến nhận thức của người đọc về nội dung. Một trong những chức năng của kiểu chữ là kết nối người tiêu dùng với văn bản ở mức độ cảm xúc. Giống như chúng ta viết hoa tất cả các chữ cái trong khi trò chuyện để biểu thị tiếng hét, các phông chữ khác nhau tạo ra tâm trạng và cảm xúc.


Mỗi phông chữ có tiếng nói riêng của nó và mặc dù thường dễ dàng phân biệt tâm trạng mà một phông chữ cụ thể cố gắng chuyển tiếp (đặc biệt là khi so sánh một số kiểu chữ), nhưng hầu hết mọi người không thể giải thích tại sao họ lại cảm thấy những cảm xúc khác nhau khi nhìn thấy các thiết kế chữ cái khác nhau.


Một lời giải thích đơn giản hóa không mang nhiều ý nghĩa sẽ cho bạn biết rằng chúng tôi xử lý phông chữ và kiểu chữ giống như chúng tôi xử lý các khuôn mẫu . Do đó, chúng tôi nhận thức được những cảm xúc nhất định trong tiềm thức.


Câu trả lời đó không giúp ích nhiều cho các nhà thiết kế web, những người phải tự tin khi chọn phông chữ cho trang web để gợi lên tâm trạng và cảm xúc mong muốn từ người đọc.


Trong phần tiếp theo, tôi sẽ xem xét các đặc điểm của phông chữ và cách sử dụng chúng để hiểu rõ hơn và thực tế hơn về phông chữ nào nên được sử dụng trong những điều kiện nào.

Đặc điểm hình thức chính và cách chúng được sử dụng

Bằng cách làm việc với tiềm thức, phông chữ đóng một vai trò thiết yếu trong việc hình thành tâm trạng và cảm xúc của người xem ngay cả trước khi họ bắt đầu đọc. Số lượng phông chữ có sẵn gần như vô hạn, giúp bạn dễ dàng tạo ra các thiết kế độc đáo. Tuy nhiên, việc chọn phông chữ phù hợp có thể trở nên phức tạp, đặc biệt nếu bạn không biết bắt đầu từ đâu.


Phần này giải thích những đặc điểm phông chữ nào làm cho phông chữ phù hợp hơn với ngữ cảnh này hay ngữ cảnh khác.

Cân nặng

Trọng lượng đề cập đến độ dày của các nét chữ trong bất kỳ phông chữ nào. Làm cho các chữ đậm hơn hoặc mỏng hơn là một cách dễ dàng để tạo cấu trúc phân cấp văn bản. Trọng lượng phông chữ nhẹ , thông thườngđậm là ba loại chính, trong đó các loại phông chữ thông thường là phổ biến nhất để đọc. Các kiểu sáng và đậm truyền tải nhiều cảm xúc hơn, chẳng hạn như sự tinh tế và mong manh ở một bên so với sự mạnh mẽ và thô lỗ ở bên kia.


Các kiểu phông chữ siêu mỏng rất phổ biến trong ngành mỹ phẩm và làm đẹp vì chúng mang lại cảm giác được chăm sóc, nhẹ nhàng và nhạy cảm. Các loại in đậm (đặc biệt là cái gọi là phông chữ Màu đen, thậm chí còn nặng hơn) không dễ đọc và hầu hết được thấy trong các cụm từ ngắn dành cho quảng cáo, trò chơi hoặc kinh doanh chương trình.

trọng lượng phông chữ (Nguồn: https://medium.com/@ltm/typography-part-1-3c3c98211b5)

Chiều rộng

Cũng như trọng lượng, chiều rộng là một đặc điểm dễ nhận biết ảnh hưởng mạnh đến tốc độ đọc. Các phông chữ cô đặc chiếm ít không gian theo chiều ngang hơn so với các phông chữ không cô đặc của chúng và xuất hiện khi có nhu cầu chứa nhiều văn bản trong một khu vực nhỏ.

Những phông chữ như vậy thường được sử dụng làm tiêu đề một dòng trong các cột kiểu báo hẹp mà bạn không thể sử dụng phông chữ có chiều rộng thông thường.

Phông chữ hẹp mang lại cảm giác gò bó và thậm chí có thể khiến người đọc cảm thấy khó chịu. Chúng không dễ đọc vì các đường ngang trong glyphs bị giảm và khó phân biệt ký tự này với ký tự khác.


Các kiểu phông chữ mở rộng làm cho các từ ngắn thậm chí trông dài và người đọc có xu hướng đọc chúng chậm hơn. Các từ trở nên đáng nhớ hơn và thu hút sự chú ý đáng kể. Bởi vì những phông chữ như vậy sử dụng nhiều đường ngang hơn nên chúng rất lý tưởng để tạo logo và cụm từ cho các biểu ngữ nhằm mục đích đọc ở một góc.

ví dụ về thiết kế phông chữ mở rộng (Nguồn: https://commons.wikimedia.org/wiki/File:Logo_Oreo_alt.svg)

Serif và tấm

Các dòng ngắn vượt qua các đầu của các nét trong các chữ cái được gọi là serif và phông chữ sử dụng serif là phông chữ serif . Không có chân – sans serif.

Loại Serif là kiểu chữ đầu tiên được tạo ra.

MỘT lý thuyết phổ biến nói rằng ở Đế chế La Mã, các chữ cái đầu tiên được vẽ trên đá bằng bút lông, sau đó những người thợ đục đá theo các vết bút lông loe ra ở đầu và cuối mỗi dòng, tạo thành các serif.


Ngay cả các serif nhỏ cũng làm tăng độ tương phản giữa các chữ cái làm cho phông chữ dễ đọc hơn. Đó là lý do tại sao phông chữ serif phổ biến trong các tác phẩm văn học và khoa học lớn, đặc biệt là đối với các văn bản in, nơi mà độ sắc nét của mực có thể suy giảm theo thời gian.


Đã tồn tại quá lâu, phông chữ serif là một lựa chọn linh hoạt và an toàn mang lại nhiều cá tính và nét đặc trưng. Chúng mang lại cảm giác vượt thời gian và truyền thống cho nhiều thương hiệu tên tuổi lớn trong logo của họ và đặc biệt phổ biến trong báo chí, luật, trang sức, thời trang và điện ảnh.

phông chữ serif, sans serif và slab serif (Nguồn: https://atelierlks.com/how-to-choose-the-perfect-font-for-your-brand/)


So với phông chữ Serif, sans serifs mang lại vẻ hiện đại và được ưa chuộng bởi các thiết kế tối giản. Họ thường được tuyển dụng bởi các doanh nghiệp công nghệ, trò chơi và ô tô.


Serifs trở thành tấm khi chúng thẳng, hình chữ nhật và có cùng độ dày với các nét chính của ký tự. Phông chữ Slab serif xuất hiện chắc chắn, đáng tin cậy và trông tự nhiên trên sàn nhà máy, cửa hàng dụng cụ điện, nhà hàng bít tết và các ngành công nghiệp “nam tính” khác.

Phông chữ nghiêng và xiên

Italic và oblique là hai thuật ngữ liên quan nhưng riêng biệt mô tả phông chữ góc cạnh.


Các nhà thiết kế kiểu chữ tạo ra các kiểu phông chữ nghiêng giống với thư pháp viết tay; về mặt lịch sử, mục đích của chúng là làm nổi bật văn bản. Do có độ nghiêng nên những phông chữ như vậy có ít đường thẳng đứng hơn và có nhiều đường cong thanh lịch hơn, mang lại tông màu trang nhã và dễ chịu. Phông chữ nghiêng hoặc viết tay truyền cảm xúc cá nhân và xuất hiện trong lời chào và thư mời.


Các loại phông chữ xiên (đôi khi được gọi là chữ nghiêng sai ) xuất hiện bằng cách nghiêng các chữ cái thẳng đứng của một kiểu chữ hiện có. Hầu hết các kiểu chữ hiện đại bao gồm các phông chữ xiên bên cạnh các kiểu khuôn mặt khác. Chúng làm nổi bật các phần của văn bản và đôi khi thêm cảm giác về tốc độ cho văn bản. Các nhà thiết kế báo cáo rằng các chữ sans serif xiên không nổi bật trong văn bản nhiều như các chữ serif xiên.

phông chữ xiên nghiêng thông thường


Sự tương phản

Độ tương phản của phông chữ là sự khác biệt về chiều rộng giữa các nét mảnh và dày của một ký tự. Phông chữ có độ tương phản trung bình và thấp thích hợp hơn cho việc đọc dài và không nhất thiết gợi lên bất kỳ tâm trạng hoặc cảm xúc nào.


Phông chữ đơn sắc (với các nét đều nhau) có chất lượng dễ đọc. Họ ít kết nối với chữ viết tay với các nét không đều, tạo thêm cảm giác hiện đại và công nghiệp cho các văn bản.


Phông chữ tương phản bổ sung kế thừa các đặc điểm của phông chữ Cổ điển. Sự khác biệt giữa các nét mỏng và dày tạo ra cảm giác kịch tính và cho phép tạo các tiêu đề trang nhã trong khi hy sinh một số khả năng đọc.

chiều cao chữ X

Chiều cao x, hoặc kích thước cơ thể, là chiều cao của chữ thường so với chữ in hoa. Phông chữ có kích thước cơ thể nhỏ (trong đó chiều cao của chữ thường nhỏ hơn hai lần so với chữ hoa) tạo ra sự tương phản lớn giữa các chữ cái của một phông chữ, giúp mắt dễ dàng chuyển đến đầu mỗi câu. Những phông chữ như vậy đòi hỏi nhiều không gian hơn giữa các dòng văn bản. Vì chúng có vẻ biểu cảm hơn nên chúng rất phù hợp để đọc thơ và sáng tác âm nhạc.


Ngược lại, phông chữ có chiều cao x lớn tạo ra văn bản đồng nhất, mang lại cảm giác ổn định. Chúng cũng cho phép khớp nhiều dòng văn bản hơn trong một không gian nhất định.

x-height trong kiểu chữ (Nguồn: https://medium.com/8px-magazine/practical-guide-to-font-pairing-da58b9bcd42b)

góc

Các giao điểm của các đường thẳng trong các chữ cái tạo thành các góc có cạnh sắc nét. Làm tròn các cạnh này tạo ra sự khác biệt lớn đối với nhận thức về một phông chữ hình thành mối liên hệ với các bề mặt nhẵn và dễ chịu. Các dạng tròn cũng phổ biến hơn trong tự nhiên, vì vậy có vẻ bình thường khi phông chữ có các góc tròn phổ biến trong ngành thực phẩm và sản phẩm dành cho trẻ em.

phông chữ có góc bo tròn (Nguồn: https://www.dunkin.co.uk/)

Mặt khác, các góc cạnh sắc nhọn có thể thể hiện sự căng thẳng và thậm chí là khó chịu. Phông chữ có độ sắc nét vượt trội rất phổ biến để tạo tất cả các loại biểu trưng và chúng là lựa chọn số một cho các dải kim loại.

phông chữ sắc nét cho metalheads

Mẹo chọn phông chữ phù hợp cho thiết kế của bạn

Chọn phông chữ cho trang web của bạn có thể phức tạp đối với các nhà thiết kế chưa được đào tạo. Bây giờ bạn đã tự làm quen với các yếu tố phông chữ chính, bạn có thể phân tích phông chữ tốt hơn và chọn những phông chữ phù hợp với mình. Dưới đây là một số mẹo bổ sung để bạn cân nhắc:


  • Nghĩ về tính cách. Bạn có muốn trang web của mình trông nghiêm túc, vui tươi, công nghệ cao hay thanh lịch không? Xác định thuộc tính phông chữ nào phản ánh đặc điểm của trang web của bạn và bắt đầu thu thập các kiểu chữ thích hợp.
  • Đừng bỏ qua bất kỳ chức năng chính nào của phông chữ. Ví dụ: không sử dụng các kiểu chữ trang trí khó đọc cho các đoạn văn bản lớn và tránh các thiết kế trung tính không có sức thu hút. Ngoài ra, các phông chữ khác thường có thể khiến người đọc mất tập trung, vì vậy việc chọn phông chữ luôn là vấn đề cân bằng.
  • Giữ số lượng phông chữ ở mức tối thiểu. Sử dụng nhiều hơn ba phông chữ trên một trang web khiến nó trông không có cấu trúc và khó tập trung vào.
  • Không sử dụng các phông chữ tương tự trên một dự án. Bằng cách sử dụng các phông chữ khác nhau, bạn sẽ có thể tạo ra sự đa dạng về hình ảnh và một thiết kế thú vị hơn.
  • Chọn một họ kiểu chữ mở rộng. Khi bạn tìm thấy một phông chữ mà bạn thích, hãy kiểm tra các phông chữ khác trong gia đình. Xem các ký tự trông như thế nào ở các kích cỡ, trọng lượng khác nhau và các phông chữ khác.

Chọn phông chữ và tạo thiết kế đồ họa có thể khó khăn và tốn thời gian. Nhưng tôi hy vọng bài viết này đã giúp bạn đi sâu vào những điều cơ bản để chọn đúng phông chữ. 😉