Style Typography

Typography

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

Roboto is the standard typeface on Android.

Noto is the standard typeface for all languages on Chrome and Android for all languages not covered by 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

Buttons

English: Medium 14sp, all caps
Dense: Medium 15sp, all caps
Tall: Bold 15sp

Subheading

English: Regular 16sp (device), 15sp (desktop)
Dense: Regular 17sp (device), 16sp (desktop)
Tall: Regular 17sp (device), 16sp (desktop)

Body 1

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
Preferred: 7:1

Language categorization Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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.

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.

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

See the full list in the language categories table.

Typeface Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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.

Examples of Roboto

Roboto A-Z and numerals

Roboto font weights

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

Roboto font weights

Noto

Noto’s vertical metrics are compatible with Roboto.

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

Noto Sans examples for Thai and Hindi (Devanagari)

Noto font weights

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 font weights

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

Noto Sans Thai and Hindi (Devanagari) font weights

A directory of open-source web fonts

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:

  • Use the unhinted versions on Android and on Mac OS X, which doesn’t implement hints
  • Use hinted fonts on Chrome OS, Windows, and Linux

Font stack

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

Styles Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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.

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.

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.

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.

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.

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.

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.

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.

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 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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.

Line height for tall and dense languages

Line height pairing example, Thai and Hindi

Line height pairing example, Chinese and Japanese

Other typographic guidelines Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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.

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

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:

“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.”

"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,”

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

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 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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

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.

Code

Description

Category

af

Afrikaans

English-like

am

Amharic

English-like

ar

Arabic (Modern Standard)

Tall

az

Azerbaijani

English-like

bg

Bulgarian

English-like

bn

Bengali

Tall

ca

Catalan

English-like

cs

Czech

English-like

cy

Welsh

English-like

da

Danish

English-like

de

German

English-like

el

Greek

English-like

en

English (US)

English-like

en-GB

English (UK)

English-like

es

Spanish (European)

English-like

es-419

Spanish (Latin American)

English-like

et

Estonian

English-like

eu

Basque

English-like

fa

Persian

Tall

fi

Finnish

English-like

fil

Filipino

English-like

fr

French (European)

English-like

fr-CA

French (Canadian)

English-like

gl

Galician

English-like

gu

Gujarati

Tall

hi

Hindi

Tall

hr

Croatian

English-like

hu

Hungarian

English-like

hy

Armenian

English-like

id

Indonesian

English-like

is

Icelandic

English-like

it

Italian

English-like

iw

Hebrew

English-like

ja

Japanese

Dense

ka

Georgian

English-like

kk

Kazakh

English-like

km

Khmer

Tall

kn

Kannada

Tall

ko

Korean

Dense

ky

Kirghiz

English-like

lo

Lao

Tall

lt

Lithuanian

English-like

lv

Latvian

English-like

mk

Macedonian

English-like

ml

Malayalam

Tall

mn

Mongolian

English-like

mr

Marathi

Tall

ms

Malay

English-like

my

Burmese (Myanmar)

Tall

ne

Nepali

Tall

nl

Dutch

English-like

no

Norwegian (Bokmål)

English-like

pa

Punjabi

Tall

pl

Polish

English-like

pt

Portuguese (Brazilian)

English-like

pt-PT

Portuguese (European)

English-like

ro

Romanian

English-like

ru

Russian

English-like

si

Sinhala

Tall

sk

Slovak

English-like

sl

Slovenian

English-like

sq

Albanian

English-like

sr

Serbian (Cyrillic)

English-like

sr-Latn

Serbian (Latin)

English-like

sv

Swedish

English-like

sw

Swahili

English-like

ta

Tamil

Tall

te

Telugu

Tall

th

Thai

Tall

tr

Turkish

English-like

uk

Ukrainian

English-like

ur

Urdu

Tall

uz

Uzbek

English-like

vi

Vietnamese

Tall

zh-CN

Chinese (Simplified, Mandarin)

Dense

zh-HK

Chinese (Mandarin, Hong Kong)

Dense

zh-TW

Chinese (Traditional, Mandarin)

Dense

zu

Zulu

English-like