Typography

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

Usage

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

typography-usage-font-weight
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.

Types

Headline

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

typography-usage-types-headlines
Different headlines

Subtitle

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

typography-usage-types-subtitle
Headline with subtitle and paragraphs

Paragraph

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

typography-usage-types-paragraph
Headline with paragraphs in two different sizes

Lists

Unordered list

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

typography-usage-types-unordered-list
Unorderd nested list

Ordered list

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

typography-usage-types-ordered-list
Orderd nested list

Inline list

Use an inline list to create a horizontal list.

typography-usage-types-inline-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.

typography-usage-types-definition-list
Definition list

Style

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

Overview

typography-style-overview-headline
Headlines and paragraphs

typography-style-overview-definition-list
Standard definition list and inline definition list

Color

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

Typography

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

Headlines

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

Paragraphs

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:

typography-style-spacing-headlines-paragraph
Spacing for headlines and paragraphs

typography-style-spacing-definition-lists-un-orderd
Spacing for unordered and ordered lists

typography-style-spacing-definition-list
Spacing for definition lists

typography-style-spacing-definition-list-inline
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