Typefaces

Our fonts have been selected with accessibility standards in mind. Roboto is our primary typeface for Web, iOS, and Android. Roboto is also available in a multitude of languages. In languages where Roboto is not available our backup font is Noto, which is also a global font collection for writing in all modern and ancient languages and has multiple weights and widths, italic styles, and over 3,000 glyphs.

Type Hierarchy

Micro Focusโ€™s typography is used to convey hierarchy, and itโ€™s communicated through differences in font styles, size, and weight, and guides users through interfaces. Padding between blocks of text should maintain Micro Focusโ€™s guidelines of an 8-pixel grid system and designers should distance all content including text in increments of 8.

Headings and subheads should be as long as it takes to clearly and concisely communicate the content of their sections. However, a good rule of thumb is to limit the heading length to one to two lines and limit subheadings to three to five lines.

Paragraph Text

Paragraph (body) text can be used for both longer format text and main content. Among its many uses, paragraph text is also used for detail, label, hint, and error text as it is used for disclosing extra information or smaller items in hierarchical relationships of text. When determining the line length of text, the optimal line length for your body text should be between 50-60 characters per line, including spaces.

Letter Case

Differences in letter cases are modifications to the base type styles and they can be applied to all types of text. Generally, headings should be ten words or less and should be displayed in title case, anything longer should use sentence case. The same is true for when a subheading becomes long.

Title Case

Generally, if something is a title, header, or subheader, title case should be used. Title case should also be used for navigation, menus and side menus, as well as for buttons. When writing in title case, each word in the phrase is capitalized, except for articles such as: a, an, the, as well as most prepositions such as: in, on, for.

Sentence Case

In sentence case, only the first letter of the first word in the sentence or phrase is capitalized. Use sentence case for subheadings, body text, captions, dialogs, labels, buttons, tooltips, hint and help text, error messages, and any other text that is grammatically a full sentence.

All Caps

All caps is a text style that Micro Focus is no longer using as part of its Design System due to localization issues. Moving forward, our guidelines are to replace all use cases of all caps with title case as this is now the default in these scenarios. That said, all caps is not off limits and if used it should be used sparingly and only in specific use cases when absolutely necessary. If you have more questions or want guidance on how, where, and when to use all caps feel free to send the UX Studio a message.

Variations

Variations are modifications to the base type styles and can be applied to all types of text including headings, subheadings, and paragraph text.

Links

Used for any link, regardless of the font size. Link text is always displayed in a different color, with an underline, and uses sentence case.

Button Text

Button text styles are dependent on the type of button that is being used. Most buttons use a regular font weight and thereโ€™s an exception for primary and negative flat buttons that use a medium font weight. Buttons should be displayed using title case.

Labels

Used for all input field and text area labels. Labels are displayed using sentence case.

Placeholder Text

Placeholder text is displayed inside input fields and text areas and prompts users on how to correctly fill in the field. Text is displayed using sentence case.

Help Text

Help text is typically below input fields, checkboxes or radio buttons and gives the user additional information. Help text is displayed using sentence case.

Validation Text

Used for highlighting errors or making notification text more noticeable. Text is usually located under input fields, is smaller text, and is displayed using sentence case. Validation text can display an icon as well as hide the icon.

Glyphs

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.

Hyphens & Dashes

A hyphen (-) is a punctuation mark that is used to join words or parts of words. The longer em dash (โ€”) is used to separate extra information or mark a break in a sentence and is approximately the length of the letter m. The shorter en dash (โ€“) is used to mark ranges and is about the length of the letter n.

Em Dash (โ€”)

En Dash (-)

Ampersand (&) vs And

An ampersand is simply shorthand for the word “and.” There’s no real grammatical rule on when to use an ampersand versus spelling out the word โ€œand,โ€ though our general rule, and for consistency across products and interfaces, is to use an ampersand in places where you would use title case. These instances include content like headings, navigation, menus, and buttons, everywhere else โ€œandโ€ should be spelled out.

Questions? Drop us a line

helloux@microfocus.com

ยฉ Copyright 2021 Micro Focus or one of its affiliates