Kiểu chữ

Tính năng web: font-size rem đơn vị em line-height overflow-wrap text-wrap text-wrap: balance text-wrap: pretty min(), max() và clamp() Đơn vị khung nhìn

Các phương pháp hay nhất áp dụng cho mọi nhóm tuổi

  • Sử dụng số không có đơn vị cho line-height (ví dụ: 1.5) để đảm bảo tỷ lệ tương đối trong quá trình kế thừa cỡ chữ.
  • Sử dụng overflow-wrap: break-word (hoặc anywhere) để chứa các URL dài.
  • KHÔNG sử dụng px cho cỡ chữ. Ưu tiên rem để tuân theo lựa chọn ưu tiên về cỡ chữ của trình duyệt của người dùng (cỡ chữ gốc) hoặc em/tỷ lệ phần trăm cho kích thước theo bối cảnh.

Tính dễ đọc

  • Tránh các dòng văn bản dài: Giới hạn các khối đoạn văn bản ở chiều rộng tối đa là 80 ký tự.
  • Tránh khoảng trắng quá nhiều: Tránh text-align: justify vì có thể khiến văn bản khó đọc hơn. Nếu bạn phải sử dụng, hãy kết hợp với hyphens: auto để tránh khoảng trắng quá mức giữa các từ.
  • Đừng sử dụng phông chữ hoa mỹ: Bỏ qua kiểu chữ thảo cho nội dung đọc chính.
  • Đừng dựa vào chữ viết hoa toàn bộ để nhấn mạnh: Nên dùng chữ in đậm để nhấn mạnh về mặt hình ảnh và dùng <em>/<strong> khi cần nhấn mạnh về mặt ngữ nghĩa.
  • Hạn chế nhấn mạnh tổng thể: Việc nhấn mạnh sẽ mất đi ý nghĩa khi được áp dụng ở mọi nơi. Chỉ áp dụng khi việc nhấn mạnh làm thay đổi cách đọc nội dung.
  • Hỗ trợ lựa chọn ưu tiên về thu phóng của người dùng: Cho phép người dùng đổi kích thước văn bản lên đến 200% mà không làm mất nội dung hoặc chức năng.
body {
  line-height: 1.5;
  text-align: start; /* Supports LTR and RTL */
}
article {
  max-width: 80ch; /* Caps line length to ~80 characters for readability */
}

Xuống dòng tự động

  • Sử dụng text-wrap: balance cho các tiêu đề cân bằng và nội dung giống tiêu đề (ví dụ: <th>)
  • Sử dụng text-wrap: pretty cho văn bản nội dung dài (đoạn văn, đoạn trích dẫn, v.v.)
  • Sử dụng text-wrap: balance hoặc text-wrap: pretty một cách có chủ ý, KHÔNG áp dụng trên * vì việc này sẽ làm giảm hiệu suất.
  • Tránh sử dụng text-wrap: balance trên các phần tử có hộp hiển thị (nền, đường viền, bóng, v.v.) vì thuộc tính này không thay đổi chiều rộng của vùng chứa mà chỉ ảnh hưởng đến cách xuống dòng tự động văn bản trong chiều rộng đó. Điều này có thể để lại khoảng trống ở cuối vùng chứa, thường là không mong muốn.

Kiểu chữ thích ứng

  • NÊN kết hợp các đơn vị tương đối theo khung nhìn và tương đối theo phông chữ trong clamp() cho các cỡ chữ điều chỉnh theo kích thước khung nhìn, đồng thời đảm bảo các cỡ chữ này nằm trong phạm vi mong muốn. Ví dụ: clamp(2rem, 1rem + 5vw, 4rem). Điều chỉnh tỷ lệ của đơn vị tương đối theo khung nhìn và đơn vị tương đối theo phông chữ để kiểm soát tốc độ thay đổi cỡ chữ.
  • KHÔNG sử dụng riêng vw cho cỡ chữ mà không có clamp(), vì việc này có thể khiến văn bản quá nhỏ hoặc quá lớn trên các màn hình có kích thước cực lớn hoặc cực nhỏ.