Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Kids
Webdesign

Thiết kế Web cho Trẻ em: Typography (Phong thái văn bản)

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: Design Basics
Web Design for Kids: Color

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Chào mừng đến với bài học thứ chín trong loạt bài Thiết kế Web cho Trẻ em của chúng tôi, tất cả về Typography.

Trong bài hướng dẫn này chúng ta sẽ tìm hiểu về typography, nó xoay quanh về điều gì và tại sao nó thật sự quan trọng trong thiết kế. Chúng ta đã nói rất nhiều về trải nghiệm của người dùng cho đến lúc này và bài hướng dẫn này sẽ không là ngoại lệ; chúng ta sẽ làm việc chăm chỉ để đảm bảo văn bản của chúng ta đẹp dễ đọc!

Đừng quên đặt bất kỳ câu hỏi nào trong phần bình luận ở dưới cùng của trang này!

Typography chính xác là gì?

Typography ở mọi nơi. Nó là cách mà chúng ta thấy các từ được viết, vì vậy bất kỳ nơi đâu chúng ta thấy các từ thì có nghĩa là chúng ta thấy typography. Những từ này có thể được tìm thấy trên màn hình, giấy, và các ký hiệu xung quanh ta.

Với typography chúng ta có thể thay đổi "cách nhìn và cảm nhận" về các từ đó, thay đổi cách mà chúng tác động đến người đọc. Thiết kế của các từ ngữ sẽ thường ảnh hưởng đến người dùng của chúng ta trước khi họ có cơ hội đọc nội dung của chúng ta, vì vậy điều quan trọng là thiết kế và cảm nhận tổng thể của typography phải phù hợp với cảm nhận của chính bản thân nội dung.

Trong bài học trước chúng ta đã nói về tầm quan trọng của nội dung là như thế nào. Sau tất cả, vấn đề không phải là trang web của chúng ta trông tốt thế nào mà vấn đề là nó chứa các thông tin mà bất kỳ ai cũng muốn đọc! Tuy nhiên, cách chúng ta trình bày các từ ngữ này tới người dùng, trở thành một phần của thông điệp cũng như chính bản thân các từ ngữ đó.

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

Typography liên quan nhiều đến thuật ngữ khá giống nhau.

Một kiểu chữ là một thiết kế tổng thể của một bộ sưu tập các ký tự (từ ngữ hoặc biểu tượng), trong khi đó một phông chữ là kích thước, độ đậm nhạt, phong cách, và cách dùng của một kiểu chữ cụ thể.

Thiết kế Tuts+ Town của chúng ta sử dụng một kiểu chữ được gọi là "Open Sans". Chúng ta sử dụng các kích thước và độ đạm nhạt khác nhau của kiểu chữ này, điều này nói cho chúng ta biết các phông chữ nào cần nạp vào trong trang.

Vì thế, khi chúng ta sử dụng các phông chữ trong trang của chúng ta, thì những phông chữ này được dựa trên các kiểu chữ mà một người nào đó đã bỏ ra nhiều thời gian để thiết kế ra nó.

Serif và Sans-Serif

Một kiểu chữ có thể là Serif hoặc Sans-Serif. Một serif được mô tả như là các phần đuôi hoặc các phần kéo dài ở cuối của một số ký tự.

Một kiểu chữ serif có các phần kéo dài này:

Open Sans là một kiểu chữ sans-serif; có nghĩa là ngược lại serif. Một kiểu chữ sans-serif không có các phần kéo dài giống như ký tự ở trên:

Không có câu trả lời đúng sai khi cần phải dùng cái nào trong trang của chúng ta, nhưng chúng ta sẽ muốn nó hợp với thiết kế vả cảm nhận tổng thể mà chúng ta đang cố gắng để đạt được cũng như là việc cân nhắc bố cục và số lượng văn bản sao cho dễ đọc nhất.

Một kiểu chữ serif thường dễ đọc trên giấy hoặc khi có một lượng lớn văn bản, trong khi đó một sans-serif có thể đọc tốt hơn trên một màn hình hoặc với một lượng nhỏ văn bản tổng thể.

Các phần của Kiểu chữ

Để có thể có được một typography tốt nhất cho các trang web của chúng ta chúng ta cần nghĩ về những gì làm cho mỗi kiểu chữ trở nên khác biệt so với cái khác. Có nhiều phần khác nhau của mỗi kiểu chữ mà một người nào đó đã thiết kế và suy nghĩ rất chi tiết.

Đó là những chi tiết tạo nên sự độc đáo của mỗi cái và nó cho phép chúng ta lựa chọn cái nào hoạt động tốt nhất cho các thiết kế và các tình huống khác nhau.

Hãy nhìn thật ngắn gọn vào một số chi tiết của các kiểu chữ để hiểu rõ hơn cách những điều này có thể cải thiện (hoặc làm xấu đi) các thiết kế của chúng ta:

Không cần phải ghi nhớ những bộ phận này ngay bây giờ, mà chỉ cần biết rằng các biến thể của chúng giúp làm cho mỗi kiểu chữ trở nên đặc biệt.

Khoảng cách

Cũng như với hầu hết những thứ liên quan đến typography, khoảng cách là cực kỳ quan trọng khi xây dựng những trải nghiệm tốt nhất cho người dùng của chúng ta. Khoảng cách giữa mỗi ký tự, giữa các từ, và giữa các dòng chữ có thể tạo nên một sự khác biệt rất lớn đến khả năng đọc được.

Không đủ khoảng cách cho chúng ta các ký tự và các từ quá chật chội để có thể thoải mái đọc, trong khi đó quá nhiều khoảng cách sẽ cắt đứt mọi thứ, khó để đọc và để theo dõi.

Các phông chữ đi kèm với khoảng cách của chính nó mà thông thường khá dễ chịu để đọc, nhưng hãy xem cách mà những khoảng cách khác nhau này được gọi và cách tạo ra thay đổi ở trong CSS  trong trường hợp chúng ta cần nó trong các thiết kế.

Kerning và Tracking

Kerning là khoảng cách giữa mỗi ký tự.

Mỗi phông chữ mà chúng ta sử dụng sẽ sẵn có bộ quy luật kerning của chính nó, nhưng chúng ta có thể tạo ra các điều chỉnh ở trong CSS của chúng ta nếu muốn, bằng cách sử dụng thuộc tính letter-spacing:

Tracking là khoảng cách giữa mỗi nhóm ký tự, hoặc từ.

Nếu phông chữ không cung cấp đủ tracking thì chúng ta có thể tạo ra các thay đổi cho khoảng cách này thông qua thuộc tính word-spacing:

Leading

Leading chỉ đến khoảng cách giữa các dòng của đoạn văn.

Chúng ta có thể tạo ra các điều chỉnh khoảng cách này bằng cách đưa ra một giá trị mà làm thay đổi leading mặc định được thiết lập bởi phông chữ sử dụng thông qua thuộc tính line-height.

Một giá trị 2 ở đây sẽ đảm bảo leading của chúng ta gấp đôi so với mặc định của phông chữ đó.

Widow và Orphan

Nếu một từ duy nhất còn lại trên một dòng của chính nó (aaaah) ở phần cuối của một khối văn bản gọi là một Widow.

Ví dụ các khối trong hình ảnh sau đây đại diện cho các từ bên trong các cột. Widow là khối màu xanh, nằm trên chính nó ở phần cuối của cột bởi vì đó là nơi kết thúc câu:

Một Orphan là một từ duy nhất tồn tại trên một dòng bởi chính nó ở đầu của một cột, thường nằm cạnh cột nơi đặt hầu hết các văn bản có liên quan.

Widow và Orphan được xem là typography xấu bở vì cách mà nó có thể gây mất tập trung, làm cho trải nghiệm đọc tổng thể trở nên tệ hơn.

Có rất nhiều phương pháp tiếp cận khác nhau mà chúng ta có thể khắc phục một trong những vấn đề này nếu nó xảy ra trên trang web của chúng ta, chẳng hạn như:

  • điều chỉnh kích thước phông chữ
  • điều chỉnh độ rộng của container (kho chứa).
  • thêm hoặc loại bỏ văn bản
  • hoặc điều chỉnh kerning hoăc tracking của văn bản

Sự canh chỉnh

Chúng ta có thể chọn để canh chỉnh văn bản của chúng ta ở bên trái (mặc định trên các trang web cho ngôn ngữ viết từ trái sang phải như tiếng Anh), ở giữa, hoặc bên phải.

Bên trái

Văn bản trên web nói chung nên được canh trái (nhắc lại, đối với ngôn ngữ viết từ trái sang phải) bởi vì nó là cách mà người nghe hoặc người đọc các ngôn ngữ đó sử dụng để đọc.

Giữa

Canh giữa thường được sử dụng trên các tiêu đề và đề mục giúp chúng nổi bật hơn so với văn bản chính trong một trang. Chúng ta có thể làm điều này trong CSS của chúng ta bằng thuộc tính text-align, ví dụ:

Văn bản mà được canh chỉnh theo cách này thường có thể được tìm thấy trên các biển hiệu và tờ bướm đang cố gắng gây sự chú ý của một ai đó, nhưng chúng ta không nên canh giữa một văn bản lớn trên trang web bởi vì nó sẽ khó khăn hơn cho người dùng của chúng ta để đọc. Văn bản được canh giữa tạo cho ta các dòng có kích thước khác nhau, làm cho nó trở nên khó khăn cho đôi mắt khi theo dõi.

Bên phải

Một số ngôn ngữ (chẳng hạn như Tiếng Do Thái) được viết từ phải sang trái, làm cho việc canh phải thành mặc định của nó.

Là các nhà thiết kế chúng ta cũng có thể chọn để có một số lượng nhỏ văn bản được canh phải vì vậy nó có thể nổi bật hơn một chút, giống như các chú thích của tấm hình. Các chú thích này là các tiêu đề hoặc các mô tả cho những hình ảnh với phần tử HTML của chính nó, figcaption.

Việc canh chỉnh ở trên được thực hiện bằng cách định nghĩa right trên phần tử trong một tài liệu CSS.

Các mẹo chung

Rất nhiều typography mà chúng ta thiết kế nhờ vào việc đọc nội dung của chính chúng ta và thực hiện các điều chỉnh khi cần thiết. Tuy nhiên, có một số mẹo thông dụng có thể giúp chúng ta quen hơn với các kỹ năng typography.

Kích thước Phông chữ và Sự phân cấp

Một font-size nhỏ hơn 16px trên văn bản tạo nên phần lớn nội dung của chúng ta thường được coi là quá nhỏ và khó đọc trên màn hình.

Chúng ta đã nói rất nhiều về sự phân cấp trong hướng dẫn trước trên các khái niệm thiết kế cơ bản. Thiết lập hệ thống phân cấp cho văn bản trong toàn bộ thiết kế của chúng ta sẽ đảm bảo rằng các trang web dễ dàng hơn để điều hướng bằng cách tách các nội dung có liên quan và làm nổi bật những gì là quan trọng nhất.

Văn bản trên trang web Tuts+ Town của chúng ta có nhiều cấp độ phân cấp khác nhau, với tiêu đề đang là quan trọng nhất, theo sau bởi danh mục kinh doanh và các cửa hàng cụ thể, và kết thúc với phần "tạo ra bởi" ở dưới cùng nhất.

Hệ thống phân cấp ở đây được xác lập bởi kích cỡ, màu sắc, và các vị trí khác nhau trên trang.

Độ tương phản

Chúng ta sẽ nói thêm về màu sắc và độ tương phản trong hướng dẫn tiếp theo, vì vậy chỉ cần lưu ý đến màu sắc của văn bản của bạn và có hay không việc nó không hoà hợp với màu nền làm cho nó trở nên khó đọc.

Dưới đây là một ví dụ về tương phản không tốt ở bên trái và tốt hơn ở bên phải:

Văn bản màu hồng nhạt trên một nền tối màu xanh lam ở bên trái cho thấy ảnh hưởng của độ tương phản kém. Văn bản khó đọc, nhìn hơi mờ một chút, và làm đau mắt của chúng ta!

Số lượng các phông chữ

Một quy tắc chung, tốt nhất là không sử dụng nhiều hơn 2-3 phông chữ khác nhau cho mỗi dự án. Cặp phông chữ phù hợp với nhau và cả hai hỗ trợ cảm nhận tổng quát và các ý tưởng đằng sau thiết kế.

Phông chữ cho Web

Không phải tất cả các phông chữ làm việc tốt trên các trang web và chỉ tốt nhất cho in ấn. May mắn thay Google Fonts, cái mà chúng ta sử dụng để nhập Open Sans vào trang Tuts+ Town của chúng ta, cung cấp cho chúng ta một danh sách tuyệt vời của phông chữ phù hợp với các trang web.

Tổng kết

Trong hướng dẫn này chúng ta đã tìm hiểu về typography chính xác là gì, xem xét các phần khác nhau của một kiểu chữ có thể phân biệt nó với những cái khác như thế nào, và kết thúc với một số mẹo chung để ghi nhớ khi làm việc với văn bản và phông chữ trên trang web. Tất cả để đạt được một mục tiêu cuối cùng: để làm cho nội dung của chúng ta dễ dàng hơn để đọc.

Tiếp theo chúng ta sẽ đi sâu vào một số quy tắc chung liên quan đến việc sử dụng màu sắc trên các trang web và thông điệp gì mà chúng ta đang giao tiếp với người dùng của chúng ta dựa trên các lựa chọn màu sắc tổng thể.

Hẹn gặp bạn trong thị trấn!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.