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 User Experience Toolkit.

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

Paragraphs

Name	Font-family	Font-size	Line-height	Text-align
Paragraph	Siemens Sans Roman	Font-size of body element (default 16px)	1.43em	left
Small paragraph	Siemens Sans Roman	86% of paragraph font size	1.33em	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

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 CSS Framework will fallback on a web-safe (sans / sans-serif) font.

Headline h1

This is a headline of first order

<h1>This is a <em>headline</em> of first order</h1>

This is a div styled as headline of first order

<div class="h1">This is a div styled as <span class="em">headline</span> of first order</div>

Headline h2

This is a headline of second order

<h2>This is a <em>headline</em> of second order</h2>

This is a div styled as headline of second order

<div class="h2">This is a div styled as <span class="em">headline</span> of second order</div>

Headline h3

This is a headline of third order

<h3>This is a <em>headline</em> of third order</h3>

Headline h3

This is a div styled as headline of third order

<div class="h3">This is a div styled as <span class="em">headline</span> of third order</div>

Headline h4

This is a headline of fourth order

This is a div styled as headline of fourth order

<h4>This is a headline of fourth order</h4>

<div class="h4">This is a div styled as headline of fourth order</div>

Headline h5

This is a headline of fifth order

This is a div styled as headline of fifth order

<h5>This is a headline of fifth order</h5>

<div class="h5">This is a div styled as headline of fifth order</div>

Headline h6

This is a headline of sixth order

This is a div styled as headline of sixth order

This is a headline of sixth order without standard margin

This is a div styled as headline of sixth order without standard margin

<h6>This is a headline of sixth order</h6>

<div class="h6">This is a div styled as headline of sixth order</div>

<h6 class="has-margin-0">This is a headline of sixth order without standard margin</h6>

<div class="h6 has-margin-0">This is a div styled as headline of sixth order without standard margin</div>

Subheadline

This is a div styled as a subheadline

<div class="subheadline">This is a div styled as a subheadline</div>

Usage

Element	Class	Description
`h1`, `h2`, `h3`, `h4`, `h5`, `h6`	`.has-margin-0`	Removes the default margin of the headline element(s) and sets it to 0px.
`.h1`, `.h2`, `.h3`, `.h4`, `.h5`, `.h6`	`.has-margin-0`	Removes the standard margin of the headline elements and sets it to 0px.

Paragraph

This is a paragraph element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ut massa id enim faucibus interdum a vehicula leo. Fusce et sodales ante.

<p>
    This is a paragraph element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ut massa id enim faucibus interdum a vehicula leo. Fusce et sodales ante.
</p>

This is a div styled as a paragraph element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ut massa id enim faucibus interdum a vehicula leo. Fusce et sodales ante.

<div class="p">
    This is a div styled as a paragraph element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ut massa id enim faucibus interdum a vehicula leo. Fusce et sodales ante.
</div>

Small paragraph

This is a small paragraph element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ut massa id enim faucibus interdum a vehicula leo. Fusce et sodales ante.

This is a div styled as a small paragraph element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ut massa id enim faucibus interdum a vehicula leo. Fusce et sodales ante.

<p class="p--small">
    This is a small paragraph element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ut massa id enim faucibus interdum a vehicula leo. Fusce et sodales ante.
</p>

<div class="p p--small">
    This is a div styled as a small paragraph element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ut massa id enim faucibus interdum a vehicula leo. Fusce et sodales ante.
</div>

Usage

Element	Class	Description
`p`, `.p`	`.p--small`	Applies a smaller font size to the paragraph element.

Hyperlinks

Duis mollis, est non internal hyperlink, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Another internal link cras justo odio, dapibus ac facilisis in, egestas eget quam.

<p>
    Duis mollis, est non <a href="#">internal hyperlink</a>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. <a href="#" target="_blank">Another internal link cras justo odio</a>, dapibus ac facilisis in, egestas eget quam.
</p>

Duis mollis, est non internal hyperlink, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Another internal link cras justo odio, dapibus ac facilisis in, egestas eget quam.

<p class="p">
    Duis mollis, est non <a href="#" class="a">internal hyperlink</a>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. <a href="#" class="a" target="_blank">Another internal link cras justo odio</a>, dapibus ac facilisis in, egestas eget quam.
</p>

External hyperlinks

Justo Amet Ridiculus Tellus Fusce absolute hyperlink, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Another absolute hyperlink cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna.

<p>
    Justo Amet Ridiculus Tellus Fusce <a href="https://www.mindsphere.io" class="is-external" rel="noopener noreferrer">absolute hyperlink</a>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. <a href="https://www.mindsphere.io" target="_blank" class="is-external" rel="noopener noreferrer">Another absolute hyperlink</a> cras justo odio, dapibus ac facilisis in, egestas eget quam.
    Aenean lacinia bibendum <a href="#" class="is-external">nulla sed consectetur</a>. Maecenas sed diam eget risus varius blandit sit amet non magna.
</p>

<p class="p">
    Justo Amet Ridiculus Tellus Fusce <a href="https://www.mindsphere.io" class="a is-external" rel="noopener noreferrer">absolute hyperlink</a>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. <a href="https://www.mindsphere.io" target="_blank" class="a is-external" rel="noopener noreferrer">Another absolute hyperlink</a> cras justo odio, dapibus ac facilisis in, egestas eget quam.
    Aenean lacinia bibendum <a href="#" class="a is-external">nulla sed consectetur</a>. Maecenas sed diam eget risus varius blandit sit amet non magna.
</p>

Emphasized text

This is a text in an em element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

This is a text in a div styled as an em element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

<div>
    <em>This is a text in an em element.</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>

<div>
    <span class="em">This is a text in a div styled as an em element.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>

<div>
    <span class="i">This is a text in a div styled as an em element.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>

Marked text

This is a text in a mark element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

This is a text in a div styled as a mark element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

<div>
    <mark>This is a text in a mark element.</mark> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>

<div>
    <span class="mark">This is a text in a div styled as a mark element.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>

Small text

This is a text in a small element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

This is a text in a div styled as a small element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

<div>
    <small>This is a text in a small element.</small> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>

<div>
    <span class="small">This is a text in a div styled as a small element.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>

Strong text

This is a text in a strong element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

This is a text in a div styled as a strong element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

<div>
    <strong>This is a text in a strong element.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>

<div>
    <span class="strong">This is a text in a div styled as a strong element.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>

<div>
    <span class="b">This is a text in a div styled as a strong element.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>

Unordered list

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
List Item 2
List Item 3

Nested List Item with a very long line which
breaks/wraps into a new line
Nested List Item
Nested List Item

List Item 4
List Item 5
List Item 6, this
breaks into a new line
List Item 7

<ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    </li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <ul>
        <li>Nested List Item with a very long line which <br />breaks/wraps into a new line</li>
        <li>Nested List Item</li>
        <li>Nested List Item</li>
    </ul>
    <li>List Item 4</li>
    <li>List Item 5</li>
    <li>List Item 6, this <br /> breaks into a new line</li>
    <li>List Item 7</li>
</ul>

Ordered list

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
List Item 2

Nested List Item
Nested List Item
breaking / wrapping into a new line
Nested List Item

List Item 4
List Item 5
List Item 6; this item has so much text
that it breaks into a new line
List Item 7

<ol>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    </li>
    <li>List Item 2</li>
    <ol>
        <li>Nested List Item</li>
        <li>Nested List Item<br />breaking / wrapping into a new line</li>
        <li>Nested List Item</li>
    </ol>
    <li>List Item 4</li>
    <li>List Item 5</li>
    <li>List Item 6; this item has so much text <br />that it breaks into a new line</li>
    <li>List Item 7</li>
</ol>

Definition list

Definition List: Term: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Definition List: Term: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

<dl>
    <dt>
        Definition List: Term
    </dt>
    <dd>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    </dd>
    <dt>
        Definition List: Term
    </dt>
    <dd>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    </dd>
</dl>

Code snippets, monospace font

This is a paragraph element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin 200.162 little lorem ipsums on 12/05/2021 pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ut massa id enim faucibus interdum a vehicula leo. Fusce et sodales ante.

<p>
    This is a paragraph element. Lorem <code> ipsum dolor sit amet</code>, consectetur adipiscing elit. Proin <code class="code">200.162</code> little lorem ipsums on <code>12/05/2021</code> pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ut massa id enim faucibus interdum a vehicula leo. Fusce et sodales ante.
</p>

System icons