Computer >> Máy Tính >  >> Lập trình >> CSS

Thang loại là gì và tại sao bạn cần nó?

Thang loại là một tập hợp các kích thước phông chữ được chọn lọc cẩn thận mà chúng tôi sử dụng để đại diện cho các thành phần văn bản khác nhau nhằm thiết lập bố cục cân đối và hài hòa trong các sản phẩm của chúng tôi. Bằng cách sử dụng nhất quán các kích thước phông chữ giống nhau từ thang loại của riêng chúng tôi, chúng tôi có thể tự động tạo ra sự đồng nhất trong thiết kế của mình và tránh một sản phẩm trông giống khắp nơi về thứ bậc và mức độ ưu tiên.

Thang loại là gì và tại sao bạn cần nó?

Tỷ lệ kiểu còn được gọi là “tỷ lệ kiểu chữ”.

Hạn chế thực thi tính nhất quán

Về nguyên tắc, tỷ lệ kiểu hoạt động giống như cách mà tỷ lệ giãn cách và bảng màu làm. Các tùy chọn thiết kế của bạn càng hạn chế, thì càng dễ dàng thực thi tính nhất quán, về cách sản phẩm của bạn trông và cảm nhận. Nhất quán là một phần quan trọng trong việc xây dựng niềm tin với khán giả của bạn.

Thang loại là một cách hạn chế của bạn tự do với tư cách là người sắp chữ hoặc nhà thiết kế, đổi lại bạn được cung cấp cho khán giả của bạn trải nghiệm người dùng nhất quán.

Càng ít thông tin mới (tất cả hình ảnh đều là thông tin cần xử lý) mà khán giả của bạn phải hiểu khi họ tiếp xúc với sản phẩm của bạn, thì nó càng ít gây nhầm lẫn và mệt mỏi. Điều cuối cùng bạn muốn khi mọi người truy cập trang web hoặc xem sản phẩm của bạn là làm cho họ bối rối hoặc mệt mỏi.

Cách chọn thang loại cho dự án của bạn

Cho dù bạn đang viết bài đăng trên blog hay thiết kế nhãn rượu, bạn sẽ phải làm việc với một số yếu tố văn bản khác nhau, cả về kích thước phông chữ và đôi khi là các kiểu chữ khác nhau (font-family).

Để đơn giản hóa mọi thứ, hãy giả sử bạn đang làm việc với one kiểu chữ. Câu hỏi chính bạn cần trả lời là dự án của bạn cần bao nhiêu kích thước phông chữ để thể hiện tối ưu các thành phần văn bản khác nhau của nó.

Sau đây là một số kiểu phần tử văn bản phổ biến nhất:

  • Tiêu đề &Tiêu đề
  • Đoạn văn và danh sách (nội dung văn bản)
  • Chú thích
  • Phụ đề
  • Dấu ngoặc kép / dấu ngoặc kép

Nếu bạn là một nhà văn, có thể bạn đang sử dụng tất cả chúng thường xuyên.

Bạn thường chọn một kích thước phông chữ cho mỗi loại phần tử văn bản ở trên - với tiêu đề là ngoại lệ. Một nhà thiết kế chuyên nghiệp thường sẽ sử dụng bất cứ thứ gì từ 1 đến 6 tiêu đề tùy thuộc vào bản chất của dự án của họ.

Đối với hầu hết các dự án loại trang web, bạn sẽ thấy mình sử dụng tối thiểu năm các kích thước phông chữ khác nhau cho quy mô của bạn.

Chọn thang đo của bạn

Vì vậy, làm thế nào để chúng tôi xây dựng quy mô của chúng tôi? Làm cách nào để chúng tôi tìm được kích thước phông chữ phù hợp để đại diện cho từng phần tử văn bản và làm cách nào để chúng tôi đảm bảo rằng mỗi phần tử văn bản hoạt động tốt với các phần tử văn bản? Có hai cách bạn có thể xây dựng tỷ lệ loại của mình:

  1. Sử dụng mẫu tỷ lệ loại hiện có
  2. Nhãn cầu + thử và sai
  3. Sự kết hợp của 1 và 2

Để sử dụng tùy chọn thứ hai (nhãn quan + thử và sai), bạn cần phải là một người sắp chữ có kinh nghiệm.

Nếu bạn không cảm thấy thoải mái khi tự mình nghĩ ra kích thước phông chữ, bạn có thể tận dụng một trong những tỷ lệ loại hiện có đã được tạo cho bạn, ví dụ:từ Material Design:

Thang loại là gì và tại sao bạn cần nó?

Đó là một thang đo loại vững chắc và đối với người mới bắt đầu, tốt hơn hết là áp dụng một mẫu do các nhà thiết kế chuyên nghiệp cung cấp, thay vì chỉ đoán theo cách của bạn để đạt được kết quả. Chỉ cần cẩn thận khi sử dụng các thang loại của các nhà thiết kế khác và nhận biết rằng các kiểu chữ khác nhau yêu cầu các thang loại khác nhau.

Không có một kích thước nào phù hợp với tất cả trong kiểu chữ, vì vậy nếu bạn quyết định sử dụng một tỷ lệ hiện có, như tỷ lệ loại mà Material Design cung cấp, đừng sử dụng nó một cách mù quáng. .

Nếu bạn đang sử dụng họ phông chữ khác với Roboto cho dự án của mình, bạn vẫn có thể sử dụng mẫu của Material Design làm điểm bắt đầu, nhưng tùy thuộc vào cấu trúc kiểu chữ của bạn, bạn có thể phải điều chỉnh một số thứ để làm cho nó hoạt động bình thường.

Sử dụng trình tạo tỷ lệ kiểu

Bạn cũng có thể sử dụng bộ tạo tỷ lệ kiểu, ví dụ:từ type-scale.com. Trang web tuyệt vời này cho phép bạn chọn giữa các thang đo toán học khác nhau (dựa trên thang âm nhạc thực) và tự động tạo biểu định kiểu CSS cho bạn.

Bạn có thể kiểm tra hàng trăm họ phông chữ (thông qua Google Phông chữ) và 8 mẫu tỷ lệ kiểu khác nhau. Bạn thậm chí có thể tạo thang đo tùy chỉnh của riêng mình (không dành cho người mới bắt đầu).

Cuộn xuống trên trang web để đọc hướng dẫn về cách sử dụng trình tạo.

Mặc dù không có gì đảm bảo, nhưng hầu như bạn sẽ luôn đưa ra kết quả hài hòa hơn bằng cách áp dụng một trong các thang loại đã được chứng minh từ type-scale.com, thay vì bạn chỉ sắp xếp nó.

Đó là lý do tại sao tôi khuyên bạn nên kết hợp các đề xuất 1 và 2 từ danh sách của tôi trước đó:chọn một mẫu hiện có làm điểm bắt đầu, chẳng hạn như Thiết kế Vật liệu hoặc một trong các quy mô từ type-scale.com và sau đó chỉnh sửa nó theo nhu cầu của bạn thông qua dùng thử và lỗi.

Cách duy nhất để trở thành một nhà sắp chữ giỏi hơn là thông qua thử nghiệm, nhưng sẽ không có hại gì nếu sử dụng một số kiến ​​thức chung để hướng dẫn bạn đi đúng đường.