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
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
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.
A subtitle is smaller than a headline. It is a single line that is usually used in combination with a h1 headline.
Use a paragraph for longer text sections. There are two sizes available.
Use an unordered list for listings in which the order of the items doesn’t matter.
Use an ordered list for listings in which the order of the items matter.
Use an inline list to create a horizontal list.
Use a definition list to display name-value pairs, like in a glossary. It can also have an inline style.
Use a hyperlink to reference to another internal or external site.
This chapter shows several typography styles in the design system.
The following tables give reference to the different font sizes and weights:
|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|
Inline text elements
Inline text elements have the same font size as the corresponding paragraph.
|Strong text||Siemens Sans Bold|
|Emphasized text||Siemens Sans Italic|
Sizing and spacing
The following measurements show the dimensions for this component: