Typography là gì và làm thế nào để làm cho đúng: Hướng dẫn đầy đủ

Typography là gì và làm thế nào để làm cho đúng: Hướng dẫn đầy đủ
What is typography

Bài đăng này được xuất bản lần cuối vào ngày 10 tháng 3 năm 2023.

Tất cả chúng ta đều đã làm điều đó: dành quá nhiều thời gian để xem xét kỹ lưỡng một tin nhắn văn bản hoặc email nhằm xác định chính xác ý định của người gửi. Phân tích nghĩa đằng sau các từ hoặc cân nhắc xem từ nào phù hợp hơn trong một ngữ cảnh nhất định là điều chúng tôi làm thường xuyên. Nhưng chúng ta có thường xuyên xem xét cách mà văn bản có thể phản ánh trực quan giọng điệu của cụm từ được viết không?

Một phần vai trò của nhà thiết kế đồ họa là thể hiện cảm xúc, thông điệp hoặc bầu không khí của các từ thông qua hình thức của chúng. Ví dụ, hãy tưởng tượng kiểu chữ trang trí công phu của thiệp mời đám cưới được dán lên biển báo giao thông. Nó không hoàn toàn có tác động mong muốn.

Trong hướng dẫn này, chúng ta sẽ kiểm tra sức mạnh của kiểu chữ. Bạn sẽ tìm thấy định nghĩa về kiểu chữ, tóm tắt các yếu tố chính của kiểu chữ và các mẹo về cách chọn kiểu chữ phù hợp cho thiết kế trang web của bạn. Bạn có thể bỏ qua bất kỳ phần nào dưới đây:

kiểu chữ là gì?

Các yếu tố chính của kiểu chữ

Mẹo về kiểu chữ cho trang web của bạn

Kiểu chữ và UI/UX

kiểu chữ là gì?

Kiểu chữ được định nghĩa là khía cạnh trực quan của loại. Đó là thực hành sắp xếp văn bản theo cách dễ đọc và thẩm mỹ. Ngoài ra, nó có thể được sử dụng để thể hiện một tâm trạng nhất định hoặc củng cố một thông điệp. Để làm như vậy, chúng ta có thể sử dụng các kiểu chữ và kiểu phông chữ khác nhau, cũng như điều chỉnh kích thước, khoảng cách giữa các chữ cái và từ, v.v.

Kiểu chữ về cơ bản là kiểu sắp xếp để làm cho ngôn ngữ viết dễ đọc và hấp dẫn khi hiển thị và đọc. Lịch sử của nó bắt nguồn từ các nền văn minh cổ đại của Hy Lạp và La Mã, nơi các mẫu thư được khắc trên đá, kim loại và giấy cói.

Trong thời kỳ trung cổ, các bản thảo được chiếu sáng đã được tạo ra với nét chữ được làm thủ công cẩn thận. Sau đó, vào thế kỷ 15, việc phát minh ra máy in đã tạo ra một cuộc cách mạng về kiểu chữ khiến sách được phổ biến rộng rãi hơn. Cuộc cách mạng công nghiệp (thế kỷ 19) đã mang lại những tiến bộ công nghệ mới trong in ấn, dẫn đến việc tạo ra các kiểu chữ sans-serif và sự phát triển của kiểu chữ hiện đại. Ngày nay, công nghệ kỹ thuật số tiếp tục định hình và mở rộng lĩnh vực kiểu chữ.

Một trong những thuật ngữ thiết kế cổ điển quan trọng, kiểu chữ là một phần thiết yếu của bất kỳ thiết kế nào. Cùng một từ có thể truyền đạt một cảm giác khác nhau, tùy thuộc vào cách chúng được thiết kế. Cho dù bạn đang cập nhật thiết kế web của mình , viết sách dành cho trẻ em hay tạo biểu trưng , hãy xem xét cách sao chép của bạn có thể thiết lập một cách trực quan sắc thái của tính cách hoặc thông điệp cốt lõi của thương hiệu.

The word 'hello' written in different typefaces

Các yếu tố chính của kiểu chữ

Để dấn thân vào thế giới của kiểu chữ, bạn sẽ cần biết những biến số nào có sẵn để sử dụng. Mặc dù có một danh sách đầy đủ các thuật ngữ kiểu chữ, các yếu tố sau đây là những yếu tố bạn cần để bắt đầu:

Phông chữ và kiểu chữ

Đã đến lúc giải tỏa sự nhầm lẫn về định nghĩa của kiểu chữ và phông chữ, vì có sự khác biệt rõ rệt giữa chúng.

Kiểu chữ là tên gọi chung của một họ phông chữ (ví dụ: Helvetica, Times New Roman hoặc Comic Sans khét tiếng ), trong khi phông chữ đề cập đến một phong cách cụ thể trong kiểu chữ đó, chẳng hạn như in đậm, in nghiêng hoặc cô đọng. Lưu ý cách bài đăng trên blog này được viết bằng một kiểu chữ, nhưng bao gồm nhiều phông chữ.

Futura typeface and its font styles

Kiểu chữ Futura PT với ba phông chữ khác nhau.

tính dễ đọc

Mặc dù có rất nhiều cơ hội để sáng tạo với kiểu chữ, nhưng hãy nhớ rằng văn bản cuối cùng là để đọc. Ngoài việc chọn một kiểu chữ rõ ràng và dễ đọc, còn có các yếu tố bổ sung cần chú ý.

Lưu ý về kích thước văn bản của bạn và khoảng cách giữa các chữ cái và dòng (hoặc ‘ kerning ‘ và ‘leading’ theo thuật ngữ chuyên nghiệp). Ngoài ra, đảm bảo đủ độ tương phản giữa văn bản và màu nền. Điều này cũng sẽ giúp cải thiện trải nghiệm người dùng và khả năng truy cập trang web của bạn.

Legibility in typography

Serif và sans serif

Khi thảo luận về kiểu chữ, bạn có thể nghe thấy những thuật ngữ này rất nhiều. Kiểu chữ serif bao gồm các đường trang trí nhỏ hoặc “đuôi” ở cuối các nét chữ, trong khi sans serif có nghĩa đen là “không có chân”. Do đó, các kiểu chữ sans serif (như kiểu chữ được sử dụng trên chính bài đăng trên blog này) thường được tạo thành từ các dòng sạch hơn, không có bất kỳ phần tô điểm nào ở đầu các chữ cái.

Serif and sans serif definition

Hệ thống cấp bậc

Là một trong những nguyên tắc cơ bản của thiết kế , hệ thống phân cấp là điều cần thiết trong kiểu chữ. Nó có thể được sử dụng để tạo sự khác biệt giữa các đoạn nội dung, giúp người đọc hiểu ngay thông tin nào là quan trọng nhất. Hệ thống phân cấp đạt được bằng cách sử dụng mọi thứ từ kích thước (lớn hay nhỏ), chiều rộng (dày hay mỏng) đến vị trí thành phần (văn bản ở cuối màn hình có xu hướng ít quan trọng hơn văn bản ở màn hình đầu tiên).

Ví dụ: tiêu đề của một bài báo thường lớn hơn hoặc nổi bật hơn phần nội dung, cho phép người đọc nắm được ý chính của bài báo bằng cách đọc lướt qua tiêu đề. Điều này cũng giúp hình thành một bố cục rõ ràng và dễ hiểu.

khoảng trắng

Khoảng trắng , hay nói cách khác là “khoảng trống âm”, chỉ đơn giản đề cập đến các vùng trống xung quanh văn bản hoặc hình ảnh. Thêm một lượng không gian hợp lý giữa các thành phần đồ họa giúp tránh lộn xộn và đảm bảo sự rõ ràng. Bao gồm các lề hoặc khoảng trống xung quanh văn bản cũng sẽ thu hút nhiều sự chú ý hơn đến văn bản và giúp phân biệt giữa các phần hoặc khối thông tin.

căn chỉnh


Căn chỉnh kiểu chữ đề cập đến việc thiết lập dòng văn bản trên một trang. Có bốn cài đặt cơ bản:

  • Flush left : Văn bản được căn dọc theo lề trái.

  • Tuôn sang phải : Văn bản được căn dọc theo lề phải. Xin lưu ý rằng trong các ngôn ngữ đọc từ trái sang phải, viết xuôi phải thường không được khuyến khích vì nó phản trực giác.

  • Căn đều : Văn bản được căn dọc theo lề trái và khoảng cách được tự động điều chỉnh sao cho văn bản được căn đều với cả lề trái và phải.

  • Căn giữa : Văn bản được căn giữa, có nghĩa là văn bản không được căn chỉnh theo bất kỳ lề nào. Điều này phù hợp với tiêu đề hơn là với số lượng lớn văn bản. Vì các cạnh bị lởm chởm và mỗi lần người đọc cần tìm kiếm điểm bắt đầu của dòng tiếp theo, nên có thể khó đọc văn bản dài.

Tính nhất quán

Khi làm việc với kiểu chữ, điều quan trọng là phải nhất quán với cách bạn sử dụng tất cả các thành phần của nó, bao gồm phông chữ, khoảng cách và căn chỉnh để tạo ra một thiết kế có vẻ gắn kết và chuyên nghiệp.

Bối cảnh

Khi chọn sử dụng kiểu chữ nào, điều quan trọng là phải hiểu nó được sử dụng để làm gì và tại sao. Hãy suy nghĩ về đối tượng dự định, loại nội dung và cách nó sẽ được phân phối. Thể loại, giai điệu và phương tiện đều nên được tính đến.

Mẹo về kiểu chữ cho trang web của bạn

Viết nội dung trang web là một chuyện, nhưng quyết định cách tốt nhất để trình bày nội dung đó trên trang web của bạn lại là một chuyện khác. Các nguyên tắc sau đây được thiết kế riêng cho việc tạo trang web, nhưng cũng có thể được triển khai trong các bối cảnh khác, chẳng hạn như thiết kế áp phích hoặc bản tin.

Dưới đây là sáu mẹo về kiểu chữ cần tính đến:

01. Phản ánh bản sắc thương hiệu của bạn

Trước khi bắt tay vào bất kỳ dự án sáng tạo nào cho doanh nghiệp của mình, hãy đảm bảo rằng bạn đã xác định rõ ràng bản sắc thương hiệu của mình. Bạn có vui vẻ và tràn đầy năng lượng không? Hay bạn có một cách tiếp cận truyền thống hơn?

Dù đó là gì, hãy tìm kiếm một kiểu chữ thể hiện cá tính độc đáo của bạn. Để chọn phông chữ tốt nhất cho trang web của bạn , hãy bắt đầu bằng cách thu thập một số phông chữ phù hợp với bạn, sau đó thu hẹp phông chữ xuống khi bạn đã hiểu rõ hơn về những gì mình đang tìm kiếm.

02. Nhất quán trong toàn bộ giao diện của bạn

Một phần của việc xây dựng bản sắc thương hiệu vững chắc liên quan đến tính nhất quán. Điều này được yêu cầu trong mọi thứ, từ cách phối màu trang web của bạn đến các lựa chọn kiểu chữ của bạn. Trên nhiều loại nội dung trên trang web của bạn, từ các đoạn văn bản nhỏ tạo nên bản vi mô của bạn, đến các nhãn trên menu trang web và các tiêu đề trên trang chủ của bạn, tính nhất quán là chìa khóa.

Tạo trải nghiệm toàn diện bằng cách sử dụng cùng một phông chữ và kiểu chữ trên toàn bộ trang web của bạn. Mặc dù bạn có thể hợp nhất tối đa hai hoặc ba kiểu chữ trong cùng một trang web (thêm về điều đó bên dưới), hãy sử dụng cùng một kiểu chữ trong cùng ngữ cảnh. Ví dụ: nếu tiêu đề trên một trang được viết bằng Helvetica Bold ở 40px, hãy đảm bảo các tiêu đề khác giống nhau. Để làm cho cuộc sống của bạn dễ dàng hơn một chút, bạn có thể tùy chỉnh và lưu các chủ đề văn bản để sử dụng chúng nhiều lần trên trang web của mình.

Lưu ý cách mẫu bên dưới, được tạo cho một trang web thể dục , duy trì tính nhất quán trong các phần nội dung khác nhau của nó.

Tempi website template for fitness blog

03. Làm cho nó dễ đọc

Văn bản ở đó để phục vụ một mục đích. Chắc chắn, nó có thể dùng để trang trí hoặc thêm vào thiết kế tổng thể, nhưng bất kể bạn đang tạo kiểu chữ cho nút kêu gọi hành động hay chọn một phông chữ để thiết kế logo, nó phải dễ đọc. Không có gì tệ hơn việc phải nheo mắt để đọc một bài đăng trên blog hoặc bấm nhầm vào nút vì bạn hiểu sai những gì được viết trên đó.

Kiểm tra xem bản sao của bạn có đủ lớn để đọc cả trên máy tính để bàn và thiết bị di động không. Kiểu chữ bạn chọn cũng sẽ hoạt động tốt ở kích thước phông chữ bạn đã chọn. Một số kiểu chữ có thể trông tuyệt vời dưới dạng tiêu đề, nhưng khó đọc hơn ở kích thước nhỏ hơn.

04. Bám sát hai hoặc ba phông chữ

Đặt giới hạn có thể là một bài tập vô giá khi nói đến sự sáng tạo. Điều tương tự cũng xảy ra với kiểu chữ. Một trang web được tạo thành từ nhiều kiểu chữ có thể trông lộn xộn và không mạch lạc. Thay vào đó, hãy chọn không quá hai hoặc ba kiểu chữ và sử dụng chúng nhất quán trên mỗi trang.

Một thực hành tốt là chọn một kiểu chữ sẽ được sử dụng chủ yếu cho tiêu đề hoặc tiêu đề và một kiểu chữ cho các khối văn bản dài hơn, như mô tả và bài đăng trên blog. Nếu bạn muốn thêm sự đa dạng, hãy sử dụng kiểu chữ thứ ba cho lời kêu gọi hành động và nội dung vi mô khác.

05. Khám phá các cặp phông chữ

Khi tìm các cặp phông chữ tốt nhất cho trang web của bạn, hãy đặt bản sắc thương hiệu của bạn lên hàng đầu trong quá trình ra quyết định của bạn. Hãy ghi nhớ trong đầu phông chữ nào sẽ được sử dụng cho tiêu đề và phông chữ nào cho văn bản dài. Cái sau phải đặc biệt rõ ràng và dễ đọc, trong khi bạn có thể biểu cảm hơn một chút với các tiêu đề, chọn một kiểu chữ thực sự nói lên thương hiệu của bạn.

Font pairings examples

06. Chọn phông chữ an toàn cho web

Để đảm bảo trang web của bạn xuất hiện giống nhau trên tất cả các thiết bị, hãy sử dụng phông chữ an toàn cho web . Vì mỗi thiết bị có bộ phông chữ tích hợp riêng, nếu trang web của bạn có phông chữ không an toàn cho web, thì văn bản có thể hiển thị ở phông chữ khác với phông chữ gốc. Không chính xác là giao diện mà bạn đang hướng tới sau tất cả công việc thiết kế tỉ mỉ của mình.

Tuy nhiên, bạn có thể dễ dàng tránh điều này khi tạo trang web Tempi bằng cách sử dụng bất kỳ phông chữ chuyên nghiệp nào được cài đặt sẵn. Ngoài ra, bạn có thể tải xuống các phông chữ an toàn trên web từ một trong các tài nguyên trực tuyến (như Google Fonts ) và sau đó tải phông chữ của riêng bạn lên Tempi Editor.

Kiểu chữ và UI/UX

Kiểu chữ đóng một vai trò quan trọng trong cả thiết kế UI (Giao diện người dùng) và UX (Trải nghiệm người dùng). Trong thiết kế giao diện người dùng, nó được sử dụng để truyền đạt thông tin, hướng dẫn người dùng thông qua giao diện và thiết lập phong cách trực quan tổng thể của sản phẩm. Kiểu chữ tốt trong thiết kế giao diện người dùng nâng cao khả năng sử dụng và khả năng truy cập của sản phẩm bằng cách làm cho văn bản dễ đọc, dễ đọc và có thể quét được.

Trong thiết kế UX, kiểu chữ ảnh hưởng đến cách người dùng cảm nhận và tương tác với nội dung, cũng như cách họ có thể tìm và hiểu thông tin họ đang tìm kiếm dễ dàng như thế nào. Điều này có thể ảnh hưởng đến cách người dùng xử lý giọng điệu và tính cách của một thương hiệu, cũng như uy tín và độ tin cậy của nó từ thông tin mà nó cung cấp.

Nhìn chung, kiểu chữ là một khía cạnh thiết yếu của cả thiết kế UI và UX, có thể có tác động đáng kể đến sự thành công của một thiết kế bằng cách làm cho nó dễ sử dụng hơn, dễ tiếp cận hơn và hấp dẫn hơn.

Bởi Dana Meir

Chuyên gia thiết kế & Nhà văn