Nguyên tắc về kích thước phông chữ và các phương pháp hay nhất cho trang web trên thiết bị di động và máy tính để bàn. Bao gồm lời khuyên về kiểu chữ cho cả các trang web đáp ứng nhiều văn bản và “nặng tương tác”.

Bạn đang xem : Kích thước văn bản thiết kế đáp ứng

Bạn đang đọc Kích thước phông chữ trong Thiết kế giao diện người dùng: Hướng dẫn Hoàn chỉnh. Nhanh chóng điều hướng đến các chương khác: Giới thiệu · iOS · Android · Web · Nguyên tắc

Trong bài đăng này, chúng tôi sẽ đề cập đến kích thước phông chữ sẽ sử dụng cho một trang web đáp ứng. Trước tiên, chúng tôi sẽ đề cập đến nguyên tắc dành cho thiết bị di động , sau đó là nguyên tắc về dành cho máy tính để bàn . Sẵn sàng chưa?

Nguyên tắc về kiểu chữ trên web di động

Chọn kích thước phông chữ cho một trang web trên điện thoại di động không phải là một khoa học chính xác. Thay vào đó, tôi sẽ đưa ra một số nguyên tắc (kèm theo lý do) để giúp bạn trong quá trình thiết kế của riêng mình.

1. Phông chữ nội dung phải có kích thước khoảng 16px

Hiểu rằng các phông chữ khác nhau có thể dễ đọc hơn hoặc ít rõ ràng hơn ngay cả ở cùng một kích thước chính xác, 16px là một nơi tốt để bắt đầu khi chọn kích thước phông chữ mặc định trên thiết bị di động của bạn. Theo “mặc định” hoặc “chính”, ý tôi là kích thước mà hầu hết các đoạn văn, nhãn, menu và danh sách được đặt thành. (Giả sử bạn đã chọn được một phông chữ tuyệt vời, đây là một trong hai mã gian lận để có thiết kế đẹp )

Cuối cùng, bạn muốn nội dung văn bản trên điện thoại của mình (khi được giữ ở khoảng cách tự nhiên) có thể đọc được như văn bản trong một cuốn sách in tốt (khi được giữ ở chế độ tự nhiên – thường là một chút xa hơn – khoảng cách).

Một quá trình để đạt được điều đó:

  1. Bắt đầu với 16px
  2. Cân nhắc thu nhỏ hơn nếu bạn có (A) có trang nhiều tương tác hoặc (B) phông chữ có các ký tự đặc biệt lớn, dễ đọc (như Proxima Nova trong hình trên)
  3. Mặt khác, bạn có thể tự do hơn nhiều khi khám phá các kích thước lớn hơn 16px, nhưng đặc biệt nếu (A) bạn có trang nhiều văn bản hoặc (B) phông chữ đặc biệt khó đọc ở kích thước nhất định (như Futura ở trên)

Mặc dù có một số chủ quan đối với kích thước phông chữ chính tốt nhất để sử dụng trên trang, nhưng quy tắc tiếp theo khó và nhanh hơn.

2. Kích thước đầu vào văn bản ít nhất phải là 16px

Điều này quan trọng. Nếu bạn đang thiết kế một trang web hoặc ứng dụng có thể xem được trên thiết bị di động, thì chỉ có một quy tắc nghiêm ngặt: Sử dụng kích thước phông chữ nhập văn bản ít nhất là 16px .

Nếu các đầu vào văn bản của bạn có kích thước phông chữ nhỏ hơn kích thước đó, trình duyệt iOS sẽ phóng to ở phía bên trái của phần nhập văn bản, thường che khuất phía bên phải và buộc người dùng phải thu nhỏ theo cách thủ công sau khi sử dụng hộp văn bản.

Video hoặc nó đã không xảy ra, phải không ?:

Hoạt hình nhờ sự bảnh bao của Ste Grainer . Bạn có thể đọc bài viết của anh ấy về hiện tượng tự động thu phóng tại đây .

Đây là lý do chính đáng để đặt kích thước phông chữ nội dung là 16px hoặc lớn hơn. Có vẻ khó xử khi có văn bản điều khiển biểu mẫu lớn hơn văn bản đoạn văn ☝️

3. Văn bản phụ phải nhỏ hơn khoảng 2 kích thước so với văn bản paragaph của bạn

Đối với văn bản phụ – như nhãn nhỏ hơn, chú thích, v.v. – sử dụng kích thước nhỏ hơn một vài khía – chẳng hạn như 13px hoặc 14px . Tôi KHÔNG khuyên bạn nên giảm chỉ một kích thước phông chữ, vì nó quá dễ nhầm lẫn với văn bản bình thường. Ngoài ra, khi văn bản ít quan trọng hơn, bạn muốn tạo kiểu cho văn bản đó sao cho bạn đang truyền đạt rõ ràng về mức độ quan trọng thấp hơn – thường sử dụng màu xám nhạt hơn (một cái gì đó mạnh khoảng 70% là một nơi tốt để bắt đầu).

4. Luôn xem các thiết kế của bạn trên một thiết bị thực tế

Tiêu chuẩn vàng của việc chọn kích thước phông chữ trên thiết bị di động là xem thiết kế của bạn trên một thiết bị thực tế . Tôi không thể khuyên bạn thực hiện phương pháp này đủ cao, vì cảm giác của thiết kế ứng dụng dành cho thiết bị di động trên màn hình máy tính xách tay của bạn khác nhiều so với khi bạn cầm trên tay. Là một nhà thiết kế mới bắt đầu, tôi hầu như bị sốc mỗi khi mở trên thiết bị di động một trang mà tôi đã thiết kế trên máy tính để bàn. Kích thước phông chữ, khoảng cách … mọi thứ đã tắt. Vì vậy, hãy sử dụng Figma Mirror hoặc Sketch Mirror hoặc bất kỳ ứng dụng nào phù hợp với bạn, nhưng hãy xem các thiết kế của bạn trên thiết bị.

5. Làm quen với thiết kế Material Design và các tiêu chuẩn iOS

Sẽ không bao giờ đau khi biết những hệ thống thiết kế lớn nhất trong thị trấn đang làm gì. Ví dụ:

  • Kích thước phông chữ mặc định của Material Design là 16px Roboto và kích thước phông chữ phụ là 14px (thông tin thêm về kiểu dáng Material Design )
  • Kích thước phông chữ mặc định của iOS là 17px SF Pro và kích thước phông chữ phụ là 15px (thêm về kiểu iOS )

Bạn có cần sao chép chúng không? Không – nhưng không bao giờ đau khi có một đường cơ sở để so sánh.

Nguyên tắc về kiểu chữ trên web dành cho máy tính để bàn

Khi chọn kích thước cơ bản cho trang web trên máy tính để bàn hoặc ứng dụng web, bạn có thể chia hầu hết các thiết kế thành một trong hai loại:

  1. Các trang nhiều văn bản . Các bài báo, blog, tin tức, v.v. Đây là những trang mà mục đích chính của người dùng trên trang là đọc. Tương tác có rất ít – có lẽ chỉ cần nhấp vào một vài liên kết.
  2. Các trang có nhiều tương tác . Các ứng dụng liên quan đến việc di chuột nhiều hơn, nhấp, tìm kiếm một mục trong danh sách hoặc bảng, chỉnh sửa, nhập, v.v. Có thể có nhiều văn bản trên trang, nhưng đó không phải là nội dung bạn đọc trực tiếp như một cuốn sách.

Cần một hoặc hai ví dụ? Trang này là một trang nhiều văn bản. Nguồn cấp dữ liệu Facebook của bạn là một trang có nhiều tương tác. Mỗi vấn đề có những mối quan tâm hơi khác nhau, vì vậy tôi sẽ giải quyết chúng một cách riêng biệt. Hãy nhớ rằng cả hai đều có thể hữu ích. Trang “Giới thiệu” của một ứng dụng web điên rồ vẫn còn nhiều chữ. Trang “Liên hệ” trên blog vani vẫn còn nhiều tương tác.

Các trang nhiều văn bản

Truyện dài ngắn, đối với các trang nhiều văn bản, bạn muốn có kích thước phông chữ lớn hơn. Nếu mọi người đang đọc trong thời gian dài, hãy lưu ý: đừng làm họ mỏi mắt. Bây giờ, mỗi phông chữ đều khác nhau, thậm chí có cùng kích thước, nhưng chúng ta đang nói chuyện:

  • 16px – mức tối thiểu tuyệt đối cho các trang có nhiều văn bản
  • 18px – kích thước phông chữ tốt hơn để bắt đầu. Bạn không in tài liệu Word có khoảng cách đơn; bạn đang viết cho những người ngồi cách màn hình hàng chục năm tuổi của họ vài bước chân.
  • 20px + – có thể hơi lớn lúc đầu, nhưng luôn đáng để thử trong ứng dụng thiết kế của bạn. Trang web có nhiều văn bản đẹp nhất trên web, Medium.com , có kích thước văn bản bài viết mặc định là 21px.

Tương tự như những gì tôi đã đề cập trong phần web di động , có một nguyên tắc chung ở đây: văn bản trên trang web của bạn (được xem ở khoảng cách màn hình điển hình) phải dễ đọc như một cuốn sách hay ( được xem ở khoảng cách giữ sách điển hình). Đây thực sự là một bài tập thực sự khó chịu và tồi tệ để thực hiện, bởi vì bạn phải nhắm một mắt và nheo mắt vào cuốn sách mà bạn đang cầm trên tay như một con ngốc. Nhưng hãy tìm một nơi đẹp đẽ, yên tĩnh và kiểm tra sự tỉnh táo: kích thước phông chữ của tôi có thể đọc được ngay cả ở một vài feet không? Thậm chí điều chỉnh cho đôi mắt trẻ trung và mạnh mẽ của tôi? OK, bạn hiểu được ý tưởng.

Các trang có mức độ tương tác cao

Hiện tại, đối với các trang có nhiều tương tác, kích thước văn bản nhỏ hơn hoàn toàn có thể chấp nhận được. Trên thực tế, tùy thuộc vào lượng dữ liệu mà người dùng của bạn đang sử dụng cùng một lúc, ngay cả văn bản 18px cũng lớn một cách khó chịu. Xem hộp thư đến (web) của bạn, xem twitter, xem bất kỳ ứng dụng nào bạn sử dụng yêu cầu quét qua đọc , xem các ứng dụng hiển thị cho bạn dữ liệu – bạn sẽ khó tìm được các đoạn văn bản 18px bền vững. Thay vào đó, 14px-16px là tiêu chuẩn. Nhưng sẽ không chỉ có một kích thước phông chữ. Có thể sẽ có kích thước nhỏ hơn cho những thứ ít quan trọng hơn và kích thước lớn hơn cho những thứ quan trọng hơn (tiêu đề và phụ đề và phụ đề, v.v.), và tất cả sẽ được kết hợp với nhau trong một cái chòi khổng lồ.

Bây giờ, đây là phần quan trọng: đối với bất kỳ trang nào có nhiều tương tác, kích thước phông chữ được điều chỉnh ÍT bởi một số quy định từ trên xuống (“ quy mô loại ”, tôi đang xem xét bạn 😠) hơn nhu cầu cụ thể của từng đoạn văn bản và tác động qua lại giữa chúng.

Ví dụ:

  • Tên sự kiện ở phương tiện 12px, đây là kiểu phông chữ hoàn toàn không có trong nguyên tắc của Material Design. Tuy nhiên, do chúng cần phải vừa với 7 cột trên màn hình chỉ rộng 1440px và nhiều sự kiện khá ngắn, đây là một lựa chọn kích thước phông chữ lý tưởng. Bất kỳ nhỏ hơn và dễ đọc bị ảnh hưởng. Bất kỳ lớn hơn và tên sự kiện sẽ bị cắt quá thường xuyên. Thiết kế là sự đánh đổi, nhóc. Nếu bạn không thể đặt tên cho sự đánh đổi mà bạn đang thực hiện, có thể bạn đang đặt nó sai chỗ.
  • Nhãn giờ trong ngày (“12 giờ trưa”, “1 giờ chiều”, v.v.) là font-size: 10px. Đó là một phong cách khác hoàn toàn không có trong nguyên tắc của Material Design. Tuy nhiên, không gian ngang ở mức cao. Mỗi sự kiện luôn được gắn nhãn với thời gian bắt đầu của nó. Tại sao không thu nhỏ các nhãn bên trái?
  • Ngày tháng là 48px. Một lần nữa, không tìm thấy trong hướng dẫn thiết kế Material Design. Bây giờ, trong trường hợp này, tôi không biết tại sao họ không sử dụng 45px, đây là kích thước “Hiển thị 2” chính thức, nhưng tôi sẽ nói thế này: nếu do tôi thiết kế, có lẽ tôi đã tạo ra 48px kích thước đậm, và ở đây, đậm sẽ là một vấn đề. Nó sẽ thu hút quá nhiều sự chú ý. Vì vậy, dù sao thì tôi cũng sẽ sửa đổi phong cách.

Khi bạn đang thiết kế trang web trên máy tính để bàn có tính tương tác cao, hãy ghi nhớ điều này. Bạn cần sửa đổi các kiểu văn bản theo từng trường hợp cụ thể. Nhất quán là điều tuyệt vời, nhưng không ai tức giận khi kích thước phông chữ quá nhỏ một px – họ phát điên khi không thể dễ dàng tìm thấy thứ mình đang tìm kiếm.

Càng ít kích thước phông chữ càng tốt

Một trong những lỗi đánh máy lớn nhất từ ​​những nhà thiết kế giao diện người dùng mới bắt đầu là sử dụng quá nhiều kích thước phông chữ. Ngay cả những trang có nhiều tương tác nhất cũng thường trông đẹp với tổng cộng khoảng 4 kích thước phông chữ .

Hãy chia nhỏ nó ra:

  1. Kích thước phông chữ tiêu đề . Đây là kích thước phông chữ lớn nhất trên trang của bạn. Sử dụng nó cho tiêu đề tiêu đề hoặc tiêu đề phần. Nếu bạn có cả dòng tiêu đề và tiêu đề phần, gần như chắc chắn bạn phải sử dụng hai kích thước phông chữ khác nhau ở đây.
  2. Kích thước phông chữ mặc định . Đây là kích thước phông chữ phổ biến nhất trên trang của bạn và nên được sử dụng cho tất cả văn bản nội dung – cũng như hầu hết các điều khiển, như hộp văn bản, menu thả xuống, nút và menu. Sai lầm quan trọng của các nhà thiết kế bắt đầu ở tiêu đề ở đây là sử dụng nhiều kích thước phông chữ cho các phần tử mà tất cả phải có cùng một kích thước phông chữ.
  3. Kích thước phông chữ phụ . Đây là kích thước phông chữ – thường nhỏ hơn khoảng 2pt so với kích thước phông chữ mặc định của bạn – mà bạn sử dụng cho các chi tiết ít quan trọng hơn của trang web. Thông tin và thống kê hỗ trợ, đôi khi là phụ đề, v.v.
  4. Kích thước phông chữ cấp ba / chú thích / nhãn / ký tự đại diện . Thường thì bạn sẽ cần thêm một cỡ chữ nữa. Đôi khi, do thông tin của bạn có thứ bậc nên bạn cần một kiểu thứ ba thậm chí còn nhẹ nhàng hơn kiểu thứ hai. Đôi khi, bạn có thể sử dụng chữ hoa cho các nhãn hoặc nút – và do trọng lượng trực quan của chữ hoa tăng lên, bạn muốn sử dụng kích thước nhỏ hơn một chút cho chính văn bản (hãy nhớ: cân bằng up-pop so với down-pop ). Vì vậy, kích thước phông chữ thứ tư này là một chút ký tự đại diện. Không phải mọi thiết kế đều cần nó, nhưng nhiều thiết kế thì có. Cảnh báo duy nhất của tôi: càng nhiều càng tốt, mặc định là nhất quán.

Có ý nghĩa? Hãy tiếp tục.

Tiếp tục đến Chương 4: Nguyên tắc & amp; Tài nguyên

Một ghi chú cuối cùng 😎

Nếu đây là lần đầu tiên bạn đến đây, bạn cũng có thể quan tâm:

  • Tìm hiểu thiết kế giao diện người dùng , khóa học video trực tuyến đủ thời lượng của tôi về thiết kế giao diện người dùng
  • Design Hacks , bản tin hơn 50.000 người với các bài viết về thiết kế ban đầu nhằm cung cấp cho bạn lời khuyên chiến thuật để cải thiện kỹ năng UX / UI của bạn.

Một số người có một số điều thực sự thú vị để nói về bản tin.

Khen ngợi về Thiết kế thành công

Cảm ơn bạn vì bản tin của bạn. Đó có thể là bản tin tốt nhất mà tôi nhận được kể từ năm 1999, khi tôi bắt đầu làm việc tự do.

Tricia Littlefield
Người sáng lập, TheSimpleWeb

Mỗi lần tôi nhận được email từ bạn, tôi như thể ‘Chết tiệt, đây là một email dài! Không đời nào tôi đọc hết những thứ này “, sau đó tôi bắt đầu đọc và tôi giống như” Chết tiệt, điều này thật kỳ quái “và đọc hết.

Jean-Philippe
Nhà chiến lược UX, Làm nghề tự do

Hack thiết kế

Hơn 50.000 người đã đăng ký.
Không có spam. Hủy đăng ký bất cứ lúc nào.


Xem thêm những thông tin liên quan đến chủ đề kích thước văn bản thiết kế đáp ứng

template html

  • Tác giả: khiem bui
  • Ngày đăng: 2015-04-08
  • Đánh giá: 4 ⭐ ( 7721 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: tạo template html trong dreamweaver. Sử dụng template cho thiết kế các trang có cùng layout

Kích Thước Khổ Giấy Văn Phòng A0, A1, A2, A3, A4,…

  • Tác giả: indep.com.vn
  • Đánh giá: 4 ⭐ ( 6695 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết giúp các bạn giải đáp thắc mắc kích thước khổ giấy “ A “ là bao nhiêu cm, mm, inch của các khổ giấy A0, A1, A2, A3, A5,…

Bản vẽ thiết kế mẫu biệt thự đẹp kích thước 12x12m

  • Tác giả: hosoxaydung.com
  • Đánh giá: 4 ⭐ ( 5495 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Các Kích Thước Phong Bì Thư, Kích Thước Bao Thư Phổ Thông

  • Tác giả: inanaz.com.vn
  • Đánh giá: 3 ⭐ ( 3042 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hãy cùng In ấn AZ tìm hiểu ngay về các kích thước phong bì thư phổ thông, kích thước bao thư a4, a5 ,a6 và các loại khác có kích cỡ nhỏ hơn

Kích thước bàn làm việc tiêu chuẩn đúng khoa học

  • Tác giả: www.deco-crystal.com
  • Đánh giá: 4 ⭐ ( 7821 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Kích thước bàn làm việc tiêu chuẩn khoa học là bao nhiêu? Kích thước bàn họp chuẩn thường là 120 x 360 x 75cm dành cho 6 đến 8 người ngồi.

10 Quy Tắc Thiết Kế Đơn Giản Để Khiến Văn Bản Word Đẹp Và Chuyên Nghiệp Hơn

  • Tác giả: www.saga.vn
  • Đánh giá: 5 ⭐ ( 3360 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Saga.vn Cổng thông tin kiến thức kinh doanh, tài chính

5 Mẹo thiết kế web đáp ứng

  • Tác giả: gialaipc.com.vn
  • Đánh giá: 5 ⭐ ( 1829 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [ad_1]
    Một số lượng lớn người dùng web hiện nay sử dụng thiết bị di động của họ để lướt web và điều này có

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Alter Table Add Constraint - Cách sử dụng Constraints SQL - bảng thay đổi thêm khóa ngoại ràng buộc

By ads_php