Typography

Typography creates hierarchy in the presentation of content.

The corporate typefaces are SH-Bree Headline for headlines and Siemens Sans for body text. The default text size of 18px provides improved readability and accommodates tablet device guidelines. This is the basis for the type scale for headlines, paragraph styles and quotations.

You can freely use the smaller 16px font size for text inside components that are no articles.

All font sizes are defined in ‘rem’ units relative to the default text size.

Font stacks

Siemens Healthineers corporate fonts are available as web fonts supporting multiple languages. For unsupported glyphs a suitable fallback font will be used to render the font. These fallbacks are defined as font stacks in the UI-MarCom styles and are supposed to work internationally.

Headlines (h1, h2)

'SH Headline', 'Arial Black', 'Calibri', sans-serif

Small headlines (h3, h4, h5, h6)

'Siemens Sans', 'SH-Bree-Text', 'Open Sans', 'Roboto', 'Droid Sans', -apple-system, BlinkMacSystemFont, sans-serif

Copy text

'Siemens Sans', 'SH-Bree-Text', 'Open Sans', 'Roboto', 'Droid Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif

Headings

The headline set includes six headline styles for structuring content added by two display styles for large font use. The scale can be continued upwards if necessary, based on the underlying ratio. The headline 1 and bigger styles can be set in orange to distinguish them from the content. Smaller headlines have to be set in the base text color.

<h1>h1. This is a very large header.</h1>
<h2>h2. This is a large header.</h2>
<h3>h3. This is a medium header.</h3>
<h4>h4. This is a moderate header.</h4>
<h5>h5. This is a small header.</h5>
<h6>h6. This is a tiny header</h6>
<p>For standard sized text</p>
<h6 class="font-size-small">h6. This is a tiny header for small text.</h6>
<p class="font-size-small">For standard sized text</p>
<h6 class="font-size-xsmall">h6. This is a tiny header.</h6>
<p class="font-size-small">For standard sized text</p>
<h6 class="font-size-xsmall">h6. This is a tiny header.</h6>
<h6 class="font-size-xsmall">h6. This is a tiny header.</h6>

Headline with subheadline

In special cases the headline can be combined with a subheadline that is half the size. Then the color of the headline can be the base text color or Healthy Orange.

<h1 class="color-orange">
  Headline in combination <br>
  <span class="display-block h5 color-white margin-top-0">with a sub-headline</span>
</h1>

Paragraphs

Based on the standard size of 18px for body text there are two smaller text styles. They are used when space is limited or to create hierarchies. The minimum text size is limited to 14px and should only be used in exceptional cases. The lead paragraph is deployed as an introduction to a page or topic or to highlight outstanding content.

<p class="lead margin-top-0">Leading paragraph.</p>
<p>Standard paragraph.</p>
<p><small>Small paragraph.</small></p>
<p class="font-size-xsmall margin-bottom-0"><small>Extra small paragraph.</small></p>

Muted text

Restrained content can be grayed out as muted text.

Quotation

Dos and don’ts

• Do not use content copy text or smaller text styles at full width. Adhere to the defined maximum line width of 8 columns for base font text for readability.
• Do not use text sizes and font variations that are not defined in Siemens Healthineers web design guidelines.