Typography

Stable Available since 1.0.0 Last updated 1.3.0

SAP 72 font family was designed from the ground up and made it possible to meet SAP Fiori’s typographic requirements, including - legibility enhancements, font styles, brand voice, character set and language support.


72 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
​‘ ? ’ “ ! ” ( % ) [ # ] { @ } / & \ < - + ÷ × = > ® © $ € £ ¥ ¢ : ; , . *


Learn More about the SAP 72 Font Family

Sizes

There are eight sizes defined where 0 is the default size of 14px and hierarchy proceeds down to -1 and up to 6.

a a a a a a a a
-1
12px
0
14px
1
16px
2
18px
3
20px
4
24px
5
36px
6
48px

-1 — 12px | Line height 16px

SCSS Mixin: @include fd-type("-1")    |    Helper class: .fd-has-type-minus-1

Grumpy wizards make toxic brew for the evil Queen and Jack

<p class="fd-has-type-minus-1">Grumpy wizards make toxic brew for the evil Queen and Jack</p>

0 — 14px | Line height 20px

SCSS Mixin: @include fd-type()    |    Helper class: .fd-has-type

Note: This is the default size and generally no styles are needed to render this size in most cases.

Grumpy wizards make toxic brew for the evil Queen and Jack

<p class="fd-has-type">Grumpy wizards make toxic brew for the evil Queen and Jack</p>

1 — 16px | Line height 20px

SCSS Mixin: @include fd-type("1")    |    Helper class: .fd-has-type-1

Grumpy wizards make toxic brew for the evil Queen and Jack

<p class="fd-has-type-1">Grumpy wizards make toxic brew for the evil Queen and Jack</p>

2 — 18px | Line height 24px

SCSS Mixin: @include fd-type("2")    |    Helper class: .fd-has-type-2

Grumpy wizards make toxic brew for the evil Queen and Jack

<p class="fd-has-type-2">Grumpy wizards make toxic brew for the evil Queen and Jack</p>

3 — 20px | Line height 28px

SCSS Mixin: @include fd-type("3")    |    Helper class: .fd-has-type-3

Grumpy wizards make toxic brew for the evil Queen and Jack

<p class="fd-has-type-3">Grumpy wizards make toxic brew for the evil Queen and Jack</p>

4 — 24px | Line height 32px

SCSS Mixin: @include fd-type("4")    |    Helper class: .fd-has-type-4

Grumpy wizards make toxic brew for the evil Queen and Jack

<p class="fd-has-type-4">Grumpy wizards make toxic brew for the evil Queen and Jack</p>

5 — 36px | Line height 40px

SCSS Mixin: @include fd-type("5")    |    Helper class: .fd-has-type-5

Grumpy wizards make toxic brew for the evil Queen and Jack

<p class="fd-has-type-5">Grumpy wizards make toxic brew for the evil Queen and Jack</p>

6 — 48px | Line height 52px

SCSS Mixin: @include fd-type("6")    |    Helper class: .fd-has-type-6

Grumpy wizards make toxic brew for the evil Queen and Jack

<p class="fd-has-type-6">Grumpy wizards make toxic brew for the evil Queen and Jack</p>

Weights

There are three weights defined light, normal, Bold.

a a a
Light Normal Bold

Light

SCSS Mixin: @include fd-weight("light")    |    Helper class: .fd-has-font-weight-light

Grumpy wizards make toxic brew for the evil Queen and Jack

<p class="fd-has-type-6 fd-has-font-weight-light">Grumpy wizards make toxic brew for the evil Queen and Jack</p>

Normal

SCSS Mixin: @include fd-weight("normal")    |    Helper class: .fd-has-font-weight-normal

Grumpy wizards make toxic brew for the evil Queen and Jack

<p class="fd-has-type-6 fd-has-font-weight-normal">Grumpy wizards make toxic brew for the evil Queen and Jack</p>

Bold

SCSS Mixin: @include fd-weight("bold")    |    Helper class: .fd-has-font-weight-bold

Grumpy wizards make toxic brew for the evil Queen and Jack

<p class="fd-has-type-6 fd-has-font-weight-bold">Grumpy wizards make toxic brew for the evil Queen and Jack</p>