Hệ thống phân cấp (hierarchy) được thể hiện thông qua mức chênh lệch về độ dày phông chữ, kích thước, chiều cao dòng và khoảng cách giữa các chữ cái. Thang kiểu chữ được cập nhật sẽ sắp xếp các kiểu thành 6 vai trò với tên gọi mô tả mục đích của vai trò đó: display (hiển thị), title (tiêu đề), label (nhãn), body (nội dung), numeral (chữ số) và arc (cung). Các vai trò mới không phụ thuộc vào kích thước màn hình, giúp áp dụng dễ dàng hơn trong nhiều trường hợp sử dụng.
Kiểu hiển thị
Kiểu hiển thị được dùng cho các chuỗi văn bản lớn, ngắn để hiển thị thông tin chính dễ nhìn, các chỉ số quan trọng, độ tin cậy hoặc những khoảnh khắc thương hiệu giàu cảm xúc.
- DisplayLarge là dòng tiêu đề lớn nhất. Kiểu hiển thị là văn bản lớn nhất trên màn hình, dành riêng cho thông tin chính ngắn, dễ đọc, các chỉ số quan trọng, độ tin cậy hoặc những khoảnh khắc thương hiệu biểu cảm được hưởng lợi từ quy mô và kiểu dáng nổi bật.
- DisplayMedium là dòng tiêu đề lớn thứ hai. Kiểu hiển thị là văn bản lớn nhất trên màn hình, dành riêng cho thông tin chính ngắn, dễ đọc, các chỉ số quan trọng, độ tin cậy hoặc những khoảnh khắc thương hiệu giàu cảm xúc, có lợi thế nhờ quy mô và kiểu dáng nổi bật.
- DisplaySmall là dòng tiêu đề nhỏ nhất. Kiểu hiển thị là văn bản lớn nhất trên màn hình, dành riêng cho thông tin chính ngắn, dễ đọc, các chỉ số quan trọng, độ tin cậy hoặc những khoảnh khắc thương hiệu biểu cảm được hưởng lợi từ quy mô và kiểu dáng nổi bật.
Tiêu đề
Tiêu đề là văn bản phân cấp được dùng làm cơ chế định hướng, chẳng hạn như tiêu đề trang, tiêu đề phần hoặc tiêu đề phần phụ (trong trường hợp TitleSmall).
- TitleLarge là tiêu đề lớn nhất. Tiêu đề nhỏ hơn Màn hình. Chúng thường được dành cho văn bản có độ nhấn trung bình, có độ dài ngắn hơn và không được đề xuất cho các thành phần tương tác, mà là tiêu đề trang hoặc tiêu đề phụ.
- TitleMedium là tiêu đề cỡ trung bình. Tiêu đề nhỏ hơn Màn hình. Chúng thường được dành cho văn bản có độ nhấn trung bình, có độ dài ngắn hơn và không được đề xuất cho các thành phần tương tác, mà là tiêu đề trang hoặc tiêu đề phụ.
- TitleSmall là tiêu đề nhỏ nhất. Tiêu đề nhỏ hơn Màn hình. Chúng thường được dành cho văn bản có độ nhấn trung bình, có độ dài ngắn hơn và không được đề xuất cho các thành phần tương tác, mà là tiêu đề trang hoặc tiêu đề phụ.
Nhãn
Nhãn được dùng cho văn bản ở cấp thành phần, mô tả một hành động sẽ xảy ra nếu người dùng tương tác. Ứng dụng phổ biến và được sử dụng rộng rãi nhất cho nhãn là cho văn bản lồng trong một nút.
- LabelLarge là nhãn lớn nhất. Nhãn được dùng để hiển thị các văn bản nổi bật như nhãn trên các nút tiêu đề, được áp dụng cho các thành phần tương tác.
- LabelMedium là nhãn trung bình và được dùng phổ biến nhất. Nhãn được dùng để hiển thị văn bản như nhãn chính trên các nút, được áp dụng cho các thành phần tương tác.
- LabelSmall là nhãn nhỏ. Nhãn được dùng để hiển thị văn bản như nhãn phụ trên nút, nhãn trên nút thu gọn, được áp dụng cho các thành phần tương tác.
Nội dung
Nội dung dành riêng cho văn bản nội dung như đoạn văn bản nội dung, văn bản được dùng trong hình ảnh trực quan hoá dữ liệu phức tạp, dấu thời gian và siêu dữ liệu.
- BodyLarge là phần nội dung lớn nhất. Văn bản nội dung thường được dùng cho kiểu chữ dài vì nó phù hợp với kiểu chữ cỡ nhỏ. Đối với các đoạn văn bản dài hơn, bạn nên sử dụng kiểu chữ serif hoặc sans serif.
- BodyMedium là phần nội dung lớn thứ hai. Văn bản nội dung thường được dùng cho kiểu chữ dài vì nó phù hợp với kiểu chữ cỡ nhỏ. Đối với các đoạn văn bản dài hơn, bạn nên sử dụng kiểu chữ serif hoặc sans serif.
- BodySmall là phần nội dung lớn thứ ba. Văn bản nội dung thường được dùng cho kiểu chữ dài vì nó phù hợp với kiểu chữ cỡ nhỏ. Đối với các đoạn văn bản dài hơn, bạn nên sử dụng kiểu chữ serif hoặc sans serif.
- BodyExtraSmall là phần nội dung nhỏ nhất. Văn bản nội dung thường được dùng cho kiểu chữ dài vì nó phù hợp với kiểu chữ cỡ nhỏ. Đối với các đoạn văn bản dài hơn, bạn nên sử dụng kiểu chữ serif hoặc sans serif.
Con số
Kiểu chữ số được dùng cho các chữ số, thường chỉ giới hạn trong một vài ký tự. Có thể có nhiều thuộc tính biểu thị hơn ở kích thước màn hình lớn hơn. Mang đến sự linh hoạt để mở rộng trục chiều rộng mà không cần lo ngại về việc bản địa hoá và điều chỉnh tỷ lệ phông chữ.
- NumeralsExtraLarge là vai trò lớn nhất cho các chữ số. Theo mặc định, chữ số sử dụng khoảng cách dạng bảng. Chúng làm nổi bật và thể hiện những con số có thể xem nhanh, chỉ giới hạn ở 2 hoặc 3 ký tự, không cần bản địa hoá như màn hình sạc hoặc bộ chọn thời gian.
- NumeralsLarge là vai trò lớn thứ hai cho các chữ số. Theo mặc định, các chữ số sử dụng khoảng cách dạng bảng. Đây là các chuỗi số có kích thước lớn, chỉ dùng cho màn hình lớn hiển thị thời gian, không cần bản địa hoá như đồng hồ đếm ngược hoặc bộ chọn thời gian.
- NumeralsMedium là vai trò lớn thứ ba đối với các chữ số. Theo mặc định, các chữ số sử dụng khoảng cách dạng bảng. Đây là những con số có kích thước trung bình, chỉ giới hạn ở các chuỗi số ngắn, không yêu cầu bản địa hoá như số bước hoặc bộ chọn thời gian.
- NumeralsSmall là vai trò lớn thứ tư cho các chữ số. Theo mặc định, các chữ số sử dụng khoảng cách dạng bảng. Chúng dành cho những con số cần được nhấn mạnh ở quy mô nhỏ hơn, nơi không cần bản địa hoá như bộ chọn ngày và giờ.
- NumeralsExtraSmall là vai trò nhỏ nhất cho các chữ số. Theo mặc định, chữ số sử dụng khoảng cách dạng bảng. Đây là những số cần có chuỗi chữ số dài hơn, không cần bản địa hoá như chỉ số trong quá trình tập luyện.
Arc
Văn bản tiêu đề dạng vòng cung được dùng cho văn bản cong tạo nên biển chỉ dẫn trên giao diện người dùng, chẳng hạn như văn bản thời gian và nhãn cong. Trục phông chữ được điều chỉnh để tối ưu hoá cụ thể kiểu chữ dọc theo đường cong và để điều chỉnh khoảng cách khác nhau xuất hiện giữa các ký tự khi chúng được đặt ở trên cùng, so với dưới cùng của màn hình cong.
Hàng đầu
- ArcLarge dành cho tiêu đề và đầu trang của vòng cung. Arc (Vòng cung) là dành cho văn bản dọc theo một đường cong trên màn hình, dành riêng cho các chuỗi văn bản tiêu đề ngắn ở ngay trên cùng hoặc dưới cùng của màn hình, chẳng hạn như lớp phủ xác nhận.
- ArcMedium dành cho tiêu đề và đầu trang của Arc. Arc (Vòng cung) là kiểu chữ dọc theo một đường cong trên màn hình, dành riêng cho các chuỗi văn bản tiêu đề ngắn ở trên cùng hoặc dưới cùng của màn hình, chẳng hạn như tiêu đề trang.
- ArcSmall dành cho các chuỗi văn bản có đường cong nhỏ. Arc là dành cho văn bản dọc theo một đường cong trên màn hình, dành riêng cho các chuỗi văn bản cong ngắn ở đầu màn hình, chẳng hạn như văn bản thời gian.
Dưới cùng
- ArcLarge dành cho tiêu đề và đầu trang của vòng cung. Arc (Vòng cung) là dành cho văn bản dọc theo một đường cong trên màn hình, dành riêng cho các chuỗi văn bản tiêu đề ngắn ở ngay trên cùng hoặc dưới cùng của màn hình, chẳng hạn như lớp phủ xác nhận.
- ArcMedium dành cho tiêu đề và đầu trang của Arc. Arc (Vòng cung) là kiểu chữ dọc theo một đường cong trên màn hình, dành riêng cho các chuỗi văn bản tiêu đề ngắn ở trên cùng hoặc dưới cùng của màn hình, chẳng hạn như tiêu đề trang.
- ArcSmall dành cho các chuỗi văn bản có đường cong nhỏ. Arc (Vòng cung) là dành cho văn bản dọc theo một đường cong trên màn hình, dành riêng cho các chuỗi văn bản cong ngắn ở cuối màn hình, chẳng hạn như lời kêu gọi hành động.
In chữ
Việc thiết lập kiểu chữ theo chiều dọc dựa vào khoảng đệm, hộp giới hạn và đường cơ sở để đảm bảo văn bản dễ đọc ở mọi kích thước. Hãy cân nhắc các yếu tố kỹ thuật và quy ước của nền tảng khi đưa ra quyết định về việc thiết lập kiểu chữ, thay đổi kích thước văn bản, mật độ và sử dụng văn bản trong bố cục thích ứng.
Sử dụng đường cơ sở
Đường cơ sở là đường thẳng vô hình mà một dòng văn bản nằm trên đó. Trong Material Design, đường cơ sở là một quy cách quan trọng trong việc đo khoảng cách theo chiều dọc giữa văn bản và một phần tử.
Kiểm tra khả năng đọc
Để cải thiện khả năng đọc của các phông chữ xuất hiện trong ứng dụng, hãy hoàn tất các bước kiểm tra khả năng đọc sau.
Số dạng bảng và số đơn
Sử dụng các chữ số dạng bảng (còn gọi là chữ số có khoảng cách cố định) thay vì chữ số tỷ lệ ở những nơi mà giá trị có thể thay đổi thường xuyên hoặc có ảnh động hoặc có giá trị thay đổi nhanh chóng, chẳng hạn như bộ hẹn giờ đếm ngược, bộ chọn hoặc các chỉ số thể dục đang diễn ra.
Sử dụng các số dạng bảng có khoảng cách đều nhau để giữ cho các giá trị được căn chỉnh về mặt thị giác nhằm quét và căn chỉnh tốt hơn, đồng thời tránh các số hoặc văn bản liền kề bị nhảy xung quanh.
Khoảng cách giữa các dòng
Chiều cao dòng là khoảng cách giữa mỗi dòng văn bản và được kết nối trực tiếp với kích thước chữ. Trên đồng hồ, không gian dọc bị hạn chế, vì vậy chiều cao dòng được tối ưu hoá để đảm bảo khả năng đọc, đồng thời tối đa hoá số dòng văn bản hiển thị trong khung nhìn.
Chiều cao dòng bổ sung
Trong Jetpack Compose và trên Android, kiểu chữ sẽ tự động tăng thêm chiều cao dòng ở dòng cuối cùng để ngăn các ký tự dài hơn bị chồng lên nhau. Đây là lý do khiến một số kiểm thử ảnh chụp màn hình không hoàn toàn phù hợp.
Tài liệu bổ sung về chiều cao dòng
| Kiểu mặc định (cỡ chữ / chiều cao dòng) | Chiều cao dòng mặc định trên mỗi dòng | Chỉ thêm chiều cao dòng cho dòng dưới cùng | Tính toán |
|---|---|---|---|
| 60 / 60 | 0 (100%) | + 15 (125%) | 60 / 75 (15/125%) (60+15) |
| 50 / 50 | 0 (100%) | + 13 (126%) | 50 / 63 (13/126%) (50+13) |
| 40 / 44 | 4 (110%) | + 7 (127,5%) | 40 / 51 (11/127,5%) (44+7) |
| 30 / 34 | 4 (113%) | + 3 (123,3%) | 30 / 37 (7/123,3%) (34+3) |
| 24 / 26 | 2 (108%) | + 4 (125%) | 24 / 30 (6/125%) (26+4) |
| 20 / 22 | 2 (110%) | + 3 (125%) | 20 / 25 (5/125%) (22+3) |
| 18 / 20 | 2 (111%) | + 3 (125%) | 18 / 23 (5/125%) (20+3) |
| 16 / 18 | 2 (112,5%) | + 2 (125%) | 16 / 20 (4/125%) (18+2) |
| 15 / 18 | 3 (120%) | + 1 (126,6%) | 15 / 19 (4/126,6%) (18+1) |
| 14 / 16 | 2 (114%) | + 2 (128,5%) | 14 / 18 (4/128,5%) (16+2) |
| 13 / 16 | 3 (123%) | + 0 (123%) | 13 / 16 (3/123%) (16+0) |
| 12 / 14 | 2 (116,6%) | + 1 (125%) | 12 / 15 (3/125%) (14+1) |
| 10 / 12 | 2 (120%) | + 0 (120%) | 10 / 12 (2/120%) (12+0) |