it-swarm-vi.com

Cỡ chữ tối thiểu để xem trên thiết bị di động

Trong khi thiết kế một ứng dụng di động hoặc trang web đáp ứng di động, kích thước phông chữ tối thiểu sẽ không ảnh hưởng đến thị lực của người dùng là gì?

23
jyo

Đối với bố cục trên thiết bị di động, kích thước phông chữ thường được đặt trong EM thay vì pixel để kích thước phông tương đối, sẵn sàng đáp ứng các thông số màn hình khác nhau. 16px là cỡ chữ lý tưởng bên dưới cỡ chữ này sẽ gây khó khăn cho người dùng đọc.

14
NB4

W3Recommendation trên cỡ chữ có ghi chú (nhấn mạnh của tôi):

Để duy trì khả năng đọc, UA áp dụng các nguyên tắc này tuy nhiên nên tránh tạo kích thước phông chữ dẫn đến ít hơn 9 pixel trên mỗi đơn vị EM trên màn hình máy tính.


12 pixel , theo bài viết này từ "think with Google" trên Mobile.

  • Chọn đúng phông chữ. Kích thước phông chữ tối thiểu của bạn phải là 12 pixel; bất cứ điều gì nhỏ hơn và người dùng sẽ được nheo mắt. Hãy chắc chắn chọn một kiểu chữ sạch sẽ và dễ đọc. Nếu có thể, tránh sử dụng văn bản dựa trên hình ảnh.

12sp , được sử dụng cho chú thích, theo Phần kiểu chữ thiết kế vật liệ . Đây là cỡ chữ tối thiểu mà họ đề xuất (cho cả máy tính để bàn hoặc thiết bị di động). (Xem câu hỏi này để biết thêm thông tin về các đơn vị sp).

Kích thước loại được chỉ định bằng sp (pixel có thể mở rộng) để bật chế độ loại lớn cho khả năng truy cập .

enter image description here

Lưu ý rằng điều này được khuyến nghị cho các tập lệnh giống như tiếng Anh và tiếng Anh (tiếng Latin, tiếng Hy Lạp và tiếng Cyrillic). Đối với các ngôn ngữ Nam và Đông Nam Á và Trung Đông, bao gồm tiếng Ả Rập, tiếng Hindi và tiếng Thái:

Kích thước phông chữ : Đối với Tiêu đề thông qua các kiểu Phụ đề, kích thước phông chữ lớn hơn 1px so với quy định cho tiếng Anh. Đối với kiểu lớn hơn Tiêu đề, kích thước loại tiếng Anh là phù hợp.

Nguồn: https: // m Material.io/guferences/style/typography.html

8
Alvaro

Không có tối thiểu nhất định nó phụ thuộc vào người dùng. (đặc biệt nếu bạn quan tâm đến khả năng tiếp cận)

Một số người dùng sẽ cần tăng kích thước phông chữ (và kích thước họ tăng sẽ phụ thuộc vào các yếu tố môi trường bên ngoài, ví dụ như họ có đeo kính hay không)

Vì vậy, bạn nên đặt kích thước và cho phép người dùng thay đổi kích thước lên hoặc xuống theo ý muốn. Thậm chí tốt hơn cho phép người dùng đặt kích thước và ghi nhớ nó cho lần sử dụng tiếp theo - họ vẫn có thể thay đổi kích thước nhưng có nhiều khả năng đúng hơn bất kỳ kích thước nào mà nhà phát triển sẽ chọn.

Đây là lý do tại sao bạn nên sử dụng thay đổi kích thước phông chữ tương đối nếu có nhiều hơn một kích thước phông chữ, vì vậy hãy sử dụng EM làm kích thước như trong câu trả lời của NB4

4
user151019

Nó phụ thuộc vào phông chữ. Phông chữ trình duyệt mặc định 16px/1em/100% phù hợp với hầu hết các trường hợp theo Trang Thông tin chi tiết về Nhà phát triển của Google về phông chữ (nhấn mạnh của tôi):

Theo mặc định, trình duyệt sẽ hiển thị mỗi phông chữ ở 16px (pixel pixel). Đây là một mặc định tốt cho hầu hết các trường hợp, nhưng có thể cần phải điều chỉnh cho một phông chữ cụ thể - tức là kích thước mặc định có thể được đặt thấp hơn hoặc cao hơn để phù hợp cho các thuộc tính khác nhau của phông chữ. Sau đó, khi kích thước mặc định được đặt, phông chữ lớn hơn và nhỏ hơn phải được xác định so với kích thước mặc định bằng pixel. Chúng sau đó có thể được sử dụng để điều chỉnh kích thước của văn bản cho loại chính, phụ và loại nội dung khác trên trang.

Bài đăng trên blog của typecast trên một quy mô hiện đại hơn cho kiểu chữ web cũng đề xuất sử dụng 16px (1em hoặc 100%) làm cơ sở:

body {
  font-size: 100%;
}

Bài đăng cũng có một thang đo gợi ý cho các tiêu đề và tương tự.

3
topher

Điều này phụ thuộc vào mức độ cao nhất trên hai tham số: Phông chữ bạn sử dụng và thiết bị mà ứng dụng sẽ được xem.

  1. Phông chữ: Các phông chữ khác nhau có các đặc điểm khác nhau khi nói đến khả năng đọc. Một quy tắc cơ bản kiểm soát đó là x-height của phông chữ , nhưng cũng có các yếu tố khác.
  2. Thiết bị: Các yếu tố chính là: Người dùng đang xem thiết bị ở khoảng cách nào và mật độ pixel là bao nhiêu. Nguyên tắc nhỏ: Thiết bị có thể sẽ càng gần và mật độ pixel càng cao thì phông chữ càng nhỏ.

    Một thiết bị giống như sách có 300 dpi lý thuyết được tổ chức chặt chẽ thực sự có thể yêu cầu phông chữ nhỏ như 10px hoặc 11px .

    Ở đầu kia của màn hình TV có 90dpi, có thể nằm ở hành lang, chắc chắn cần một cái gì đó gần hơn với 18px hoặc cao hơn.

Vào cuối ngày, câu trả lời là: Nó phụ thuộc. Lấy ứng dụng của bạn, sử dụng nó cho chính mình, kiểm tra nó với người thật trong hoàn cảnh thực và đánh giá phản hồi. Khi triển khai kết quả bằng CSS, bạn có thể thấy kỹ thuật này có giá trị.

2
Boldewyn