Icons are used most often as image buttons to indicate a state or action. Because of the simplicity of the design, icons complement the messages within the user interface (UI).
Alexa’s iconography is minimalist and slightly rounded. The icons scale properly for their size and stroke weight, in accordance with the Android convention.
Amazon designed the Alexa service to display on a vast range of devices with different screen sizes and resolutions. As you design, you need to consider how icon assets scale up or down with the various resolution capabilities of these Alexa-enabled devices.
To use image-based icons in your Alexa experience, you must provide an asset for each of the six primary density classes. For example, if you have an icon that is 72 x 72 pixels for medium-density screens, you must provide that same icon in all of the following sizes: 54, 72, 108, 144, 216, and 288.
| Icon Size Examples | Multiplier | Classification | PPI |
|---|---|---|---|
| 54 x 54 px | .75x | ldpi | ~120 ppi and below |
| 72 x 72 px (baseline) | 1x | mdpi | ~160 ppi |
| 108 x 108 px | 1.5x | hdpi | ~240 ppi |
| 144 x 144 px | 2x | xhdpi | ~320 ppi |
| 216 x 216 px | 3x | xxhdpi | ~480 ppi |
| 288 x 288 px | 4x | xxxhdpi | ~640 ppi |
Typography plays an important role in Amazon Echo brand recognition. It communicates a consistent, unified identity and gives instant personality to our written words. Amazon Ember is the universal brand font for all Amazon products and services.
The primary typeface of Alexa is Amazon Ember Display. The typeface for hint text is Bookerly. Amazon fonts are available to download here to assist you in designing for Multimodal displays.
Note: APL does not currently support custom fonts.
Amazon designed Alexa's type scale 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 large scale ensures that users can read on-screen content quickly, even if they're far away from the device. Use Headline or larger styles when your content is important and must be easy to read.
- Display 1 and Display 2 sizes– Use for quick, easy-to-glance text, such as acronyms or large numbers that show time or the day of the week.
- Display 3 and Display 4 sizes– Use when you display a small amount of text, such as list items or inline titles that users need to read at a distance.
- Display 5 and Display 6 sizes– Use when you display longer sentence-length text that users need to read at a distance.
- Body size– Reserve for long-form content, such as a synopsis of a book. Consider that at this size, content can be difficult to read at a distance and users might need to get closer to the device.
- Hint size– Use exclusively to show what a user can say to invoke Alexa.
- Callout size– Use for text that is playing a supporting role, such as a grid view of images, in which each has a title.
- Title size– Use only for headers and buttons.
- Metadata size– Use to accompany callouts, such as when you display additional information about a movie time.
- Caption size– Use rarely, if ever, and is best for when you display UI elements, such as time passed in a progress bar.
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 you use bold and light together, use bold to call out key text items.
Note: For hints in the footer, Bookerly uses a regular weight and is only shown in an italic style.
.
Text style and size is critical to readability and accessibility for your experience. Alexa Responsive Layouts presets the minimum contrast ratios for foreground text and background colors to ensure high readability and contrast. However, consider checking the contrast ratio yourself to ensure legibility for all text sizes, weights, and background images — especially at small sizes, such as Caption. For more details about text and accessible content, see the Web Content Accessibility Guidelines (WCAG) 2.1.
Across the type scale, exact size values are calculated based on the distance the customer is from their device.
| Style | Typeface | Default Weight | Alternate Weight | Size (in dp) |
|---|---|---|---|---|
| Display 1 | Ember Display | Bold | Light | 106 |
| Display 2 | Ember Display | Bold | Light | 80 |
| Display 3 | Ember Display | Light | Bold | 66 |
| Display 4 | Ember Display | Light | Bold | 53 |
| Display 5 | Ember Display | Light | Bold | 48 |
| Display 6 | Ember Display | Light | Bold | 40 |
| Body | Ember Display | Light | Bold | 32 |
| Hint | Bookerly | Regular Italic | - | 32 |
| Callout | Ember Display | Bold | Light | 28 |
| Title | Ember Display | Medium | - | 28 |
| Metadata | Ember Display | Bold | Light | 24 |
| Caption | Ember Display | Regular | - | 24 |
| Style | Typeface | Default Weight | Alternate Weight | Size (in dp) |
|---|---|---|---|---|
| Display 1 | Ember Display | Bold | Light | 148 |
| Display 2 | Ember Display | Bold | Light | 111 |
| Display 3 | Ember Display | Light | Bold | 92 |
| Display 4 | Ember Display | Light | Bold | 74 |
| Display 5 | Ember Display | Light | Bold | 48 |
| Display 6 | Ember Display | Light | Bold | 40 |
| Body | Ember Display | Light | Bold | 32 |
| Hint | Bookerly | Regular Italic | - | 32 |
| Callout | Ember Display | Bold | Light | 28 |
| Title | Ember Display | Medium | - | 28 |
| Metadata | Ember Display | Bold | Light | 24 |
| Caption | Ember Display | Regular | - | 24 |
| Style | Typeface | Default Weight | Alternate Weight | Size (in dp) |
|---|---|---|---|---|
| Display 1 | Ember Display | Bold | Light | 192 |
| Display 2 | Ember Display | Bold | Light | 128 |
| Display 3 | Ember Display | Light | Bold | 96 |
| Display 4 | Ember Display | Light | Bold | 64 |
| Display 5 | Ember Display | Light | Bold | 48 |
| Display 6 | Ember Display | Light | Bold | 40 |
| Body | Ember Display | Light | Bold | 32 |
| Hint | Bookerly | Regular Italic | - | 32 |
| Callout | Ember Display | Bold | Light | 28 |
| Title | Ember Display | Medium | - | 24 |
| Metadata | Ember Display | Bold | Light | 24 |
| Caption | Ember Display | Regular | - | 24 |
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 you want to display, while ensuring that you take translation for different languages into consideration.
You should take advantage of out-of-the-box styles for the best experience, but you can also apply optional markup tags to text strings in the text component, as described in the following list.
Note: Similar to how too much text on screen can distract and overwhelm users of the voice experience, too many formatting options can make your content difficult to read.
- 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, etc. or to add gentle emphasis to type. 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.