Typography

Roboto and Noto are the standard typefaces on Android and Chrome.

Roboto 和 Noto 字体是 Android 和 Chrome 的标准字体

Roboto is the standard typeface on Android.

Roboto 是 Android 的标准字体。

Noto is the standard typeface for all languages on Chrome and Android for all languages not covered by Roboto.

Noto 字体是 Chrome 上覆盖所有语言的标准字体，并且是覆盖 Android 上除了 Roboto 字体以外所有语言的字体。

Script types / 文字类型

• English and English-like (Latin, Greek, and Cyrillic) / 英文和类英文（拉丁语，希腊语，西里尔字母）
• Dense (Chinese, Japanese, and Korean) / 密集型（中文，日文，韩文）
• Tall (South and Southeast Asian and Middle Eastern languages) / 高挑型（南亚、东南亚、中东）

App bar / 导航栏

Title style, Medium 20sp

标题样式，Medium 20sp（下面有标准样式图，对应使用的样式）

Buttons / 按钮

• English: Medium 14sp, all caps / 英文型
• Dense: Medium 15sp, all caps / 密集型
• Tall: Bold 15sp / 高挑型

Subheading / 小标题

• English: Regular 14sp (device), 13sp (desktop) / 英文型
• Dense: Regular 15sp (dense), 14sp (desktop) / 密集型
• Tall: Regular 15sp (device), 14sp (desktop) / 高挑型

Text contrast ratios / 文字对比度

• Minimum: 4.5:1 / 文字与背景的对比度最小为4.5:1
• Preferred: 7:1 / 最适合阅读的对比度

Language categorization / 语言分类

Language scripts can be divided into three categories:

语言的字体可以分为三大类：

English and English-like: Latin (except Vietnamese), Greek, and Cyrillic scripts, supported by both Roboto and Noto. Roboto has been extended to completely cover all Latin, Greek, and Cyrillic characters as defined in Unicode 7.0. The number of supported characters has doubled from previous releases, from about 2000 to about 4000 characters.

英文和类似英文的类型（下面就简称为英文型）：拉丁语（除了越南），希腊，西里尔字体，Roboto 和 Noto 字体都对此支持。Roboto 使用 Unicode 定义并且已经覆盖所有的拉丁语，希腊语和西里尔字符。支持的字符数量已经从老版的2000增加到现在的4000个字符。

Tall: Language scripts that require extra line height to accommodate larger glyphs, including South and Southeast Asian and Middle-Eastern languages, like Arabic, Hindi, Telugu, Thai, Vietnamese. Noto supports these languages with two weights.

高挑型：需要额外的高度，以适应更大的外形的字符，包括南亚，东南亚，中东地区的语言，如阿拉伯语，北印度语，泰卢固语，泰国语，越南语。Noto 字体支持这些语言，并且有两个权重。

Dense: Language scripts that require extra line height to accommodate larger glyphs, including Chinese, Japanese, and Korean. Noto supports these languages with seven weights.

密集型：需要额外的高度来支持更大的字符，包括中文，日语，韩文。Noto 支持这些语言并且有七个权重。

See the full list in the / 查看详情的字体对照表： language categories table.

Typeface / 字体

Roboto

Roboto has been refined extensively to work across the wider set of supported platforms. It is slightly wider and rounder, giving it greater clarity and making it more optimistic.

Roboto 已经被扩展到更多的平台。字体更加的圆润丰满，使其有着更好的清晰度，让用户阅读起来更有快感。

Examples of Roboto

Roboto 字体示例

Roboto A-Z and numerals

Roboto 字体 A－Z 与 数字示例

Roboto font weights / Roboto 字体权重

Roboto has six weights: Thin, Light, Regular, Medium, Bold, and Black.

Roboto 字体有六个权重：Thin, Light, Regular, Medium, Blod, And Black.

Roboto font weights

Roboto 字体权重示例

Noto

Noto’s vertical metrics are compatible with Roboto.

Noto 字体的垂直量度与 Roboto 字体兼容。

Noto Sans examples for English and CJK (Chinese, Japanese, and Korean)

Noto Sans 字体英文，CJK（中文，日文，韩文）示例

Noto Sans examples for Thai and Hindi (Devanagari)

Noto Sans 泰国语，北印度语（梵文字母）示例

Noto font weights / Noto 字体权重

Noto Sans CJK (Chinese, Japanese, and Korean) has seven weights: Thin, Light, DemiLight, Regular, Medium, Bold, and Black. The weight of Noto Sans CJK Regular is the same as Roboto Regular.

Noto Sans 字体 CJK（中文，日文，韩文）有七个权重：Thin, Light, DemiLight, Regular, Medium, Bold, and Black。对于 Noto Sans CJK 的 Regular 权重与 Roboto 字体的Regular 权重相同。

Noto Sans CJK font weights

Noto Sans CJK 字体权重示例

Noto fonts for Thai, Devanagari, and all other major living languages have Regular and Bold weights.

Noto 字体对于泰国语，梵文等，主要的生活语言有 Regular 和 Bold 两个权重。

Noto Sans Thai and Hindi (Devanagari) font weights

Noto Sans 字体 泰国语，北印度语（梵文）字体权重示例

Hinted fonts / 字体微调

Hints are the instructions embedded in a font on how to modify (distort) a glyph to look better on low-resolution displays. As a tradeoff, a hinted font consumes more space than the unhinted version.

字体微调是在某些低分辨率显示状态下的文字优化方案，通常来讲，字体微调格式的文字比未微调过的字体更占空间。

Both Roboto and Noto have hinted and unhinted versions. Google recommends:

Roboto 和 Noto 字体都包含微调和未微调两个版本，Google 建议：

• Use the unhinted versions on Android and on Mac OS X, which doesn’t implement hints. / 在 Mac OS X 和 Android 设备上使用未微调版本的字体，普片来说这两个系统不支持微调字体。
• Use hinted fonts on Chrome OS, Windows, and Linux. / 在 Chrome OS，Windows，Linus 系统上，使用含有微调版字体。

Font stack / 文字堆栈

For both Android and web properties, the font stack should specify Roboto, Noto, and then sans-serif.

不论是 Android 设备或者其他浏览设备，文字堆栈的顺序都应该是，Roboto，Noto，最后是 sans-serif。

Styles ／ 样式

Too many type sizes and styles at once can wreck any layout. A typographic scale has a limited set of type sizes that work well together along with the layout grid.

过多的文字大小和样式很容易毁掉整个布局。合理的文字排版样式应该限制在少数的几个大小样式，共同完成整体的布局。

These sizes and styles were developed to balance content density and reading comfort under typical usage conditions. Type sizes are specified with sp (scaleable pixels) to enable large type modes for accessibility(链接https://material.google.com/usability/accessibility.html).

这套样式是以平衡内容疏密和提高阅读体验为目的开发的一套基本标准。文字的大小尺寸单位是 sp（可扩展像素）能够在不同尺寸的屏幕下自由缩放的尺寸。相关阅读链接

English and English-like scripts / 类英文语言

Latin, Greek, and Cyrillic.

拉丁语，希腊语，和西里尔文字。

The basic set of styles are based on a typographic scale of 12, 14, 16, 20, and 34.

基础的文字样式大小为12，14，16，20 和 34。

Examples using Display style, English

英文用于展示的样式示例

Examples using Headline style, English

英文用于标题的样式示例

Across form factors, text that appears in the app bar should use the Title style, Medium 20sp.

在整个页面展示上，当文字出现在应用栏上的时候，就应该使用标题样式，对应的样式为 Medium 20sp。

Examples using Title style, English

英文用于标题样式示例

In certain scenarios, use the larger subheading style instead of the smaller Body style. Some of those scenarios include when information is presented as small snippets or when titles are paired with lines of Body-styled text.

在某些情况下，使用较大的小标题样式来代替较小的正文主体样式。其中一些可行的方案例如，显示支撑或小注释，这样能够与正文内容样式进行配对。

Examples using subheading style, English

英文使用小标题样式示例

Examples using Body style, English

英文使用正文样式示例

Examples using Body style, English

英文使用正文样式示例

Button style (Medium 14sp, all caps) is used for all buttons. Button text should be all caps in languages that have capitalization. For languages that don’t have capitals, consider using color text for flat buttons to make them stand out from normal text.

按钮样式（Medium 14sp，所有文字大写）用于所有的按钮。按钮中的文字应该都使用大写。对于那些没有大小写的语言，平面的按钮可以使用不同颜色来区分正文的内容。

Examples using Button style, English

英文使用按钮样式示例

Dense scripts / 密集型语言

Chinese, Japanese, and Korean.

代表：中文，日文，韩文。

Weight: Since Noto CJK has seven weights that match Roboto, use the same weight settings as English.

权重:由于 Noto CJK 字体和 Roboto 字体都有相匹配的七个权重，所以可以使用与类英文相同的权重。

Font size: For Title through Caption styles, the font size is 1px larger than that specified for English. For styles larger than Title, the English type size is suitable.

字体大小：对于 Caption 样式，比类英文样式的字体大 1px 单位。（后面这句不知道怎么翻译）

Example, dense language script

密集型字体语言样式示例

Example of a subheading, Japanese

日语小标题样式示例

Example of Body, Japanese

日语正文内容示例

Example of Body 1, Japanese

日语正文内容样式示例

Example of a subheading, Traditional Chinese

繁体中文小标题样式示例

Example of Body, Traditional Chinese

繁体中文正文样式示例

Example of Body 1, Traditional Chinese

繁体中文正文样式示例

Tall scripts 高挑型语言

South and Southeast Asian and Middle Eastern languages, including Arabic, Hindi, and Thai.

南亚，东南亚，中东地区的语言，包括阿拉伯语，北印度语，泰国语。

Weight: Use Regular weight, as Medium weight is unavailable in Noto. Google recommends avoiding Bold weight, based on feedback from native speakers that Bold is too heavy.

权重:使用 Regular 权重，Noto 字体中无法使用 Medium 权重。谷歌建议避免使用 Blod 权重，根据当地用户的反馈 Blod 权重的文字过于强烈。

Font size: For Title through Caption styles, font size is 1px larger than that specified for English. For styles larger than Title, the English type size is suitable.

字体大小：对于 Caption 样式，比类英文样式的字体大 1px 单位。（后面这句不知道怎么翻译）

Example, tall language scripts

密集型语言基本样式示例

Example of a subheading, Hindi

北印度语小标题样式示例

Example of Body, Hindi

北印度语正文样式示例

Example of Body1, Hindi

北印度语正文样式示例

Example of a subheading, Thai

泰国语小标题样式示例

Example of Body, Thai

泰国语正文样式示例

Example of Body1, Thai

泰国语正文样式示例

Line height / 行高

To achieve proper readability and appropriate pacing, line heights have been determined based on each style’s individual size and weight. Line wrapping only applies to Body, Subhead, Headline, and the smaller Display styles. All other styles should exist as single lines.

为了实现良好的可读性和适当节奏，根据每个不同的样式和字体大小权重来决定行高。自动换行仅用于正文，副标题，标题等类似的先是风格。所有其他的风格的样式应该只使用于单行。

English and English-like scripts / 类英文语言

English and English-like type and leading

类英文样式示例

Pairing examples

组合示例

Isolated examples – Increased line height

单独示例－增加行高

Dense and tall scripts / 密集型语言和高挑型语言

For all styles, line height is 0.1em larger than the English-like languages. English and English-like languages mostly use a portion of the em box, often the lower portion below the x-height. Chinese, Japanese, and Korean (CJK) ideographic characters use the entire em box. Characters in tall languages often have long descenders and/or ascenders. To achieve the same design intention as English for CJK and to avoid potential text clipping between two lines next to each other for tall languages, the line height needs to be larger than in English for tall and dense languages.

对于所有的样式，行高为比类英文语言大 0.1em 。类英文语言大多数使用 em 盒子的一部分，通常低于 x-height 。中文，日语，韩文的表达通常将占满整个 em 盒子。高挑型的字幕经常会向上或向下延伸除一部分。为了使中文，日语，韩文，高挑性语言达到与类英文语言相同的设计意图，并且要避免彼此的相邻的两行内容彼此相互影响，行高需要比类英文语言更大。

Line height for tall and dense languages

密集型语言和高挑型语言的行高示例

Line height pairing example, Thai and Hindi

泰国语和北印度语行高组合示例

Line height pairing example, Chinese and Japanese

中文和日文行高组合示例

Other typographic guidelines / 排版指南补充

Colors & contrast / 颜色 & 对比

A text color that is too similar to the background color is hard to read. Text with too much contrast can also be hard to read. This is especially true of light-colored text against dark backgrounds.

文本颜色如果与背景色太过相似会对阅读造成极大的障碍。如果文字与背景有非常强的对比也会让阅读变的苦难。浅色文字在深色背景下尤为如此。

Text should maintain a minimum contrast ratio of at least 4.5:1 (calculated based on luminance values) for legibility. A ratio of 7:1 is preferred.

文字易读性最小的对比度为 4.5:1 （基于亮度值计算），最佳的对比度为 7:1。

These color combinations also consider contrast ratios for users who perceive color differently.

这些颜色组合也要考虑到有不同颜色感知的用户。

Contrast over light background

浅色背景对比度示例

Contrast over dark background

深色北京对比度示例

Contrast over image

在图像上的文字对比示例

Contrast over illustration

在插画上的文字对比示例

Large and dynamic type / 放大和动态型

For the best user experience, use dynamic type instead of relying only on smaller type sizes or allowing truncation of larger-size text.

为了获得最好的用户体验，使用动态型来替代那些只依赖小尺寸字体舍去大尺寸字体的方案。

Large type applied correctly can make apps more interesting, differentiate layouts, and help users to decode content quickly.

大尺寸的正确应用可是让应用更有趣，产生与众不同的排版，帮助用户能够更快的了解内容。

Dynamic type enables large type when the length of the text in a layout is unknown. Dynamic sizes are selected from a typographic scale based on available space and letter size estimates.

动态类的长度布局是不定的，而这个长度是根据文字的排版来决定的。动态型的文字大小是根据排版比例是根据可用空间和字幕的大小动态生成的。

Examples of dynamic type

动态型样式示例

UI application of dynamic type

动态的应用UI样式示例

Line breaking / 换行

The images show best practices for line breaks.

图片展示了最佳的换行示例。

Do.

Don't.

Avoid leaving large gaps and orphans on a line. Try not to leave very short words such as prepositions at the end of a line. Well-considered line breaks can avoid hyphenation of words altogether.

避免使用过大的空隙或单独一个字一行。尽量不要在结束的时候留下过短的词语。如果是深思熟路可以提前换行避免留下果断的词语。

Tracking and kerning / ？？和字间距

Line length / 行高

Consider this advice on readability and line length from the Baymard Institute:

Baymard 研究所根据易读性与内容长度研究结果，建议：

“You should have around 60 characters per line if you want a good reading experience. Having the right amount of characters on each line is key to the readability of your text.”

“如果你想要一个良好的阅读体验，应该让你每行大约有 60 个字符。其中每行所含有的字符数是易读性的关键。”

"Too wide – if a line of text is too long, the user’s eye will have a hard time focusing on the text. This is because the length makes it difficult to get an idea of where the line starts and ends. Furthermore it can be difficult to continue from the correct line in large blocks of text.”

“过长——如果一行的文本过长，用户的眼睛很难长时间的专注于这行的内容。这是因为从这行的开头到结尾的长度让你没有办法集中于作者所表达的内容。此外，这样也很难进行大段大段的阅读。”

"Too narrow – if a line is too short, the eye will have to travel back too often, breaking the reader’s rhythm. Too short lines also tend to stress people, making them begin on the next line before finishing the current one (hence skipping potentially important words).”

“过短——如果一行的文本过短，那么你的阅读节奏会经常因为眼睛观察到换行而打断。太短的内容也经常用来强调人们，这样会让用户还没有读到重要内容而因为过短的换行而不断的强调，而错过真正重要的地方。（容易跳过重点的内容）”

Source: “Readability: the Optimal Line Length.”

资料来源：“Readability: the Optimal Line Length.”

Ideal line lengths for English body text. The numbers represent the number of characters per line.

类英文型语言理想的正文每行长度示例，数字表示每行的字母数量。

Ideal line lengths for short lines of text in English. The numbers represent the number of characters per line.

类英文型语言理想的较短行每行字母示例，数字表示每行的字母数量。

**

Language categories reference / 语言类型对照表

For ease of internationalization, Google has categorized languages into three categories: English and English-like; tall; and dense.

为了便于国际化，Google 将文字归类分为三大类：类英文型，高挑型，密集型。

English and English-like: Latin (except Vietnamese), Greek, Cyrillic, Hebrew, Armenian and Georgian.

类英文型：拉丁语（除越南），希腊语，西里尔文，希伯来语，亚美尼亚语，格鲁吉亚语。

Tall: Language scripts that require extra line height to accommodate larger glyphs, including South and Southeast Asian and Middle Eastern languages, like Arabic, Hindi, Telugu, Thai, Vietnamese.

高挑型：语言文字需要额外的行高来适应更大的字母。包括，南亚，东南亚，中东等地，像阿拉伯语，印度语，泰国语，越南语。

Dense: Language scripts that require extra line height to accommodate larger glyphs but have different metrics from tall scripts. Includes Chinese, Japanese, and Korean.

密集型：语言文字需要额外的行高来适应更大的字母，但又与高挑型有所不同。像中文，日语，韩文。