Lưới 8 điểm: Kiểu chữ trên web

Kiểu chữ web là khó hiểu. Bạn có biết các thực hành tốt nhất?

Khi tôi bắt đầu tìm kiếm xung quanh các trang web phổ biến để tìm ra các cách thực hành tốt nhất cho kiểu chữ web, tôi phải thừa nhận rằng tôi đã gặp khó khăn. Dưới đây là một số ví dụ về quy mô typography tôi lấy từ một vài trang web và hệ thống thiết kế phổ biến. Bạn có thể tìm thấy mô hình thống nhất?

Các mẫu được đơn giản hóa để phù hợp với quy mô tiêu chuẩn

Rõ ràng có các cách tiếp cận khác nhau để loại hệ thống. Thực tế là với tư cách là một cộng đồng web, chúng tôi không đồng ý. Tuy nhiên, giống như hầu hết các vấn đề về thiết kế, nó thực sự bắt đầu bằng cách giải quyết nhu cầu của người dùng.

Ba nguyên mẫu của hệ thống typography

Dưới đây là ba kiểu mẫu hệ thống kiểu chữ chung. Hầu hết các công ty sẽ sử dụng cả ba trong số này tại một số điểm, nhưng điều quan trọng là phải nhận ra nhu cầu cơ bản của người dùng được giải quyết theo từng hướng.

Trang web tiếp thị

  • Mục đích: Được xây dựng để kể một câu chuyện cụ thể và truyền cảm hứng cho khách truy cập dành thời gian và / hoặc tiền của họ trên trang web.
  • Yêu cầu: Mỗi kiểu chữ sẽ cần một bộ kiểu riêng và kích cỡ đa dạng sẽ dựa trên hướng nghệ thuật hơn là khớp phần tử.
  • Trường hợp sử dụng Responsive: Hệ thống sẽ cần phải uốn cong qua nhiều kích cỡ từ di động cho đến máy tính để bàn.

Kinh nghiệm web hướng đến cho bạn một cái gì đó kết thúc trong thể loại này. Những người tham vọng phá vỡ tất cả các quy tắc của typography để tạo ra những trải nghiệm hấp dẫn và quyến rũ.

Trong khi rất nhiều suy nghĩ đi vào các trang web này, trọng tâm là tạo ra một sự giật gân hơn là một hệ thống mở rộng có thể được xây dựng trong tương lai. Các trang web này thường có thời hạn sử dụng ngắn và được loại bỏ hoàn toàn cho thiết kế lại từ trên xuống dưới.

Một ví dụ nâng cao về điều này là chức năng nội suy được Leigh Taylor và Nick Jones sử dụng trên trang đích Invision.

có kích thước phông chữ: calc (32px + ((24 * (100vw - 800px)) / 799));. Kiểu chữ trên trang được tính toán tỉ mỉ để hoạt động ở mọi kích thước màn hình.

Sử dụng toán học để làm hướng nghệ thuật năng động Hướng dẫn - Leigh Taylor

Trang blog / thông tin

  • Mục đích: Để truyền tải một lượng lớn thông tin dựa trên văn bản.
  • Yêu cầu: Khu vực đọc chính có thể sử dụng hệ thống chiều cao dòng dựa trên tỷ lệ, giống như bài viết Trung bình này.
  • Trường hợp sử dụng Responsive: Sẽ có khả năng đáp ứng nhưng duy trì sự tập trung vào khả năng đọc.

Bài viết Trung bình này là một ví dụ về trải nghiệm web được xây dựng để đọc dạng dài.

Trọng tâm không phải là về việc diễn giải các hình ảnh nhỏ hoặc điền vào các biểu mẫu. Các tỷ lệ kích thước mà họ đã chọn được xây dựng đặc biệt cho khả năng đọc bị hạn chế để có được độ dài dòng mong muốn. Tôi có thể thoải mái đọc từng dòng vì kiểu chữ đã được chế tạo cẩn thận để phù hợp với nhu cầu của tôi như một người đọc.

Sản phẩm

  • Mục đích: Được xây dựng để giải quyết vấn đề người dùng như nộp thuế, quản lý repo git hoặc trực quan hóa các số liệu hiệu suất.
  • Yêu cầu: Văn bản phải phù hợp với hệ thống phân cấp thành phần. Văn bản chủ yếu được sử dụng cho nhãn, hướng dẫn và dữ liệu được hiển thị.
  • Trường hợp sử dụng Responsive: Đáp ứng tối thiểu. Các sản phẩm phát triển cao sẽ được sử dụng thiết kế thích ứng có nghĩa là trải nghiệm khác nhau cho thiết bị di động và máy tính để bàn. Trọng tâm là phân cấp các yếu tố hỗ trợ trải nghiệm người dùng.

Thiết kế Vật liệu Google Google là một ngôn ngữ thiết kế phổ biến có thể áp dụng cho nhiều trường hợp sử dụng sản phẩm.

Phương pháp khoảng cách vật liệu dựa trên hệ thống lưới thành phần 8pt và lưới đường cơ sở 4pt cho kiểu chữ. Họ cố gắng tăng tỷ lệ chiều cao dòng với số gia là 4. Chia tỷ lệ theo số gia 8 với lưới đường cơ sở của bạn có thể khó khăn vì độ cao dòng có sẵn quá xa nhau đối với một số kích thước văn bản.

Cho phép một số kích thước phông chữ đi kèm với chiều cao dòng phù hợp hơn là một con đường tuyệt vời phía trước. Bạn luôn có thể tăng khoảng cách trên hoặc dưới một dòng nhất định 4px để làm cho nó thẳng hàng với lưới nguyên tử lớn hơn.

Khi được áp dụng, hệ thống lưới đường cơ sở có khả năng căn chỉnh hệ thống không gian phần tử (lưới 8pt) với hệ thống kiểu chữ để tạo ra nhịp điệu dọc hấp dẫn trong thiết kế.

Triển khai kiểu chữ web - trong thực tế

Có thể có một giao diện người dùng có cấu trúc và có cấu trúc tuân thủ lưới 8pt cũng có khu vực đọc dạng dài.

Cho phép hệ thống lưới đường cơ sở cố định xử lý văn bản bên trong các thành phần có cấu trúc của bạn và sử dụng thang đo mô-đun để tạo trải nghiệm đọc tối ưu cho blog hoặc tài liệu bạn đã thêm vào trang web của mình.

Hầu hết các công ty sản phẩm kỹ thuật số đã làm điều này giữa trang đích tiếp thị, sản phẩm kỹ thuật số và tài liệu của họ. Việc đưa ra quyết định cấu trúc các lĩnh vực typographic này một cách riêng biệt có thể giải phóng bạn khỏi sự phức tạp không bền vững.

Trộn các loại nội dung với nhau

Cạm bẫy - Ems, rems và pixel oh my!

Để thể hiện một hệ thống rõ ràng và nhất quán, các phép đo kiểu chữ cần được giải thích dễ dàng bởi nhóm sản phẩm xây dựng nó.

Các đơn vị tương đối như rems và ems đôi khi bị hiểu nhầm và theo kinh nghiệm của tôi, điều này dẫn đến một hệ thống typography không bền vững. Ví dụ: tỷ lệ giữa kích thước phông chữ 14px và chiều cao dòng 20px nên được ghi lại theo đơn vị tương đối vì tỷ lệ đó sẽ thay đổi khi kích thước phông chữ tăng.

Xác định chiều cao của dòng là 1.4285714286em là vô lý, bởi vì hầu hết mọi người đều có thể làm được loại toán đó trong đầu. Nếu kích thước phông chữ tăng lên 16px, trình duyệt sẽ hiển thị chiều cao dòng là 22,857142px và loại phân tách pixel đó là một vấn đề đau đầu đang chờ xảy ra. Điều này tạo ra sự nhầm lẫn và là một lạm dụng của các đơn vị tương đối. Xem danh sách đầy đủ các đơn vị tuyệt đối so với tương đối ở đây.

Tại sao nhiều hệ thống thiết kế dựa trên kích thước tương đối ngày nay? Câu trả lời là khả năng tiếp cận trực tuyến.

Tuy nhiên, các trình duyệt không quy mô kích thước phông chữ cơ sở khi bạn phóng to bằng lệnh +. Có các công cụ trợ năng sẽ mở rộng kích thước phông chữ cơ sở cho người dùng cần nó. Tôi khuyên bạn nên thử nghiệm đúng cách để đảm bảo rằng nó có kinh nghiệm mà bạn muốn người dùng có. Khả năng tiếp cận hộp kiểm có thể làm tổn thương nhiều hơn nó giúp.

Sử dụng rems và ems trong trang web / ứng dụng của bạn rất mạnh mẽ. Có nhiều trường hợp sử dụng rất thú vị và chúng nên là một phần quan trọng trong bộ công cụ của bạn.

Đề nghị của tôi là sử dụng chúng một cách tiết kiệm cho đến khi bạn có một sử dụng chắc chắn cho chúng. Đưa chúng vào cốt lõi của hệ thống typography của bạn có thể mở ra cho bạn sự nhầm lẫn và trải nghiệm người dùng bất ngờ.

Kiểu chữ 8pt

Phần mạnh mẽ nhất của khái niệm lưới 8pt là khả năng thúc đẩy tính nhất quán trong các thiết kế của bạn. Bạn sẽ cần phải đánh giá nhu cầu của người dùng và cách tốt nhất để mở rộng kiểu chữ của bạn để đáp ứng những nhu cầu đó.

Tôi rất khuyến khích thiết kế và kỹ thuật hợp tác hoàn thiện các tiêu chuẩn này cho một công ty / sản phẩm.

Dưới đây là các mẫu từ một vài cái tên quen thuộc: Google Material, Pivotal, Atlassian, Intuit.

Các mẫu được đơn giản hóa để phù hợp với quy mô tiêu chuẩn

Tài liệu tham khảo và đọc liên quan

  • Priyanka Godbole: Một khuôn khổ để tạo ra một hệ thống khoảng cách hài hòa và có thể dự đoán được để chuyển giao thiết kế nhanh hơn
  • Richard Rutter: Các yếu tố của phong cách đánh máy được áp dụng cho web
  • Ian Yates: Cách thiết lập thang đo kiểu chữ mô-đun
  • Nathan Curtis: Không gian trong các hệ thống thiết kế
  • Vincent De Oliveira: CSS lặn sâu: số liệu phông chữ, chiều cao dòng và căn dọc
  • Kezz Bracey: Tại sao bạn nên sử dụng Bố cục dựa trên Rem

Các bài viết lưới 8 điểm trước đây:

  1. Giới thiệu về Hệ thống lưới 8 điểm
  2. Lưới 8 điểm: Biên giới và bố cục
  3. Lưới 8 điểm: Nhịp điệu dọc

Câu hỏi:

Đây là một cái gì đó tôi vẫn đang khám phá. Bạn có một ví dụ tốt để chia sẻ? Bạn có cách tiếp cận khác với hệ thống typography 8pt không?

Nếu bạn có ý nghĩ, xin vui lòng để lại nhận xét hoặc tiếp cận trên Twitter.