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

$qtm-text__font-weight--bold

Special cases only

Questions? Drop us a line
© Copyright 2021 Micro Focus or one of its affiliates