Typography
Typography is an essential component of a clear and efficient user interface.
Usage
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.
Types
There are the following typography types:
Headline
The different headline sizes and weights build a structure you should use while designing your app.
Subtitle
A subtitle is smaller than a headline. It is a single line that is usually used in combination with a h1 headline.
Paragraph
Use a paragraph for longer text sections. There are two sizes available.
Lists
Unordered list
Use an unordered list for listings in which the order of the items doesn’t matter.
Ordered list
Use an ordered list for listings in which the order of the items matter.
Inline list
Use an inline list to create a horizontal list.
Definition list
Use a definition list to display name-value pairs, like in a glossary. It can also have an inline style.
Hyperlink
Use a hyperlink to reference to another internal or external site.
Style
This chapter shows several typography styles in the design system.
Overview
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: