Typography

Our fonts have been selected with accessibility standards in mind. We aim to ensure type within our product complies with WCAG 2.1 AA standards.
Roboto is our primary typeface, available in a wide range of languages.
Noto is our typeface for languages that are not supported by Roboto, such as Japanese, Chinese, and Korean.
Download links can be found in our resources chapter.

Fallback fonts

• Latin and Russian: Helevtica Neue’, Helevtica, Arial, sans-serif
• Chinese: SimSun, sans-serif
• Korean: Malgun Gothic”, Gulim, Arial, sans-serif
• Japanese: Meiryo, “Hiragino Kaku Gothic ProN”,”ヒラギノ角”, “ProN W3”, “メイリオ”, sans-serif

Micro Focus’s typography has been carefully designed with suitable scales, styles, and weights to help create clear hierarchies and organize information in a way that guides users through the interface.

Padding and grid: Designers should maintain Micro Focus’s 8-pixel grid system between blocks of text and place all content, including text, in increments of 8 pixels. It is optional to use a distance of 4 or 6 pixels in special cases.

Titles & subtitles

Titles and subtitles should be brief and clearly convey the content of their sections.

Paragraphs

Paragraphs are used to present longer text or main content, such as additional information, details, or error messages.

Body text

Micro Focus’s body text tokens includes 5 different type sizes (ranging from Extra large to Extra small) and various weights and formatting options in order to provide flexibility while designing. The complete list can be found in our tokens chapter.

There are 3 common types of letter cases:

1. Sentence case: the first letter of the first word in the phrase is capitalized.
2. Title case: each word in the phrase is capitalized, except for articles or connectors.
3. All caps: every letter is capitalized.

Micro Focus uses Sentence case for most texts, including titles, subtitles, and buttons. Sentence case is more readable and helps users differentiate between names and plain sentences.
Title case should be used for names such as products, features, entities, screens, modules, apps, etc.
All caps is no longer recommended for use due to localization issues and its association with yelling.

Type variations are changes in the style of text, such as font size, weight, color, and other typographic elements, used to create visual hierarchy and emphasis within a design.
Micro Focus has two types of variations: Links and Buttons, which are defined as unique type tokens.

Links

The Link token is used for any link, regardless of the font size. Links are always displayed in a different color (usually the primary color) with an underline, and uses sentence case.

Button text

Button tokens are based on the type of button used. Most buttons use regular font weight, except Primary flat and Negative flat buttons, which use a medium font weight. Buttons should be displayed using sentence case.

A glyph is a specific shape, design, or representation of a character in a typeface. Some glyphs have similarities, multiple sizes, or words that can be used in place of the glyph, and vice versa. Below are examples of these glyphs and their usage.

Dashes & Hyphens

• The long em dash (—) is used to separate extra information or mark a break in a sentence. and is approximately the length of the letter m. It is used to signal a pause or change in thought.
• The short en dash (–) is used to mark ranges and is about the length of the letter n. It is used to indicate a range of values or quantities, such as dates or numbers.

• A hyphen (-) is a punctuation mark that is used to join words or parts of words. It is used to create compound words or to divide words at the end of a line of text.

Ampersand (&)

The ampersand (&) is a symbol that is used as a shorthand for the word “and.” Even though it takes less space in the UI, it can be distracting and draw attention to the least important part of the sentence. In addition, ampersands are less recognizable to non-fluent English speakers.