Typography
Typography refers to the way that text is styled and presented to make it legible and appealing when displayed. Typography enforces hierarchy in the user interface and can express a brand presence. Using typography consistently encourages unified experiences across Avaya products, and ensures that text is accessible to all.
Type Scale
Neo uses a different font depending on the language. For Avaya’s officially supported languages, Neo uses the Noto Sans font provided by Google. This ensures that the font is legible to all users, and provides a character set for various languages for free. Noto Sans has been tested for use in multiple languages, and satisfies the WCAG regulations for accessibility.
This interactive table shows how the fonts are displayed with regard to size, weight, and style. Use the design tokens to ensure the correct values are employed. If you need a language that is not listed, please reach out to us for guidance.
| Type | Example |
|---|---|
| H1 - Noto Sans Jumbo, 80px (Regular) | The quick brown fox jumps over the lazy dog |
Typography Components
Using typography components correctly ensures a clean and consistent hierarchy throughout the user interface. Where possible, use the design tokens embedded inside the components.
Headings
Headings are used to create visual hierarchies throughout the user interface. Heading 1 should only be used once per page.
Body
The Body style is used in components and for blocks of text.
Captions
Captions are used for adding extra information or smaller items in the hierarchy of text.
Text Formatting
Style options can be applied to text, buttons and labels. Apply none, one, or more of these styles to make important points stand out on the screen. These should be used sparingly to ensure that those important points aren’t lost in a flurry of too many other important points.
Bold
Bold text is used to emphasize a particular item.
Underline
Underlining should be used only for text links (either for hover states or default).
Italic
Italics are used for emphasizing a part of sentence. It’s also used for placeholder text and image captions. Italics are not used for Chinese, Japanese, Korean, and Arabic.
Capitalization
Uppercase text should be used sparingly (acronyms and short labels). Title case is used in labels for titles, controls, and other components.