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.


There are the following typography types:


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


Use a paragraph 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

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

Definition list

Use a hyperlink to reference to another internal or external site.

1. Internal link, 2. External link


This chapter shows several typography styles in the design system.


Headlines and paragraphs

Standard definition list and inline definition list

Hyperlink examples: 1. Internal link, 2. External link

Hyperlink states: 1. Default and visited, 2. Focus, 3. Mouseover, 4. Pressed


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

Name State Property Color name
Headline, Paragraph, List all Foreground color Gray 800
Subtitle all Foreground color Gray 400
On dark backgrounds all Foreground color White
Hyperlink default, visited Foreground color State blue 100
Hyperlink focus Border color Cool blue
Hyperlink mouseover Foreground color Cool blue
Hyperlink pressed Foreground color State blue 250


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


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
Name Font-family Font-size Line-height Text-align
Internal link Siemens Sans Regular 14px 20px left
External link Siemens Sans Regular 14px 20px left

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

Sizing and spacing for external link

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