Theme:
SCSS TypeScript

Fonts

We use different fonts for this Style Guide.

LabGrotesque

Lab Grotesque is a sans-serif typeface designed by Göran Söderström and published through Letters from Sweden in 2015. The design was inspired by pre-Helvetica grotesques and gothics. The font comes with a stylistic option for rounded dots, which can be difficult to find in the grotesque genre.

We include a follow weights:

  • bolder: 900
  • bold: 700
  • regular: 500
  • normal: 400
  • light: 200
Theme basic [FIX] Screen size XL
html

Monospace

As monospace font we use Lucida Console. Lucida is an extended family of related typefaces designed by Charles Bigelow and Kris Holmes and released from 1984 onwards. The family is intended to be extremely legible when printed at small size or displayed on a low-resolution display – hence the name, from ’lucid’ (clear or easy to understand).

We include a follow weights:

  • bold: 700
  • normal: 400
  • light: 300
Theme basic [FIX] Screen size XL
html

OpenSans

Open Sans is a humanist sans-serif typeface designed by Steve Matteson, commissioned by Google and released in 2011. It is based on his previous Droid Sans design, designed for Android mobile devices, but slightly wider.

Featuring wide apertures on many letters and a large x-height (tall lower-case letters), the typeface is highly legible on screen and at small sizes. It belongs to the humanist genre of sans-serif typefaces, with a true italic.

We include a follow weights:

  • bolder: 900
  • bold: 600
  • normal: 400

Source: https://fonts.google.com/specimen/Open+Sans

Theme basic [FIX] Screen size XL
html

PTSans

PT Sans was designed in 2010 by Alexandra Korolkova with the assistance of Olga Umpeleva and under the supervision of Vladimir Yefimov. The designers pursued the goal of creating a font that could be designed and used in a variety of ways, and so PT Sans is available in a total of 32 weights.

It combines classic and modern styles of a humanistic sans serif. PT Sans is particularly effective when it comes to lettering, for example in everyday urban visual communication, in the form of signs, plans or signposts.

We include a follow weights:

  • bold: 700
  • normal: 400
Theme basic [FIX] Screen size XL
html

Roboto

Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.

We include a follow weights:

  • bolder: 900
  • bold: 700
  • regular: 500
  • normal: 400
  • light: 300
Theme basic [FIX] Screen size XL
html

TiemposText

Tiempos Text is a serif typeface designed by New Zealand-based designer Kris Sowersby. It began as an offshoot of Galaxie Copernicus but ended up evolving into its own family. The design was heavily influenced by Times New Roman, especially in the italic variant. Tiempos Text has a companion font, Tiempos Headline, that is designed to be used at larger sizes.

We include a follow weights:

  • bold: 700
  • normal: 500
Theme basic [FIX] Screen size XL
html

Icons

The icons used in this Style Guide are created by finanzen.net GmbH. The usage and list of all icons can be found in more detail in Icons.