Typography

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

Usage

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

There are the following typography 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

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

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

typography-usage-types-definition-list
Definition list

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

typography-usage-types-hyperlinks
1. Internal link, 2. External link

Style

This chapter shows several typography styles in the design system.

Overview

typography-style-overview-headline
Headlines and paragraphs

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

typography-style-overview-hyperlinks-example
Hyperlink examples: 1. Internal link, 2. External link

typography-style-overview-hyperlinks-state
Hyperlink states: 1. Default and visited, 2. Focus, 3. Mouseover, 4. Pressed

Typography

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

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 Roman 26px 36px left
Headline h4 Siemens Sans Roman 21px 29px left
Headline h5 Siemens Sans Roman 17px 23px left
Headline h6 Siemens Sans Roman 16px 22px left
Subtitle Siemens Sans Roman 17px 25px 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

typography-style-sizing-spacing-hyperlinks
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