Text

Text component is used for all representations of text on a surface. Text is based on Android Typography guidelines.

also known as Copy, Subtext, Caption, Footer, Helper text

Text as it appears in our Pinner profile header.

Usage guidelines

When to use
  • For representing text as labels in UI controls such as buttons and menus
  • When text is needed for any written content
When not to use
  • When spacing is lacking and an icon or other graphic can be a recognizable substitute for text

Best practices

Headings and titles

Two blocks of text with headings used to separate and group them.
Do

Use to help group text and items in a logical order.

Block of text that uses a large heading to emphasize part of the text.
Don't

Use to emphasize text that you want users to read. Instead, use bold body text or another UI element like a banner or popover.

A block of text with a short, one-line heading.
Do

Keep headings and titles short and glanceable.

A very long heading announcing the start time of an event, but it's truncated, so you can't see the start time.
Don't

Use overly long headings. If headings are dynamically generated (like a 3rd party app name), truncation will work after 2 lines, but be mindful of unintended changes in meaning.

A heading that says 'Get a cover image that delivers'.
Do

Clearly describe the section a heading refers to.

A heading that says 'Get it!' and is not clear about what that means.
Don't

Use vague language that doesn’t describe the section that a heading refers to.

Body and labels

A block of text with a line emphasized in a bold weight.
Do

Emphasize text inside of paragraphs by using a bold weight.

A block of text using an underlined style to emphasize a line of text.
Don't

Emphasize text inside of paragraphs by underlining it; this can be confused with an interactive link or a button.

A block of text with nimimal styling.
Do

Use a minimal amount of sizes and styles to keep the UI clean and readable.

A block of text with some bold text, some text in color, some left-aligned and some center-aligned.
Don't

Mix styles and alignment, as this can be hard to read and follow.

A long paragraph that is left-aligned.
Do

Start-align paragraph text.

A long paragraph that is center-aligned.
Don't

Center-align or end-align paragraph text. This is hard to read, especially for users with dyslexia.

Accessibility

Minimum text size

A minimum text size of 16sp is recommended for readability, especially for longer blocks of text. Some short text labels or secondary text can go lower than that, but smaller sizes should be kept to a minimum. Making text brief will also help with readability.

Color

For low-vision users, text color contrast is very important. To ensure accessible contrast, stick to our standard text colors

. For design considerations and handy accessibility tools for checking color contrast, see our accessibility page
, Opens a new tab
.

Logical order

Label headings and titles as such, so that people who use screen readers (Android) can understand the flow of information.

Native features

People use Android’s accessibility features to adjust their font size system-wide. To enable system font size in an Android app, mark text and their associated containers to be measured in scalable pixels (sp). See Android’s accessibility documentation for more information:

Accessible design on Android


Accessible development on Android
, Opens a new tab

Design tokens

Use these tokens for applying size, weight and color styles to Text.


Variants

Headings

Used for surface titles and section headings


Body

Used for text that is part of paragraphs or UI controls


Size

These font sizes follow those available through our Typography scale


Weight

For emphasizing text in body copy and in sizes below 16sp and below, use bold. For titles and headings, use semibold.


Alignment

Text can either be start, center or end aligned. Text can be forced to left or right align when aligning integers in tables.


Colors

You can specify which color you want for your text. Most colors automatically change between light and dark modes, but the light and dark properties are available when light or dark colors are specifically desired. An example is using the dark mode error color on a dark background in light mode.


Styles

Text can be italicized for emphasis, or underlined to denote a link.


Overflow and truncation

For general guidelines around text truncation, see Typography Best practices

Writing

Do
  • Keep text in UI short and clear
  • Use Sentence case for all text that isn’t a brand name or proper noun
Don't
  • Use long text labels that could end up truncating or causing space issues when translating to other languages
  • Use Title Case or ALL CAPS in UI labels
  • Use ALL CAPS for paragraph text unless referring to a product or other entity that uses that style
  • Punctuate headings unless they are posing a question or making an exclamation

Localization

Keep text simple and short to avoid truncation or line-wrapping in UI controls like buttons when translating languages that require more characters. Avoid overriding our line-height settings, as this can result in text clipping for scripts, like Hindi, that have taller ascenders and descenders.

Right-to-left (RTL) alignment

When translated to languages that read from right to left, ensure that paragraph text is aligned based on language, not on context. For example, if the UI is reversed for an RTL language like Arabic, but there is a block of text in an LTR language such as English, left-align the paragraph in English.

A paragraph in Hebrew that is right-aligned, followed by a paragraph in English that is left-aligned.
Do
Paragraphs in Hebrew and English with the same alignment.
Don't

However, for lists or items in a menu, maintain the alignment of the UI.

A menu in Arabic and English with all of the items end-aligned.
Do
A menu with two Arabic items rignt-aligned and one English item left-aligned.
Don't

Text-wrapping and hyphenation

Hyphenation on Android is turned off by default to avoid incorrect word breaks when strings of text wrap to the next line. This is especially helpful for international languages where an incorrect word break can greatly change the meaning of a word or sentence.

Typography guidelines

A run-down of our typographic foundations across platforms