Tỷ lệ tiêu chuẩn cho typography trên web là gì?


25

Khi đặt ra một thiết kế web, tôi thường cố gắng đảm bảo rằng kiểu chữ của tôi tỷ lệ thuận và nhất quán. Tuy nhiên, tôi không thể tìm thấy bất kỳ bài viết hay tài nguyên dứt khoát nào về tỷ lệ và kích cỡ nên được sử dụng. Cụ thể, các khuyến nghị hoặc tiêu chuẩn thực hành cho:

  • Cỡ chữ
  • Chiều cao giữa các dòng
  • Chiều rộng đường
  • Dãn cách dòng

Vui lòng xem xét cả đoạn văn bản và tiêu đề trong câu trả lời của bạn. Ngoài ra, bất kỳ nghiên cứu nào về hiệu quả của các tỷ lệ hoặc số liệu khác nhau sẽ rất hữu ích.

Câu trả lời:


18

Các yếu tố của phong cách đánh máy của Robert Bringhurst là một tài liệu tham khảo kỹ lưỡng và tuyệt vời cho những thứ như thế này. Nó dài nhưng rất có giá trị.

Rất nhiều nhà thiết kế đề xuất một lưới các đường chuẩn để một dòng + phần đệm sẽ luôn nằm gọn trong khoảng 16 pixel. Vì vậy, bất cứ điều gì ít hơn thế sẽ có chiều cao dòng là 16, mọi thứ ở trên sẽ có chiều cao dòng 32.

Độ dài lý tưởng của một dòng để đọc văn bản được giữ ở mức 45 ký tự cho một số và 55-75 bởi các nguồn khác.

Có một số trung bình phổ biến của các trang web ở đây: Các mẫu thiết kế kiểu chữ và thực tiễn tốt nhất


1

Tôi sẽ nói bắt đầu với đoạn văn ở 16px và sử dụng chuỗi Fibonacci để tính phần còn lại. Có vẻ như các trình duyệt chính đang sử dụng logic này. Trong suốt nhiều năm (để nghiên cứu trong tương lai, sử dụng các yếu tố của Phong cách typographic: Phiên bản 4.0, của Robert Bringhurst, Hartley và Marks), hàng đầu được đặt thành 12pt cho phông chữ 10pt.

Chuyển đổi 12pt thành pixel chúng ta có được phông chữ cơ bản là 16px.

Hầu hết các Bảng định kiểu mặc định của Trình duyệt sử dụng 16 pixel cho văn bản đoạn văn của họ khi bạn có thể tự kiểm tra trên DOM hoặc bằng cách đọc https://www.w3.org/TR/CSS21/sample.htmlhttp: // list. w3.org/Archives/Public/www-style/2008Jul/att-0124/defaultstyles.html

Vấn đề chúng ta gặp phải ngày nay chính xác là chúng ta đang nói về một kiểu chữ mới. Kiểu chữ web hiện tại cần phải phù hợp với các thiết bị khác nhau hoàn toàn khác với các khái niệm trong quá khứ, chẳng hạn như các khái niệm được mô tả trên Các yếu tố về Phong cách đánh máy của Robert Bringhurst. Mặc dù đây là một cuốn sách tuyệt vời nhưng thực tế là nhà thiết kế hiện đại cần mã. Tôi thường xem xét một ma trận tiêu chuẩn từ các bảng định kiểu trình duyệt chính bằng cách tạo bộ xương của tệp HTML với h1, h2, h3, h4, h5, h6, đoạn, chân trang cơ bản. Tôi kiểm tra biểu định kiểu trình duyệt để hiểu kích thước của kích thước pixel tiêu chuẩn mà chúng sử dụng chiều cao dòng và phân cấp trên các tiêu đề. Trước khi kích thước kiểu chữ web được quy định bởi loại di chuyển kim loại / gỗ nhưng từ năm 1985, với thỏa thuận giữa Adobe và Apple, mọi thứ bắt đầu thay đổi. Tôi cho rằng ngày nay, các cơ quan quản lý chính của các khái niệm kiểu chữ là Apple, Safari, Windows, với Internet Explorer, Chrome, Firefox ... Bạn sẽ phải xem biểu định kiểu trình duyệt của họ để phù hợp với kiểu chữ của bạn với những gì thực sự sẽ được hiển thị và trong các thiết bị khác nhau. Bạn vẫn nên tuân theo các thực tiễn từ Các yếu tố về phong cách đánh máy của Robert Bringhurst, đây là một cuốn sách tuyệt vời, hoặc theo hệ thống trình tự Fibonacci. Tôi thường cập nhật các thay đổi trên bảng định kiểu trình duyệt và đọc thông số w3 tại đây: Bạn vẫn nên tuân theo các thực tiễn từ Các yếu tố về phong cách đánh máy của Robert Bringhurst, đây là một cuốn sách tuyệt vời, hoặc theo hệ thống trình tự Fibonacci. Tôi thường cập nhật các thay đổi trên bảng định kiểu trình duyệt và đọc thông số w3 tại đây: Bạn vẫn nên tuân theo các thực tiễn từ Các yếu tố về phong cách đánh máy của Robert Bringhurst, đây là một cuốn sách tuyệt vời, hoặc theo hệ thống trình tự Fibonacci. Tôi thường cập nhật các thay đổi trên bảng định kiểu trình duyệt và đọc thông số w3 tại đây:https://www.w3.org/TR/html401/struct/global.html#h-7.5.5 Mặc dù vậy, tôi nghĩ rằng lĩnh vực Thiết kế cần phải xem xét điều này và tôi thấy rằng giáo dục vào thực tiễn không được cập nhật với thực tế hiện nay. Bạn cũng có thể đọc thêm ở đây trên blog của tôi: https://road-to-resilience.blog/2019/11/21/the-typographic-thing/


Xin chào @EstelaG và chào mừng bạn đến với GD.SE! Chúng tôi có các quy tắc nghiêm ngặt đối với thư rác và câu trả lời trong các liên kết. Tôi ghét nhìn thấy câu trả lời của bạn được gắn cờ. Bạn nên chỉnh sửa câu hỏi của bạn để tóm tắt những điểm chính của bài viết.
tò mò
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.