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
$qtm-font-face__font-family--default
‘Helevtica Neue’, Helevtica, Arial, sans-serif
АБ
Russian
Roboto
$qtm-font-face__font-family--ru
‘Helevtica Neue’, Helevtica, Arial, sans-serif
利る
Japanese
Noto Sans JP
$qtm-font-face__font-family--ja
Meiryo, "Hiragino Kaku Gothic ProN","ヒラギノ角", "ProN W3", "メイリオ", sans-serif
브유
Korean
Noto Sans KR
$qtm-font-face__font-family--ko
"Malgun Gothic", Gulim, Arial, sans-serif
他们
Chinese
Noto Sans SC
$qtm-font-face__font-family--zh-cn
SimSun, sans-serif
Basic Sizes & Weights
Basic size and weight tokens used throughout our products.
Sample
Description
Token
Usage examples
The quick brown fox jumps over the lazy dog.
Body text
14px | 18 line height
$qtm-text__body-font-size
Default body text
The quick brown fox jumps over the lazy dog.
Text large
16px | 20 line height
$qtm-text__font-size--large
Body text for more spacious interfaces or components
The quick brown fox jumps over the lazy dog.
Text small
12px | 16 line height
$qtm-text__font-size-small
Small buttons
The quick brown fox jumps over the lazy dog.
Text xsmall
10px | 14 line height
$qtm-text__secondary-font-size
Meta data and tags
Sample
Description
Token
Usage examples
The quick brown fox jumps over the lazy dog.
Regular
400 | Regular
$qtm-text__font-weight
Default body text
The quick brown fox jumps over the lazy dog.
Medium
500 | Medium
$qtm-text__font-weight--medium
Selected states and titles
The quick brown fox jumps over the lazy dog.
Semi bold
600 | Bold
$qtm-text__font-weight--semi-bold
Titles
The quick brown fox jumps over the lazy dog.
Bold
700 | Black
