Typography

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

Image of a Heading H1


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

Heading H2

Image of a heading H2


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

Heading H3

Image of a heading H3


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

Heading H4

Image of a heading H4


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

Body (copy)

Image of a body (copy)


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

Image of a 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

Image of a table header


Table subtitle

This style has the following states:

  • Default
  • Hover
  • Sorted

Image of a table subtitle


Table rowtitle

Image of a table rowtitle


Table data

Image of a table data


Specification

DesignCode