Typography

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
​‘ ? ’ “ ! ” ( % ) [ # ] { @ } / & \ < - + ÷ × = > ® © $ € £ ¥ ¢ : ; , . *

Sizes

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

-1 — 12px | Line height 16px

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

<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.

<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

<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

<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

<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

<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

<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

<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.

Light

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

<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

<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

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