Typography - Phong cách - Material Design (2024)

người máylà kiểu chữ tiêu chuẩn trên Android.

Notolà kiểu chữ tiêu chuẩn cho tất cả các ngôn ngữ trên Chrome và Android dành cho tất cả các ngôn ngữ không có trong Roboto.

Các loại tập lệnh

  • Tiếng Anh và tiếng Anh (tiếng Latin, tiếng Hy Lạp và tiếng Cyrillic)
  • Dày đặc (Trung Quốc, Nhật Bản và Hàn Quốc)
  • Cao (ngôn ngữ Nam, Đông Nam Á và Trung Đông)

Thanh ứng dụng

Kiểu tiêu đề, Trung bình 20sp

nút

Tiếng Anh: Trung bình 14sp, viết hoa toàn bộ
Dày đặc: Trung bình 15sp, tất cả các mũ
Cao: Đậm 15sp

Tiêu đề phụ

Tiếng Anh: Thông thường 16sp (thiết bị), 15sp (máy tính để bàn)
Dày đặc: Thông thường 17sp (thiết bị), 16sp (máy tính để bàn)
Cao: Thông thường 17sp (thiết bị), 16sp (máy tính để bàn)

Thân 1

Tiếng Anh: Thông thường 14sp (thiết bị), 13sp (máy tính để bàn)
Dày đặc: Thông thường 15sp (dày đặc), 14sp (máy tính để bàn)
Cao: Thông thường 15sp (thiết bị), 14sp (máy tính để bàn)

Tỷ lệ tương phản văn bản

Tối thiểu: 4,5: 1
Ưu tiên: 7:1

Typography - Phong cách - Material Design (1)

Phân loại ngôn ngữ

Tập lệnh ngôn ngữ có thể được chia thành ba loại:

Tiếng Anh và giống tiếng Anh: Chữ viết Latin (trừ tiếng Việt), tiếng Hy Lạp và chữ Cyrillic, được hỗ trợ bởi cả Roboto và Noto. Roboto đã được mở rộng để bao gồm hoàn toàn tất cả các ký tự Latinh, Hy Lạp và Cyrillic như được định nghĩa trong Unicode 7.0. Số lượng ký tự được hỗ trợ đã tăng gấp đôi so với các phiên bản trước, từ khoảng 2000 lên khoảng 4000 ký tự.

Cao: Tập lệnh ngôn ngữ yêu cầu chiều cao dòng bổ sung để chứa các ký tự lớn hơn, bao gồm các ngôn ngữ Nam và Đông Nam Á và Trung Đông, như tiếng Ả Rập, tiếng Hindi, tiếng Telugu, tiếng Thái, tiếng Việt. Noto hỗ trợ các ngôn ngữ này với hai trọng số.

Ngu độn: Tập lệnh ngôn ngữ yêu cầu chiều cao dòng bổ sung để chứa các ký tự lớn hơn, bao gồm tiếng Trung, tiếng Nhật và tiếng Hàn. Noto hỗ trợ các ngôn ngữ này với bảy trọng số.

Xem danh sách đầy đủ ởbảng danh mục ngôn ngữ.

Kiểu chữ

Roboto đã được cải tiến rộng rãi để hoạt động trên nhiều nền tảng được hỗ trợ hơn. Nó rộng hơn và tròn hơn một chút, mang lại sự rõ ràng hơn và lạc quan hơn.

Typography - Phong cách - Material Design (2)

Typography - Phong cách - Material Design (3)

Trọng lượng phông chữ Roboto

Roboto có sáu trọng lượng: Mỏng, Nhẹ, Thông thường, Trung bình, Đậm và Đen.

Typography - Phong cách - Material Design (4)

Các số liệu ngành dọc của Noto tương thích với Roboto.

Typography - Phong cách - Material Design (5)

Typography - Phong cách - Material Design (6)

Trọng lượng phông chữ Noto

Noto Sans CJK (tiếng Trung, tiếng Nhật và tiếng Hàn) có bảy mức độ đậm nhạt: Mỏng, Nhẹ, DemiLight, Thường, Trung bình, Đậm và Đen. Trọng lượng của Noto Sans CJK Regular tương đương với Roboto Regular.

Typography - Phong cách - Material Design (7)

Phông chữ Noto dành cho tiếng Thái, Devanagari và tất cả các ngôn ngữ sống chính khác có độ đậm Thông thường và Đậm.

Typography - Phong cách - Material Design (8)

Một thư mục các phông chữ web nguồn mở

Gợi ý là những hướng dẫn được nhúng trong phông chữ về cách sửa đổi (bóp méo) hình tượng để trông đẹp hơn trên màn hình có độ phân giải thấp. Để cân bằng lại, phông chữ được gợi ý sẽ tiêu tốn nhiều không gian hơn so với phiên bản không được gợi ý.

Cả Roboto và Noto đều có phiên bản gợi ý và không gợi ý. Google khuyến nghị:

  • Sử dụng các phiên bản không được gợi ý trên Android và trên Mac OS X, không triển khai gợi ý
  • Sử dụng phông chữ gợi ý trên Chrome OS, Windows và Linux

Đối với cả thuộc tính web và Android, ngăn xếp phông chữ phải chỉ định Roboto, Noto và sau đó là sans-serif.

Kiểu dáng

Quá nhiều kích cỡ và kiểu chữ cùng một lúc có thể phá hỏng mọi bố cục. Thang đo typographic có một tập hợp kích thước chữ giới hạn hoạt động tốt cùng với lưới bố cục.

Các kích thước và kiểu dáng này được phát triển để cân bằng mật độ nội dung và sự thoải mái khi đọc trong các điều kiện sử dụng thông thường. 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 chokhả năng tiếp cận.

Latin, Hy Lạp và Cyrillic.

Bộ kiểu cơ bản dựa trên thang kiểu chữ 12, 14, 16, 20 và 34.

Typography - Phong cách - Material Design (10)

Typography - Phong cách - Material Design (11)

Typography - Phong cách - Material Design (12)

Typography - Phong cách - Material Design (13)

Typography - Phong cách - Material Design (14)

Trên các hệ số dạng, văn bản xuất hiện trên thanh ứng dụng phải sử dụng kiểu Tiêu đề, Medium 20sp.

Typography - Phong cách - Material Design (15)

Typography - Phong cách - Material Design (16)

Trong một số trường hợp nhất định, hãy sử dụng kiểu tiêu đề phụ lớn hơn thay vì kiểu Nội dung nhỏ hơn. Một số trường hợp đó bao gồm khi thông tin được trình bày dưới dạng đoạn mã nhỏ hoặc khi tiêu đề được ghép nối với các dòng văn bản có kiểu nội dung.

Typography - Phong cách - Material Design (17)

Typography - Phong cách - Material Design (18)

Typography - Phong cách - Material Design (19)

Typography - Phong cách - Material Design (20)

Typography - Phong cách - Material Design (21)

Typography - Phong cách - Material Design (22)

Kiểu nút (Trung bình 14sp, viết hoa toàn bộ) được sử dụng cho tất cả các nút. Văn bản trên nút phải được viết hoa toàn bộ ở các ngôn ngữ có chữ viết hoa. Đối với những ngôn ngữ không có chữ viết hoa, hãy cân nhắc sử dụng văn bản màu cho các nút phẳng để làm nổi bật chúng so với văn bản thông thường.

Typography - Phong cách - Material Design (23)

Typography - Phong cách - Material Design (24)

Tiếng Trung, tiếng Nhật và tiếng Hàn.

Cân nặng: Vì Noto CJK có bảy trọng lượng phù hợp với Roboto nên hãy sử dụng cài đặt trọng lượng giống như tiếng Anh.

Cỡ chữ: Đối với kiểu Tiêu đề đến Chú thích, cỡ chữ lớn hơn 1px so với cỡ chữ được chỉ định cho tiếng Anh. Đối với các kiểu chữ lớn hơn Tiêu đề, cỡ chữ tiếng Anh là phù hợp.

Typography - Phong cách - Material Design (25)

Typography - Phong cách - Material Design (26)

Typography - Phong cách - Material Design (27)

Typography - Phong cách - Material Design (28)

Typography - Phong cách - Material Design (29)

Typography - Phong cách - Material Design (30)

Typography - Phong cách - Material Design (31)

Typography - Phong cách - Material Design (32)

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.

Cân nặng: Sử dụng Trọng lượng thông thường, vì Trọng lượng trung bình không có sẵn ở Noto. Google khuyên bạn nên tránh độ đậm của Bold, dựa trên phản hồi từ người bản xứ rằng Bold quá nặng.

Cỡ chữ: Đối với kiểu Tiêu đề đến Chú thích, cỡ chữ lớn hơn 1px so với cỡ chữ được chỉ định cho tiếng Anh. Đối với các kiểu chữ lớn hơn Tiêu đề, cỡ chữ tiếng Anh là phù hợp.

Typography - Phong cách - Material Design (33)

Typography - Phong cách - Material Design (34)

Typography - Phong cách - Material Design (35)

Typography - Phong cách - Material Design (36)

Typography - Phong cách - Material Design (37)

Typography - Phong cách - Material Design (38)

Typography - Phong cách - Material Design (39)

Typography - Phong cách - Material Design (40)

Chiều cao giữa các dòng

Để đạt được khả năng đọc phù hợp và nhịp độ phù hợp, độ cao của dòng đã được xác định dựa trên kích thước và trọng lượng riêng của từng kiểu. Ngắt dòng chỉ áp dụng cho các kiểu Nội dung, Tiêu đề phụ, Tiêu đề và các kiểu Hiển thị nhỏ hơn. Tất cả các kiểu khác phải tồn tại dưới dạng dòng đơn.

Typography - Phong cách - Material Design (41)

Typography - Phong cách - Material Design (42)

Typography - Phong cách - Material Design (43)

Đối với tất cả các kiểu, chiều cao dòng lớn hơn 0,1em so với các ngôn ngữ giống tiếng Anh. Tiếng Anh và các ngôn ngữ giống tiếng Anh chủ yếu sử dụng một phần của hộp em, thường là phần dưới bên dưới chiều cao x. Các ký tự tượng hình tiếng Trung, tiếng Nhật và tiếng Hàn (CJK) sử dụng toàn bộ hộp em. Các ký tự trong ngôn ngữ cao thường có dòng xuống và/hoặc dòng lên dài. Để đạt được mục đích thiết kế giống như tiếng Anh cho CJK và để tránh khả năng văn bản bị cắt giữa hai dòng cạnh nhau đối với các ngôn ngữ cao, chiều cao dòng cần phải lớn hơn trong tiếng Anh đối với các ngôn ngữ cao và dày đặc.

Typography - Phong cách - Material Design (44)

Typography - Phong cách - Material Design (45)

Typography - Phong cách - Material Design (46)

Các hướng dẫn về kiểu chữ khác

Màu văn bản quá giống với màu nền sẽ khó đọc. Văn bản có độ tương phản quá cao cũng có thể khó đọc. Điều này đặc biệt đúng với văn bản có màu sáng trên nền tối.

Văn bản phải duy trì tỷ lệ tương phản tối thiểu ít nhất là 4,5:1 (được tính dựa trên giá trị độ chói) để đảm bảo mức độ dễ đọc. Tỷ lệ 7:1 được ưu tiên.

Những sự kết hợp màu sắc này cũng xem xét tỷ lệ tương phản đối với những người dùng cảm nhận màu sắc khác nhau.

Typography - Phong cách - Material Design (47)

Typography - Phong cách - Material Design (48)

Typography - Phong cách - Material Design (49)

Typography - Phong cách - Material Design (50)

Typography - Phong cách - Material Design (51)

Để có trải nghiệm người dùng tốt nhất, hãy sử dụng loại động thay vì chỉ dựa vào kích thước loại nhỏ hơn hoặc cho phép cắt bớt văn bản có kích thước lớn hơn.

Loại lớn được áp dụng đúng cách có thể làm cho ứng dụng trở nên thú vị hơn, bố cục khác biệt và giúp người dùng giải mã nội dung nhanh chóng.

Loại động cho phép loại lớn khi không xác định được độ dài của văn bản trong bố cục. Kích thước động được chọn từ thang đo kiểu chữ dựa trên ước tính kích thước chữ và không gian có sẵn.

Typography - Phong cách - Material Design (52)

Typography - Phong cách - Material Design (53)

Typography - Phong cách - Material Design (54)

Typography - Phong cách - Material Design (55)

Các hình ảnh hiển thị các phương pháp hay nhất để ngắt dòng.

Typography - Phong cách - Material Design (56)

Typography - Phong cách - Material Design (57)

Typography - Phong cách - Material Design (58)

Hãy xem xét lời khuyên này về khả năng đọc và độ dài dòng từ Viện Baymard:

“Bạn nên có khoảng 60 ký tự trên mỗi dòng nếu muốn có trải nghiệm đọc tốt. Việc có đủ số lượng ký tự trên mỗi dòng là chìa khóa giúp văn bản của bạn dễ đọc hơn.”

"Quá rộng - nếu một dòng văn bản quá dài, mắt người dùng sẽ khó tập trung vào văn bản. Điều này là do độ dài khiến người ta khó biết được nơi bắt đầu và kết thúc của dòng. Hơn nữa, điều đó có thể xảy ra khó có thể tiếp tục viết đúng dòng trong những khối văn bản lớn.”

"Quá hẹp - nếu một dòng quá ngắn, mắt sẽ phải tua lại quá thường xuyên, làm mất nhịp điệu của người đọc. Dòng quá ngắn cũng có xu hướng gây căng thẳng cho mọi người, khiến họ bắt đầu ở dòng tiếp theo trước khi kết thúc dòng hiện tại (do đó sẽ bỏ qua những từ có khả năng quan trọng).”

Nguồn: “Khả năng đọc: Độ dài dòng tối ưu,”

http://baymard.com/blog/line-length-readability

Typography - Phong cách - Material Design (59)

Typography - Phong cách - Material Design (60)

Tham khảo danh mục ngôn ngữ

Để dễ dàng quốc tế hóa, Google đã phân loại ngôn ngữ thành ba loại: tiếng Anh và giống tiếng Anh; cao; và dày đặc.

Tiếng Anh và giống tiếng Anh: Tiếng Latin (trừ tiếng Việt), tiếng Hy Lạp, tiếng Cyrillic, tiếng Do Thái, tiếng Armenia và tiếng Georgia.

Cao: Tập lệnh ngôn ngữ yêu cầu chiều cao dòng bổ sung để chứa các ký tự lớn hơn, bao gồm các ngôn ngữ Nam và Đông Nam Á và Trung Đông, như tiếng Ả Rập, tiếng Hindi, tiếng Telugu, tiếng Thái, tiếng Việt.

Ngu độn: Tập lệnh ngôn ngữ yêu cầu chiều cao dòng bổ sung để chứa các ký tự lớn hơn nhưng có số liệu khác với tập lệnh cao. Bao gồm tiếng Trung, tiếng Nhật và tiếng Hàn.

Mã số

Sự miêu tả

Loại

của

tiếng Afrikaans

giống tiếng Anh

tiếng Amharic

giống tiếng Anh

ar

Tiếng Ả Rập (Tiêu chuẩn hiện đại)

Cao

các

Tiếng Azerbaijan

giống tiếng Anh

bg

tiếng Bungari

giống tiếng Anh

bn

tiếng Bengali

Cao

ca

tiếng Catalan

giống tiếng Anh

cs

tiếng Séc

giống tiếng Anh

C y

người xứ Wales

giống tiếng Anh

người Đan Mạch

giống tiếng Anh

của

tiếng Đức

giống tiếng Anh

Anh ta

người Hy Lạp

giống tiếng Anh

TRONG

Tiếng Anh (Mỹ)

giống tiếng Anh

một GB

Tiếng Anh UK)

giống tiếng Anh

es

Tiếng Tây Ban Nha (Châu Âu)

giống tiếng Anh

es-419

Tiếng Tây Ban Nha (Mỹ Latinh)

giống tiếng Anh

tiếng Estonia

giống tiếng Anh

EU

Tiếng Basque

giống tiếng Anh

fa

tiếng Ba Tư

Cao

fi

tiếng Phần Lan

giống tiếng Anh

hồ sơ

Tiếng Philippin

giống tiếng Anh

bạn

Tiếng Pháp (Châu Âu)

giống tiếng Anh

fr-CA

Người Canada gốc Pháp)

giống tiếng Anh

kính

tiếng Galicia

giống tiếng Anh

gu

tiếng Gujarati

Cao

CHÀO

Tiếng Hindi

Cao

giờ

tiếng Croatia

giống tiếng Anh

hu

người Hungary

giống tiếng Anh

hy

tiếng Armenia

giống tiếng Anh

nhận dạng

tiếng Indonesia

giống tiếng Anh

tiếng Iceland

giống tiếng Anh

người Ý

giống tiếng Anh

tôi

tiếng Do Thái

giống tiếng Anh

tiếng Nhật

Ngu độn

các

tiếng Gruzia

giống tiếng Anh

kk

Kazakhstan

giống tiếng Anh

km

tiếng Khmer

Cao

biết

tiếng Kannada

Cao

Hàn Quốc

Ngu độn

kỷ

người Kirghiz

giống tiếng Anh

tiếng Lào

Cao

tiếng Litva

giống tiếng Anh

lv

tiếng Latvia

giống tiếng Anh

mk

Tiếng Macedonia

giống tiếng Anh

ml

Mã Lai

Cao

tôi

tiếng Mông Cổ

giống tiếng Anh

Ông

Tiếng Marathi

Cao

bệnh đa xơ cứng

Mã Lai

giống tiếng Anh

Của tôi

Miến Điện (Myanmar)

Cao

nó là

tiếng Nepal

Cao

nl

tiếng Hà Lan

giống tiếng Anh

KHÔNG

Tiếng Na Uy (Bokmål)

giống tiếng Anh

bố

Tiếng Punjab

Cao

làm ơn

Đánh bóng

giống tiếng Anh

điểm

Tiếng Bồ Đào Nha (Brazil)

giống tiếng Anh

pt-pt

Tiếng Bồ Đào Nha (Châu Âu)

giống tiếng Anh

ro

người Rumani

giống tiếng Anh

ru

tiếng Nga

giống tiếng Anh

Sinhala

Cao

sk

Tiếng Slovak

giống tiếng Anh

sl

tiếng Slovenia

giống tiếng Anh

vuông

tiếng Albania

giống tiếng Anh

sr

Tiếng Serbia (Cyrillic)

giống tiếng Anh

sr-Lat

Tiếng Serbia (tiếng Latinh)

giống tiếng Anh

sv

tiếng Thụy Điển

giống tiếng Anh

sw

tiếng Swahili

giống tiếng Anh

đối mặt

Tiếng Tamil

Cao

các

tiếng Telugu

Cao

quần què

tiếng Thái

Cao

tr

tiếng Thổ Nhĩ Kỳ

giống tiếng Anh

Vương quốc Anh

tiếng Ukraina

giống tiếng Anh

bạn

tiếng Urdu

Cao

ĐẾN

tiếng Uzbek

giống tiếng Anh

vi

Tiếng Việt

Cao

zh-CN

Tiếng Trung (Giản thể, Quan thoại)

Ngu độn

zh-HK

Tiếng Trung (Quan Thoại, Hồng Kông)

Ngu độn

zh-TW

Tiếng Trung (Phồn Thể, Quan Thoại)

Ngu độn

ĐẾN

Tiếng Zulu

giống tiếng Anh

Typography - Phong cách - Material Design (2024)

References

Top Articles
Latest Posts
Article information

Author: Nathanael Baumbach

Last Updated:

Views: 6375

Rating: 4.4 / 5 (55 voted)

Reviews: 94% of readers found this page helpful

Author information

Name: Nathanael Baumbach

Birthday: 1998-12-02

Address: Apt. 829 751 Glover View, West Orlando, IN 22436

Phone: +901025288581

Job: Internal IT Coordinator

Hobby: Gunsmithing, Motor sports, Flying, Skiing, Hooping, Lego building, Ice skating

Introduction: My name is Nathanael Baumbach, I am a fantastic, nice, victorious, brave, healthy, cute, glorious person who loves writing and wants to share my knowledge and understanding with you.