Typography is an essential component of a clear and efficient user interface.


General information

The Base CSS sets the global typography and link styles. Siemens Sans is the standard typeface of the MindSphere Design System. The Siemens Webfont V1.0 includes Siemens Sans Regular and Siemens Sans Italic (with bold and black each) for Latin, Cyrillic and Greek in the formats EOT, TTF, WOFF and WOFF2.

Siemens Sans web-font

Internal use

The Siemens Sans web-font is not included in the zip files, they are reserved for Siemens internal use only!

A zip file containing the font files, CSS and SCSS code snippets is available for download here. Without included Siemens web-font, the MDSP-CSS Framework will fallback on a web-safe (sans / sans-serif) font.

Font weight and style

Different font weights and styles of Siemens Sans

How to use

Try to be consistent in the use of typography. This can be achieved by applying typographic hierarchy throughout your app.



The different headline sizes and weights build a structure you should use while designing your app.

Different headlines


A subtitle is smaller than a headline. It is a single line that is usually used in combination with a h1 headline.

Headline with subtitle and paragraphs


A paragraph is used for longer text sections. There are two sizes available.

Headline with paragraphs in two different sizes


Unordered list

Use an unordered list for listings in which the order of the items doesn’t matter.

Unorderd nested list

Ordered list

Use an ordered list for listings in which the order of the items matter.

Orderd nested list

Inline list

Use an inline list to create a horizontal list.

Inline list

Definition list

A definition list is used to display name-value pairs, like in a glossary. It can also have an inline style.

Definition list


This chapter shows several typography styles in the MindSphere Design System.


Headlines and paragraphs

Standard definition list and inline definition list


The following table gives reference to the different colors and shades used in the component:

Types and states Color name
Standard Gray 800
Subtitle Gray 400
On dark backgrounds White


The following tables give reference to the different font sizes and weights used in the component:


Name Font-family Font-size Line-height Text-align
Headline h1 Siemens Sans Black 36px 43px left
Headline h2 Siemens Sans Bold 31px 43px left
Headline h3 Siemens Sans Regular 26px 36px left
Headline h4 Siemens Sans Regular 21px 29px left
Headline h5 Siemens Sans Regular 17px 23px left
Headline h6 Siemens Sans Regular 16px 22px left
Subtitle Siemens Sans Regular 17px 25px left


Name Font-family Font-size Line-height Text-align
Paragraph Siemens Sans Regular 14px 20px left
Small paragraph Siemens Sans Regular 12px 16px left

Inline text elements

Inline text elements have the same font size as the corresponding paragraph.

Name Font-family
Strong text Siemens Sans Bold
Emphasized text Siemens Sans Italic

Sizing and spacing

The following measurements show the dimensions for this component:

Spacing for headlines and paragraphs

Spacing for unordered and ordered lists

Spacing for definition lists

Sizing and spacing for inline definition lists

Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top