Phông chữ tốt nhất để cải thiện trải nghiệm đọc


13

Tôi đang xây dựng một trang web với mục đích chính là phục vụ nội dung (lập pháp) và tôi muốn cung cấp trải nghiệm đọc tốt nhất cho người dùng. Bạn có thể xem trang ví dụ tại:

http://iura.cl/cc/44

Như bạn có thể thấy, tôi đã loại bỏ mọi thứ mà hiện tại tôi đang sử dụng Telex webfont. Tôi cũng có một tùy chọn để đọc vào ban đêm nên giảm độ chói:

http://iura.cl/cc/44?estilo=nocturno

Tôi tự hỏi những gì tôi nên xem xét về phông chữ mà tôi chọn để đảm bảo nó dễ đọc, nếu có bất kỳ hướng dẫn để tuân thủ?


2
"Phông chữ nào bạn khuyên dùng" đơn giản là câu hỏi quá rộng để chúng tôi trả lời. Cũng lưu ý rằng mặc dù phông chữ chắc chắn là một phần chính của mức độ 'dễ đọc', nhưng cũng có rất nhiều biến số khác (độ rộng cột, khoảng cách dòng, màu sắc, gợi ý, bố cục, v.v.)
DA01

@ DA01 có thể có một hướng dẫn mà bạn có thể đề nghị?
Dan


1
Câu hỏi có vẻ tốt đối với tôi - đó không phải là "Bạn khuyên dùng phông chữ nào", đó là "Cách chọn phông chữ dễ đọc cho trang web " - hàng đống tiêu chí.
user56reinstatemonica8

Câu trả lời:


10

Trên thực tế có một số nguyên tắc khá đơn giản nếu tiêu chí số một của bạn là phông chữ dễ đọc cho một trang web .

  1. Nghĩ chính thống. Nhờ @font-facebạn có thể chọn từ hàng ngàn và hàng ngàn phông chữ - nhưng các phông chữ ít phổ biến hơn hoặc mới hơn thường có vấn đề kết xuất giữa các trình duyệt và hệ điều hành, đôi khi ngay cả khi chúng đến từ những người sáng lập đáng kính. Nếu khả năng đọc là ưu tiên của bạn và bạn không muốn thực hiện một số lượng lớn thử nghiệm trên nhiều trình duyệt chéo, bạn có thể muốn chơi an toàn và sử dụng phông chữ đáng tin cậy, đã thử và thử nghiệm. Các phông chữ an toàn trên web cũ như VerdanaGeorgiađược đặt cược an toàn vì chúng được sử dụng rộng rãi, chúng sẽ được kiểm tra ngay cả trong các thiết lập trình duyệt / HĐH hiếm hơn. Thêm vào đó, sự quen thuộc hỗ trợ dễ đọc.
  2. Chiều cao x cao, và rộng. Bạn không biết chất lượng hoặc mật độ pixel của màn hình trình đọc của bạn là gì, vì vậy, nếu bạn đang ưu tiên khả năng đọc, hãy đảm bảo các tính năng phân biệt quan trọng của các chữ cái được thêm rõ ràng. Các phông chữ được thiết kế để có thể đọc được trên web, như VerdanaGeorgia, sử dụng càng nhiều pixel càng tốt cho chiều cao x trong đó các chi tiết chính của chữ cái và sử dụng các pixel tối thiểu trên các mức tăng hoặc giảm dần trong đó một hoặc hai pixel pixel là đủ để dễ dàng nói a btừ một ohoặc a p.
  3. Không quá nhẹ. Loại ánh sáng trông tuyệt vời trên màn hình in hoặc mật độ pixel cao - nhưng có một lý do chính đáng tại sao nó hiếm khi được sử dụng trên màn hình cho đến khi ios7 và thậm chí còn gây tranh cãi: nếu người xem không xem trong điều kiện tối ưu, như màn hình chất lượng cao ổn định chiếu sáng trong nhà, nó có nguy cơ dễ đọc. Đi cho một phông chữ với trọng lượng thường xuyên tốt - tôi đã đề cập đến VerdanaGeorgia?

Tất nhiên, có rất nhiều phông chữ đáp ứng các tiêu chí này ngoài VerdanaGeorgiatất nhiên, và hai phông chữ này đôi khi được coi là hơi nhàm chán vì cho đến năm 2009 hoặc khi @fontface được sử dụng rộng rãi, chúng là phông chữ được sử dụng cho hầu hết các trang web .

Nhưng bạn thực sự không thể sai với chúng - chúng được thiết kế để dễ đọc web và mọi kết hợp trình duyệt và hệ điều hành sẽ được kiểm tra để hiển thị chúng tốt.


Chỉnh sửa: Khi người bán webtype và foundaries làm đi đến những rắc rối của thử nghiệm để có thể đọc tốt, họ đang có khả năng để kêu la về nó trong tiếp thị của họ. Ví dụ: sê-ri "Reading Edge" trên webtype (mẹo đội mũ cho Chris Burton, người đã đề cập đến vấn đề này ở đây ). Tuy nhiên, làm bài kiểm tra rộng rãi.


1
Tôi không phải là một nhà thiết kế và tôi có một số vấn đề với đôi mắt của tôi. Tôi thích đọc một số văn bản lập pháp, nhưng đôi khi tôi nghĩ rằng trang web của Brazil bị tổn thương, vì vậy tôi đã lấy gợi ý của bạn (Verdana) và đưa vào một plugin có tên là Phong cách , với chiều cao 1,5 dòng, cỡ chữ 16px và màu đen. Bây giờ tôi rất thoải mái.
Fabio Montefuscolo

5

Ok tôi sẽ tiếp tục và đưa ra suy nghĩ của tôi về điều này. Không có "phông chữ tốt nhất" cuối cùng cũng không thể có bởi vì việc chọn một phông chữ phụ thuộc vào nhiều khía cạnh khác nhau. Những gì có thể là một "phương pháp tốt nhất để chọn một phông chữ".

Vì vậy, những điều cần xem xét để giúp chọn phông chữ tốt nhất cho dự án của bạn;

Phương tiện: Phông chữ sẽ được hiển thị như thế nào, giấy, vải, trực tuyến, thiết bị di động, v.v. Bạn muốn đảm bảo rằng bạn đang chọn một phông chữ phù hợp với phương tiện mà nó sẽ được hiển thị, ví dụ như một khối Times New Roman có thể tốt cho một tài liệu được in nhưng trên màn hình (đặc biệt là màn hình nhỏ), một khối Times New Roman có thể khá khó đọc. Bạn cũng muốn xem những gì có sẵn cho bạn nếu bạn bị hạn chế về phông chữ web, các tài nguyên như phông chữ google có thể giúp bạn ra khỏi đây. (Từ Wikipedia: "Phông chữ an toàn Web Phông chữ an toàn web là phông chữ có khả năng xuất hiện trên nhiều hệ thống máy tính và được các tác giả nội dung Web sử dụng để tăng khả năng nội dung hiển thị trong phông chữ đã chọn của họ. Nếu khách truy cập vào Web trang web không có phông chữ được chỉ định, trình duyệt của họ cố gắng chọn một thay thế tương tự, dựa trên phông chữ dự phòng do tác giả chỉ định và họ chung hoặc nó sử dụng thay thế phông chữ được xác định trong hệ điều hành của khách truy cập. ")

Khán giả: Hãy suy nghĩ về những người sẽ đọc nó. Một đứa trẻ có thể làm tốt hơn nếu không có phông chữ dựa trên serif hoặc một câu chuyện duy nhất 'a' trái ngược với câu chuyện đôi 'a' . Tuy nhiên, nếu người ta nói lời mời đám cưới thì các phông chữ như Edwardian Script là thứ rất phổ biến trong bối cảnh đó bởi vì hãy đối mặt với nó càng nhiều Serif, càng trang trí càng tốt - theo một số cô dâu;) mặc dù vẫn là những thứ trang trí được sử dụng chủ yếu cho các tiêu đề hơn là toàn bộ nội dung. Là một người khôn ngoan

Độ tương phản / Màu sắc: Một lần nữa đây là điều cần xem xét về mặt dự án của bạn. Tất nhiên, bạn không muốn làm mù người do độ tương phản cực kỳ cao hoặc khiến họ có nếp nhăn khi nheo mắt trước một thứ gì đó có độ tương phản cực kỳ thấp - phần đó là hiển nhiên. Nhưng tùy thuộc vào bảng màu của bạn, bạn có thể muốn sử dụng các cài đặt độ sáng và độ tương phản. Bạn sẽ nhận thấy rằng GD.SE chẳng hạn không hoàn toàn đen và trắng hoàn toàn (như đã hỏi & trả lời ở đây ) - nó có độ tương phản thấp hơn, do đó, khá dễ dàng để xem trang web này trong thời gian rất dài bằng cách so sánh nhìn vào thứ gì đó có độ tương phản cao hơn nhiều - mắt bạn sẽ mệt mỏi!

Trọng lượng: Nói chung, phông chữ có trọng lượng nhẹ hơn mười để dễ đọc hơn một số phông nặng hơn, điều này được thảo luận thêm ở đây cùng với các khía cạnh khác về mức độ dễ đọc mà bạn có thể thấy hữu ích.

Số lượng: Tùy thuộc vào phương tiện, đối tượng và nội dung của bạn, bạn có thể muốn chọn một số phông chữ. Về điều này tôi đề nghị nên cảnh giác. Bạn chắc chắn không muốn nhầm lẫn nội dung. Toàn bộ quan điểm của phông chữ là để truyền đạt một cái gì đó, những gì bạn đang tìm kiếm là cách để làm điều đó một cách hiệu quả nhất. Quá nhiều phông chữ có thể gây nhầm lẫn, mặc dù một phông chữ đôi khi có thể gây nhàm chán. Nói chung, trộn nó theo kiểu in đậm / in nghiêng và kích thước với có thể hai phông chữ là những gì có xu hướng xảy ra. Ghép nối phông chữ được thảo luận thêm một chút ở đây .

Đây là một số khía cạnh mà bạn nên thu hẹp nếu bạn đang đi từ một bảng trống nhưng mặc dù có rất nhiều điều cần xem xét khi nó thực sự đi xuống, nó không tệ. Giá trị của việc chọn phông chữ / phông chữ phù hợp ở giai đoạn đầu của một dự án không có so sánh! Có nhiều hơn về các yếu tố để xem xét trong khi chọn một phông chữ ở đây.

Một điểm tương đồng tốt là nó giống như mặc quần áo, một khái niệm đơn giản được thảo luận ở đây .

Vì vậy, khi định dạng câu trả lời của tôi tự nhiên giảm xuống, trước tiên bạn muốn tìm hiểu xem nó là của ai và nó phải nói gì - sau đó bạn muốn tìm ra phương tiện giao tiếp, phông chữ nào :) và vì đây sẽ không phải là một Jenna-Trả lời mà không có nhiều liên kết, điều này sẽ được thảo luận thêm ở đây .

Tôi thực sự khuyên bạn nên đọc các liên kết mà tôi đã cung cấp, chúng khá hữu ích và sẽ giúp trang bị cho bạn chọn phông chữ phù hợp cho dự án của bạn, đây là điều sẽ cải thiện trải nghiệm người đọc. Nó không chỉ là về mức độ dễ đọc mà còn là toàn bộ bối cảnh mà phông chữ đang đóng góp, chưa kể đến tính thẩm mỹ, một phông chữ dễ đọc có thể lấy đi hoàn toàn từ một thiết kế khi và dễ đọc hơn nhưng phù hợp hơn có thể không được chú ý và do đó làm cho thiết kế và thông tin những điều nổi bật nhất. Dành thời gian để làm điều này theo tôi là khá cần thiết.

Hy vọng tôi đã giúp đỡ và không lan man quá nhiều, tôi có một chút đam mê về phông chữ phù hợp :) Chúc may mắn với dự án của bạn.


2

Tôi tin rằng phông chữ Serif có xu hướng dễ nhìn hơn trong thời gian đọc lâu hơn. Để có trải nghiệm đọc tốt hơn, tôi nghĩ rằng một phông chữ serif như Adobe Garhua hoạt động tốt. Nó không "blah" như Times. Có một số đường cong thú vị trong serifs giúp làm cho nó "tinh khiết" hơn một chút về phông chữ serif.

nhập mô tả hình ảnh ở đây

Đây là một bài viết về chủ đề mà tôi có xu hướng đồng ý:

Serif vs Sans: trận chiến cuối cùng


1
Không có bằng chứng thuyết phục nào cho thấy khuôn mặt serif ít nhiều có thể đọc được mà sans-serif phải đối mặt. Một ngoại lệ sẽ xuất hiện trên màn hình, trong đó màn hình độ phân giải thấp hơn có thể khiến việc hiển thị chi tiết của khuôn mặt serif trở nên khó khăn hơn.
DA01

1
Garhua có thể đẹp, nhưng tỷ lệ xuất hiện thấp của nó sẽ làm giảm mức độ dễ đọc nếu nó được sử dụng làm phông chữ cơ thể. Các phông chữ Serif với chiều cao vượt trội hơn bao gồm Georgia, Bitstream Charter và Charis SIL.
Gavin R. Putland

@ GavinR.Putland Bạn có thể nói rõ hơn về tỷ lệ ex / em không? Nó chỉ có thể làm giảm khả năng đọc nếu khoảng cách dòng quá nhỏ = sai. Khoảng cách dòng ít nhất 140% được khuyến nghị.
Mikhail V

@ DA01 Tôi đã nhận thấy một xu hướng mọi người đề cập đến một số đối số "bằng chứng". Là một chuyên gia tôi có thể nói rằng các phông chữ giống như Garhua dễ đọc nhất, và tương tự sẽ cho bạn biết các chuyên gia đánh máy khác. Đây không phải là "bằng chứng" cho bạn?
Mikhail V

@MikhailV đó không phải là bằng chứng. Đó là ý kiến. Bằng chứng nào hiện có (tối thiểu) có xu hướng nghiêng về phía "những khuôn mặt dễ đọc nhất là những khuôn mặt mà người đó quen thuộc nhất đọc"
DA01

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.