Typography

Text style and size is critical to readability and accessibility for your experience. The minimum contrast ratios for foreground text and background colors are preset in Alexa Responsive Layouts for high readability and contrast. However, you might still need to check the contrast ratio yourself to ensure legibility for all text sizes, weights, and background images – especially at small sizes such as Caption. Check out the Web Content Accessibility Guidelines (WCAG) 2.1 for more information on text and accessible content.

Typeface

Amazon Ember Display is the primary typeface, along with Bookerly for Hint text.

Scale

Scale Guidelines

Alexa's type scale is designed to be legible across device modes with different viewing distances. Most of the type scale is larger than what you might be accustomed to. This is to ensure that if a customer is far from their device, they still can quickly read the content being shown on screen. If something is important and needs to be seen, use Headline or larger styles.

• Display 1 and Display 2 sizes should primarily be used for quick, glanceable text, such as acronyms or large numbers to show time or day of the week.
• Display 3 and Display 4 sizes should be used when displaying a small amount of text, such as list items or inline titles that need to be read at a distance.
• Display 5 and Display 6 sizes should be used when displaying longer sentence length text that needs to be read at a distance.
• Headline size should be used for text that is shown alongside text set in display sizes, such as a brief description to go alongside a movie title.
• Body size should be reserved for long-form content, such as a synopsis of a book. Remember though that beginning with Body size, content can be difficult to read at a distance and customers might need to get closer to the device.
• Hint size is used exclusively for showing what a customer can say to invoke Alexa.
• Callout size should be used for text that is playing a supporting role, such as a grid view of images that each have a title.
• Title size should only be used for headers and buttons.
• Metadata size should be used to accompany callouts such as a displaying additional information about a movie time.
• Caption size should rarely, if ever, be used and is best for displaying UI elements, such as time passed in a progress bar.

You should use these whenever possible, to make sure that type scales appropriately across devices.

Weights

Alexa pairs light and bold weights of Amazon Ember Display to create contrast. In the type scale, there is always a default type style and an alternate style. For example, the default style for Display 3 is light and the alternate uses bold. When using bold and light together, use bold to call out key text items.

Size

Across the type scale, exact size values are calculated based on the distance the customer is from their device.

Hub Landscape Small (5 feet)

Hub Landscape (7 feet)

TV Fullscreen (10 feet)

Line length

Shorter text, such as headlines or titles should have a maximum line length of 40 characters. Long form text, such as body copy, should have a maximum of 60 characters. Use the (maxLines property) to set how many lines are displayed, while ensuring that you take translation for different languages into consideration.

Text Markup Tags

While you should leverage out-of-the-box styles for the best experience, you can also apply optional markup tags to text strings in the text component, as described in the following list.

• Strike-through (strike) is used to mark a type element as complete or deleted. It can be layered over another style without changing the typeface, weight, color, etc.
• Bold (strong) is used to add strong emphasis. It can be layered over another style and only affects weight.
• Italic (italic) is used for titles of books, magazines, newspapers, and the like or to add gentle emphasis to type. mark a type element as complete or deleted. It can be layered over another style without changing the typeface, weight, color, etc.
• Underline (underline) is used in rare cases to add additional emphasis to text. It can be layered over another style without changing the typeface, weight, color, etc. It should not be used as a link styling; instead use the Hint style for this use case.
• Subscript (subscript) is used for math functions, chemical compounds, and similar text that falls below the baseline of a typeface. It can be layered over another style and only affects size.
• Superscript (superscript) is used for letters in ordinal indicators (for example th, nd, st), exponential data, and other such text that falls above the cap-height of a typeface. It can be layered over another style and only affects size.
• Line height (lineHeight)adjusts the leading, or the amount of space between lines of text.
• Letter spacing (letterSpacing) adjusts the kerning, or the amount of space between characters.

Additional resources

• Styles Package - Text resources