Typography

Micro Focus has updated its fonts from Metric to Google’s Roboto. This should be the primary font in all products. However, when other languages or scenarios prevent the use of Roboto the backup is Google’s Noto Sans.
Roboto is the primary font. It supports Latin, Greek (partial), and Cyrillic scripts, and there are six different weights included in the font family.

Primary Font & Localization

Primary font token and typography used for other languages.

Sample

Description

Token

Fallback font

Aa

Primary font

Roboto

$font-face__font-family--default

‘Helevtica Neue’, Helevtica, Arial, sans-serif

АБ

Russian

Roboto

$font-face__font-family--ru

‘Helevtica Neue’, Helevtica, Arial, sans-serif

利る

Japanese

Noto Sans JP

$font-face__font-family--ja

Meiryo, "Hiragino Kaku Gothic ProN", "ProN W3", sans-serif

브유

Korean

Noto Sans KR

$font-face__font-family--ko

"Malgun Gothic", Gulim, Arial, sans-serif

他们

Chinese

Noto Sans SC

$font-face__font-family--zh-cn

SimSun, sans-serif

Font Sizes

General and basic sizes for body text and titles used across components and interfaces.

Sample

Description

Token

Usage

When zombies arrive quickly fax Judge Pat.

Body large

16px | 20 line height

$typography__font-size--large

Body text for spacious interfaces or elements

When zombies arrive quickly fax Judge Pat.

Body

14px | 18 line height

$typography__font-size

Default body text

When zombies arrive quickly fax Judge Pat.

Body small

12px | 16 line height

$typography__font-size--small

Small buttons, captions

When zombies arrive quickly fax Judge Pat.

Meta

10px | 14 line height

$typography__font-size--xsmall

Meta data, tags​

When zombies arrive quickly fax Judge Pat.

Title xl

40px | 44 line height

$typography__font-size--title-xlarge

Special cases

When zombies arrive quickly fax Judge Pat.

Title large

30px | 34 line height

$typography__font-size--title-large

Card titles, page headers

When zombies arrive quickly fax Judge Pat.

Title

20px | 24 line height

$typography__font-size--title

Dialog titles, cards, headers

When zombies arrive quickly fax Judge Pat.

Title small

16px | 20 line height

$typography__font-size--title-small

Nav headers, notification titles

When zombies arrive quickly fax Judge Pat.

Title xs

14px | 18 line height

$typography__font-size--title-xsmall

Table headers

Font Weights

Font weights that can be combined with the font sizes shown above.

Sample

Description

Token

Usage

When zombies arrive quickly fax Judge Pat.

Thin

Weight 200

$typography__font-weight--thin

Special cases

When zombies arrive quickly fax Judge Pat.

Light

Weight 300

$typography__font-weight--light

Small text, low emphasis

When zombies arrive quickly fax Judge Pat.

Regular

Weight 400

$typography__font-weight--regular

Default body

When zombies arrive quickly fax Judge Pat.

Medium

Weight 500

$typography__font-weight--medium

Titles, selected states

When zombies arrive quickly fax Judge Pat.

Bold

Weight 700

$typography__font-weight--bold

High emphasis titles

When zombies arrive quickly fax Judge Pat.

Black

Weight 900

$typography__font-weight--black

Special cases

Drop us a line

helloux@microfocus.com

© Copyright 2021 Micro Focus or one of its affiliates

Contribute  |  Updates