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
Thin
Weight 200
$typography__font-weight--thin
Special cases
Light
Weight 300
$typography__font-weight--light
Small text, low emphasis
Regular
Weight 400
$typography__font-weight--regular
Default body
Medium
Weight 500
$typography__font-weight--medium
Titles, selected states
Bold
Weight 700
$typography__font-weight--bold
High emphasis titles
Black
Weight 900
