Font

The company font «SBB Web» is used as a web font and in the styles Thin, Light, Roman and Bold. «SBB Web» can be downloaded here.

The use of a mono-spaced font is recommended for some applications. The font required is selected when used for the first time. The following fonts are currently available:

• Courier
• OCR-B
• Consolas
• Roboto Mono
• DejaVu Sans Mono

Style

The font styles defined here form the basis of web applications and their components. If others are used, a clear hierarchy must be ensured as well as sufficient contrast and appropriate line/paragraph spacing. The SBB colors apply to the font colors.

Heading H1

• Before H1 (above), a divider of variant «Big» is inserted, afterwards (below) a Divider of variant «Medium».

Heading H2

• Before H2 (above), a divider of variant «Medium» is inserted, afterwards (below) a Divider of variant «Small».

Heading H3

• Before H3 (above), a divider of variant «Small» is inserted, afterwards (below) a Divider of variant «Thin».

Heading H4

• Before H4 (above), a divider of variant «Small» is inserted, afterwards (below) a Divider of variant «Thin».

Body (copy)

• Before the copy (above), a divider of variant «Thin» is inserted, afterwards (below) a Divider of variant «Thin».

Link

• Is used as a standard link within texts.
• Further information about links can be found at link.

Table header

This style has the following states:

• Default
• Hover
• Sorted

Table subtitle

This style has the following states:

• Default
• Hover
• Sorted

Table rowtitle

Table data

Specification

DesignCode

Find component

Lean

Enter keyword

Basics Brand Divider Icon Text Typografie Components Accordion Autocompletion Breadcrumb Button Buttonbar Checkbox Chip Contextmenu Datepicker Dialog Fieldset Fileselector Filter Header Link Loading Indicator Menuitem Notification Pagination Processflow Radiobutton Select (Dropdown) Sidebar Slider Status Tab Table Tag Textarea Textexpand Textfield Timefield Toggle Tooltip Tree Usermenu