Vielen Dank für deinen Besuch. Diese Seite ist nur in Englisch verfügbar.

Typography

Text style and size is critical to readability and accessibility for your experience.

Styles packages

In this Design Guide, we include recommendations that reference properties which are not part of core APL, for example type styles. These are available in the Styles package, which is available for you to use. Please refer to the information on importing document properties for implementation details.

Typeface

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

Image showcasing Amazon Ember and Bookerly fonts

Scale

A list of headers going from top to bottom, largest to smallest in Amazon Ember font and Bookerly hint font text.

Because a customer might not always be near a device, Alexa's type scale is designed to be legible at given 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.
  • 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.
  • Detail size should be used to accompany Callout titles, such as a displaying additional metadata about a movie time.
  • Label size should be used for navigation, page, and section headers, such as flight information in a header.
  • 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.

Bookerly uses a regular weight and is only used in an Italic style. Make sure any hints are shown using this style.

Size

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

5 feet

Style Typeface Default Weight Alternate Weight Size (in dp)
Display 1 Ember Display Bold Light 148
Display 2 Ember Display Bold Light 88
Display 3 Ember Display Light Bold 60
Display 4 Ember Display Light Bold 48
Headline Ember Display Light Bold 36
Body Ember Display Light Bold 24
Hint Bookerly Regular Italic 22
Callout Ember Display Bold Light 22
Detail Ember Display Bold Light 20
Label Ember Display Medium 20
Caption Ember Display Regular 12

7 feet

Style Typeface Default Weight Alternate Weight Size (in dp)
Display 1 Ember Display Bold Light 168
Display 2 Ember Display Bold Light 128
Display 3 Ember Display Light Bold 84
Display 4 Ember Display Light Bold 68
Headline Ember Display Light Bold 48
Body Ember Display Light Bold 36
Hint Bookerly Regular Italic 32
Callout Ember Display Bold Light 32
Detail Ember Display Bold Light 28
Label Ember Display Medium 28
Caption Ember Display Regular 18

10 feet

Style Typeface Default Weight Alternate Weight Size (in dp)
Display 1 Ember Display Bold Light 168
Display 2 Ember Display Bold Light 128
Display 3 Ember Display Light Bold 84
Display 4 Ember Display Light Bold 68
Headline Ember Display Light Bold 48
Body Ember Display Light Bold 36
Hint Bookerly Regular Italic 32
Callout Ember Display Bold Light 32
Detail Ember Display Bold Light 28
Label Ember Display Medium 28
Caption Ember Display Regular 28

Line length

On Typographic Styles

Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters. - Bringhurst, Elements of Typographic Style

Classic type principles tell us an ideal measure is a maximum of 75 characters for body copy. For all text, we recommend a maximum line length of 40 characters for shorter text, such as headlines or titles, and 60 characters for longer form text, such as body copy. Use the maxLines property to set the appropriate line-lengths, while ensuring that you take internationalization into consideration as you set line lengths.

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 outlined above 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.

Additional type controls

The lineHeight resource increases or decreases the space between lines of text. There are 3 predefined resources included in Predefined Named Styles. Experience makers can also reference specific custom values. lineHeight is applied as a Named Style Attribute.

The letterSpacing resource increases or decreases the space between characters in text. There are 3 predefined resources included in Predefined Named Styles. Experience makers can also reference specific custom values. letterSpacing is applied as a Named Style Attribute.

Additional resources

Back to top