it-swarm-vi.tech

Có một kích thước phông chữ tối ưu?

Đối với hầu hết các dự án trang web mà tôi đã tham gia, kích thước phông chữ cho văn bản hàng loạt thường là 12px - 13px, nhưng tôi tự hỏi liệu đây có phải là kích thước tốt không. Tôi nhớ đã đọc một bài báo nói rằng kích thước phông chữ trên các trang web nên lớn hơn nhiều, khoảng 17px cho văn bản số lượng lớn để phù hợp với kích thước phông chữ được in.

Có một kích thước phông chữ tối ưu. Khi nào một cái gì đó quá lớn/nhỏ cho người dùng trung bình?

Có bất kỳ pro/cons cho kích thước phông chữ nhỏ/trung bình/lớn?

Cập nhật :
[.__.] Tôi muốn có trải nghiệm của bạn với các phản ứng thực tế của người dùng, v.v ... Thật dễ dàng với điều này, điều này quá lớn hoặc nhỏ, nhưng tôi đã học được rằng người dùng đôi khi bất ngờ và phản ứng khác vớiý kiến ​​chuyên gia.

Ngoài ra khả năng thay đổi kích thước phông chữ là một cuộc thảo luận tốt, nhưng đó không phải là những gì được yêu cầu ở đây. Điều tôi quan tâm khi biết thêm về, là cách người dùng phản ứng với các kích thước phông chữ khác nhau, chứ không phải cách họ có thể thay đổi nó.

56
googletorp

Đây là một chủ đề tranh luận rộng rãi. Một trong những cách tốt nhất mà tôi đã thấy điều này được giải thích là từ bản trình bày Thiết kế dành cho nhà phát triển: làm cho tiền tuyến của bạn giảm bớt bởi Idan Gazit.

Điều này có slide sau: alt text Đây là văn bản 16px trên màn hình bình thường và văn bản 12pt trong sách. Thông điệp là 12pt là tuyệt vời cho một cuốn sách, nhưng cũng thường được tổ chức gần với người đọc hơn là một màn hình. Nếu tính khoảng cách, 16px trên màn hình và 12pt trong sách dường như có cùng kích thước. 12pt trên giấy = 16px trên màn hình

Có tất cả các loại ngoại lệ, trong đó văn bản nhỏ hơn được ưa thích. Nhưng để dễ đọc văn bản dài hơn, tôi đồng ý với 16px.

Bạn nên thay đổi các đơn vị có thể mở rộng như em hoặc % so với các đơn vị có kích thước cố định như pt hoặc px. Đọc thêm: Kích thước phông chữ CSS: em so với px so với pt so với phần trăm

34
user745

Không có thứ gọi là cỡ chữ tối ưu. Tìm kiếm một nghĩa là bạn đang quên một điều quan trọng: mức độ dễ đọc của văn bản không chỉ là một sản phẩm có kích thước.

Tôi đã xây dựng khoảng một chục trang web với tư cách là nhà thiết kế UI trong năm năm qua và tất cả chúng đều có đối tượng khác nhau. Một trong những điều tôi tìm thấy là kích thước không phải là yếu tố lớn nhất. Đó là sự kết hợp của các khía cạnh khác nhau liên quan đến hiển thị văn bản:

  • tương phản
  • họ phông chữ
  • chiều cao giữa các dòng
  • vị trí trên trang

Kết hợp những điều này dẫn đến một số liệu sơ bộ cho mức độ dễ đọc tổng thể và tôi thấy rằng đó là mục tiêu thiết kế quan trọng nhất cho văn bản.

Như một giai thoại từ thử nghiệm (kể từ khi bạn hỏi): Tôi đã làm việc trên một trang cộng đồng với 700k lượt truy cập hàng tháng trong đó đối tượng chính là người dùng không am hiểu về máy tính. Chúng tôi đã sử dụng 12px Verdana cho loại cơ thể và Arial 14px-16px cho các tiêu đề. Đôi khi, chúng tôi sẽ giảm xuống 11px Verdana màu xám cho văn bản ít quan trọng hơn. Khi thực hiện các bài kiểm tra khả năng sử dụng trên trang web, chúng tôi đã nhận được phản hồi không phải về kích thước của văn bản, mà là về màu sắc xung quanh của thiết kế tạo cảm giác như bạn đang nhìn chằm chằm vào đèn. Chúng tôi giải thích điều này vì trang web quá sáng và điều chỉnh độ tương phản của toàn bộ thiết kế để kém sáng hơn. Một phần do những thay đổi này và một phần do thay đổi trong cấu trúc điều hướng, chúng tôi đã thấy số lượt xem trang tăng theo tháng trên mỗi khách truy cập.

Một điều cần nhớ về kích thước phông chữ nhỏ là chúng có một mục đích: khi bạn cần một cái gì đó nhỏ hơn một cái gì đó (duh!). Nhưng là một nhà thiết kế giao diện người dùng, điều quan trọng cần nhớ là công việc của bạn là tạo sự rõ ràng và khả năng sử dụng (trong số những thứ khác) trong giao diện và bởi khử nhấn mạnh một số yếu tố của UI bạn có thể cải thiện khả năng sử dụng của nó. Tùy thuộc vào bạn để quyết định những yếu tố nào sẽ được thu nhỏ lại và những khía cạnh nào của văn bản sẽ được sửa đổi (từ danh sách của tôi ở trên).

20
Rahul

12px dường như hoạt động tốt đối với hầu hết mọi người. Có một cái gì đó ở 17px làm cho nó khó đọc hơn và vì vậy nó có dưới 10px. Tôi nghĩ 12-13px là một hướng dẫn tốt.

Nhưng thực sự, bạn nên đặt kích thước văn bản của bạn thành một cái gì đó như 1em. Điều này là do một số trình duyệt sẽ không cho phép người dùng thay đổi kích thước văn bản nếu nó được đặt bằng pixel. Cho dù bạn có kích thước văn bản nào, những người có đôi mắt sắc nét sẽ làm cho nó nhỏ hơn để họ có thể đọc nhiều hơn và những người có thị lực kém sẽ làm cho văn bản lớn hơn.

Chỉ cần đặt mọi thứ ở mức 1em và để mọi người và trình duyệt của họ giải quyết phần còn lại.

Thật tốt khi kiểm tra trang của bạn với các kích thước phông chữ khác nhau, để xem bố cục có còn quản lý được không.

9
Vincent McNabb

Theo các bằng chứng khoa học gần đây:

  • 18 và 22 điểm sẽ dẫn đến khả năng đọc mục tiêu được cải thiện đáng kể (được đo bằng máy theo dõi mắt)
  • 10 và 12 điểm sẽ dẫn đến sự hiểu biết bị suy giảm đáng kể (được đo bằng các câu hỏi hiểu)
  • càng lớn càng tốt, bởi vì khả năng đọc mục tiêu liên tục cải thiện với việc tăng kích thước phông chữ.

Đừng lấy từ của tôi cho nó. Đọc chi tiết trong bài báo khoa học .

7
Martin

Kích thước phông chữ tối ưu là riêng lẻ và được đặt bởi hệ điều hành/trình duyệt của người dùng. Vì vậy không thay đổi nó.

Nếu bạn cần phóng to phông chữ (ví dụ: tiêu đề), hãy thực hiện tương đối (ví dụ: 200% hoặc 2em).

Không bao giờ thu nhỏ kích thước phông chữ và luôn giữ độ tương phản tốt để duy trì khả năng đọc.

5
George Pavelka

Không.
[.__.] ... không phải trong px, dù sao đi nữa.

Các đơn vị phù hợp để thể hiện kích thước tối ưu, nếu có một, sẽ là góc phụ thuộc vào võng mạc.

Nếu bạn đang xem px, bạn chỉ nhìn vào một trong ba yếu tố cần thiết để xác định khả năng đọc1:

Dấu chấm, hoặc định nghĩa đúng về "độ phân giải" (pixel/khoảng cách), là cách bạn chuyển đổi từ px sang khoảng cách thực tế.

Tất nhiên, khoảng cách đọc bạn cần, bởi vì các nhân vật có cùng chiều không thể đọc được ở mọi nơi.

... và tất nhiên khả năng đọc đi lên với:

  • px cao hơn
  • điểm chấm cao hơn (hoặc độ phân giải thấp hơn)
  • khoảng cách đọc thấp hơn

1Ngoài ra còn có màu văn bản, màu nền, phông chữ, v.v. bạn cần một quyết định chỉ dựa trên chiề.

3
A.M.

Bạn không nên cố gắng đặt kích thước phông chữ. Bạn có thể sử dụng + N để biểu thị "làm cho cái này lớn hơn đường cơ sở" (hoặc -N để làm cho nhỏ hơn). Bất kỳ kích thước bạn chỉ định sẽ sai trong một số trường hợp; tùy chọn khả thi duy nhất không yêu cầu người dùng thực hiện hành động khắc phục trên trang web của bạn là để trình duyệt quyết định.

2
Monica Cellio

Bạn nên không bao giờ sử dụng pixel cho kích thước phông chữ. Cố gắng đọc phông chữ 14px trên màn hình 12 "hỗ trợ độ phân giải Full HD sẽ cung cấp cho bạn văn bản ở các ký tự cao 1-2 mm (và đau đầu trong chưa đầy một giờ).

2
JanC

12px là tốt, nhưng điều quan trọng là người dùng có khả năng tự tăng kích thước phông chữ và trang web của bạn không bị hỏng khi điều này xảy ra.

2
Ryan Shripat

Có một số bài viết kỳ lạ và quan niệm sai lầm trong chủ đề này. Dường như nhiều người muốn bỏ qua khoa học và các khía cạnh được nghiên cứu kỹ về cách chúng ta đọc và hiểu văn bản. Khi điều đó xảy ra, tôi đang trong quá trình nghiên cứu các tiêu chuẩn mới về chính chủ đề này, vì vậy đây là một chút về tình trạng hiện tại của nghệ thuật:

Khoa học nghệ thuật

Nghiên cứu hiện tại đã xác định rằng tốc độ đọc tối ưu cho các cá nhân nhìn thấy bình thường, với phông chữ ở độ tương phản tối đa, là chiều cao x giữa 0,2 ° và 2 ° của góc nhìn. Chiều cao X là kích thước dọc thực tế của chữ thường x của phông chữ. Rõ ràng kích thước phông chữ thực tế sẽ thay đổi dựa trên khoảng cách xem, nhưng may mắn thay, pixel tham chiếu CSS - px - dựa trên góc nhìn. Góc nhìn 0,2 ° được gọi là kích thước in quan trọng, vì đó là điểm đạt được tốc độ đọc tối đa. (Trên 2 °, nó quay xuống.)

Một px là 0,0213 độ hoặc 1,278 phút cung. Điều này dựa trên một thiết bị có mật độ điểm ảnh 96dpi @ khoảng cách 28 inch. Do đó, các nhà sản xuất thiết bị có thể sử dụng px tham chiếu để đặt kích thước dựa trên khoảng cách hình ảnh dự kiến ​​/ dự kiến. Điều này được thảo luận về các tiêu chuẩn CSS của W3C. Các nhà sản xuất thiết bị sử dụng px tham chiếu để đặt kích thước rasterizing thực tế dựa trên khoảng cách xem dự định. 16px sẽ không nhất thiết phải là 16 pixel thiết bị. Trên iPhone có tỷ lệ pixel 2: 1, nó sẽ là 32 pixel thiết bị.

Do đó, kích thước in quan trọng cho web là chiều cao x 9,4px. Tùy thuộc vào thiết kế phông chữ cụ thể, điều này liên quan đến một phông chữ trong khoảng từ 17px đến 20px. Điều này dẫn đến các tiêu chuẩn tiếp cận chỉ ra rằng 18px là kích thước phông chữ mong muốn tối thiểu.

Nhưng xin chờ chút nữa

Ngoài ra còn có một mức quan trọng độ tương phản. Các kích thước phông chữ được đề cập ở trên liên quan đến độ tương phản tối đa. Nhưng những gì về độ tương phản thấp hơn? Nhiều nhà thiết kế đang ảnh hưởng nghiêm trọng đến khả năng đọc của trang web của họ bằng cách sử dụng màu tương phản thấp hơn. Một phần của điều này là do sự thất bại của WCAG 2.0 trong việc chỉ định độ tương phản chính xác liên quan đến tần số không gian. 4.5: 1 là nhiều hơn mức cần thiết cho một tiêu đề lớn, nhưng 4.5: 1 là không đủ cho văn bản cơ thể mỏng nhỏ.

Đối với tầm nhìn thông thường, độ tương phản tới hạn có thể thấp tới 10% đối với các tiêu đề lớn về chất béo ở mức cao nhất của chức năng độ nhạy tương phản. Nhưng ở tần số không gian rất cao của các phông chữ nhỏ mỏng, độ tương phản cần phải cao hơn 20 lần. Xem sơ đồ sau đây, trong đó tất cả các văn bản có cùng màu CSS (và điều này thậm chí không thảo luận về cách đối chiếu văn bản đối chiếu văn bản tương phản ngoài tất cả sự công nhận).

contrast sensitivity curve sowing relation to text size

Do đó, kích thước Phông chữ cùng với độ tương phản và một số tính năng thiết kế khác hoạt động cùng nhau cung cấp một văn bản "dễ đọc nhất". Bất kể, kích thước phông chữ 12px mà nhiều áp phích trong chủ đề này được đề xuất là quá nhỏ, và việc họ đưa ra con số đó là điều ai cũng đoán được. Bạn có thể sử dụng một cái gì đó như 12px cho một thông báo bản quyền hoặc thứ gì đó mà bạn không muốn ai đọc, nhưng 12px không có nghĩa là một kích thước phù hợp cho văn bản nội dung.

Glyphs có nó

Đề xuất chính thức là kích thước tối thiểu 18px, tuy nhiên một số phông chữ như Verdana (một phông chữ được thiết kế để sử dụng web) có thể hoạt động tốt xuống tới 16px. Nhưng Times New Roman không bao giờ nên được đặt ở mức dưới 18px vì nó có chiều cao x rất nhỏ và khả năng đọc kém (cảm ơn Microsoft, ugh). Đối với một phông chữ khác mà Microsoft đã xử lý, chúng ta hãy cố gắng không sử dụng "Courier New", trong đó Microsoft đã sử dụng phông chữ đơn cách thường có thể đọc được và sau đó làm cho nó quá mỏng và nhẹ. Giống như, họ đã nghĩ gì?

Đối với một số cân nhắc chung về lựa chọn phông chữ cho khả năng truy cập và dễ đọc, tôi có sơ bộ này PDF trên tài khoản cổng nghiên cứu của tôi mà bạn có thể tải xuống miễn phí: https: //www.researchgate. net/ấn phẩm/336679010_Evaluating_Fonts_Font_F Family_Selection_for_Accessibility_Display_Readability

Một bình luận kết thúc quan trọng nhất

Quan trọng hơn những gì bạn đặt làm kích thước phông chữ, là bạn cho phép người dùng ZOOM văn bản đến bất kỳ kích thước nào họ muốn mà không phá vỡ nội dung. Tiêu chuẩn hiện tại chỉ định thu phóng 200% mà không phá vỡ, nhưng điều đó là không đủ. 500% là hợp lý hơn nhiều từ quan điểm của người dùng.

XEM XÉT:

20/20 là tầm nhìn trung bình. Các cỡ chữ tôi đề cập ở trên (18px) dựa trên người dùng trung bình 20/20 này. 20/40 cần TWICE kích thước đó cho cùng một nhận thức. 20/200 người dùng cần TEN TIMES kích thước đó (nghĩa là họ có thể muốn phóng to 1000%). Tôi đề cập tối thiểu 500% vì nó xem xét hàm ý của thực tế là trang có phông chữ lớn hơn trên đó cũng như kích thước vật lý của thiết bị.

Một công nghệ còn thiếu đang được nghiên cứu hiện nay là phóng to các phông chữ nhỏ nhất nhưng thu nhỏ các phông chữ lớn hơn ít hơn, để các tiêu đề lớn không trở nên quá lớn để có thể đọc được.

Trong khi đó, chỉ cần xem xét rằng một phần lớn những người đang đọc trang web của bạn không có màn hình tốt như của bạn và không có thị lực tốt như của bạn. Nếu bạn muốn và biết được làm thế nào một số người kém may mắn có thể nhìn thấy trang web của bạn, hãy mua một màn hình độ phân giải thấp, rẻ tiền, nhỏ (bạn có thể có một bộ lưu trữ) và đặt nó cách xa 3 đến 4 feet (tức là nhiều hơn một cách xa mét). Bạn có thể đọc trang web của bạn? Bây giờ hãy phóng to văn bản, liệu trang web của bạn có bị hỏng do giới hạn của màn hình nhỏ không?

Đây là loại vấn đề mà nhiều người dùng gặp phải với nhiều trang web. Chỉ vì bạn có thị lực 20/15 và màn hình retina 32 "đẹp không có nghĩa là người dùng của bạn có mức độ gần như ở đó.

-Andy

0
Myndex

Tôi đồng ý với Erik, 16pt dường như là tiêu chuẩn tốt nhất theo khả năng đọc . Đọc thêm tại đây: http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/

0
Matt Rockwell