UI MarCom 3

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.

Default font color is SH Black(90) on light and SH Black(10) on dark backgrounds. Please note detail information on Colors.

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

How to implement web fonts in your project is described in the developers getting started guide.

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.

Title on the Covered Stage

h1. This is a very large header.

h2. This is a large header.

h3. This is a medium header.

h4. This is a moderate header.

h5. This is a small header.
h6. This is a tiny header

To title standard sized copy text

This is a tiny header

To title small sized copy text

This is a tiny header

To title extra small sized copy text

<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.

Headline in combination
with a sub-headline

<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.

Leading paragraph. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus error distinctio quas ea dignissimos natus doloribus vitaeinventore perferendis hic consequatur quis necessitatibus, dolorem, repudiandae facere consequuntur.

Standard paragraph. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam possimus doloremque neque delectus accusantium veniam tempora, nobis natus fuga officiaquod expedita aliquam quisquam sequi fugiat minima harum ipsa. Pariatur dolorum velit blanditiis obcaecati, atque illo hic eos quibusdam aperiam repellat ullam odio nihil vel.Suscipit officiis sunt dolore provident maxime. Quibusdam possimus doloremque neque delectus accusantium veniam tempora.

Small paragraph. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam possimus doloremque neque delectus accusantium veniam tempora, nobis natus fugaofficia quod expedita aliquam quisquam sequi fugiat minima harum ipsa. Pariatur dolorum velit blanditiis obcaecati, atque illo hic eos quibusdam aperiam repellat ullam odio nihilvel. Suscipit officiis sunt dolore provident maxime. Quibusdam possimus doloremque neque delectus accusantium veniam tempora.

Extra small paragraph. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam possimus doloremque neque delectusaccusantium veniam tempora, nobis natus fuga officia quod expedita aliquam quisquam sequi fugiat minima harum ipsa. Pariatur dolorum velit blanditiis obcaecati, atque illo hiceos quibusdam aperiam repellat ullam odio nihil vel. Suscipit officiis sunt dolore provident maxime. Quibusdam possimus doloremque neque delectus accusantium veniam tempora.

<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.

It is displayed in SH Black(60) on light and SH Black(40) on dark background. See Colors for detail.

Muted text is used in some components like Disclaimer, Breadcrumbs or Figure.

Quotation

Head over to the Quotation component for more information.

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.