Typography

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 & Subheadings​

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, 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 “the specific shape, design, or representation of a character”. It is a particular graphical representation, in a particular typeface, of an element of written language. Below are examples of specific 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 (—)

Use an em dash rather than a hyphen as a separator in a string especially where there may also be other hyphenated words used.

Don’t use hyphens to separate words. Hyphens should only be used to join words.

En Dash (–)​

Use an en dash rather than a hyphen for negative numbers, number or date ranges, etc.

Don’t use hyphens to separate numbers or date ranges. Hyphens should only be used to join words.

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.

For menus such as this one, use an ampersand to represent the word “and.”

In menus similar to this one, don’t spell out the word “and.”

In message dialogs follow these examples for & vs “and” usage.

In message dialogs these examples for & vs “and” usage should not be used.

Drop us a line

helloux@microfocus.com

© Copyright 2021 Micro Focus or one of its affiliates

Contribute  |  Updates