Typography
Brandon Grotesque and Realtime Text fonts have been selected as the primary fonts for this system.

Brandon Grotesque

Brandon Grotesque is the font used on the company logo. The bold weight is used in all headings, always capitalised, and if the heading is a sentence (as opposed the heading being e.g. a name), it is always terminated by a yellow dot. The normal weight is not used for the moment.

Brandon Grotesque Bold
ready
<style>
  * {
    font-family: 'Brandon Grotesque' !important;
    word-wrap: break-word;
    font-weight: bold;
  }
  p {
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 1rem;
    font-size: 18px !important;
    
  }
</style>

# ABCDEFGHIJKLMNOPQRSTUVWXYZ
# abcdefgijklmnopqrstuvwxyz
# 1234567890',.<>/?;':"[]{}-=_+!@#$%^&*()

Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.
Brandon Grotesque Regular
ready
<style>
  * {
    font-family: 'Brandon Grotesque' !important;
    word-wrap: break-word;
    font-weight: normal;
  }
  p {
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 1rem;
    font-size: 18px !important;
    
  }
</style>

# ABCDEFGHIJKLMNOPQRSTUVWXYZ
# abcdefgijklmnopqrstuvwxyz
# 1234567890',.<>/?;':"[]{}-=_+!@#$%^&*()

Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.

Realtime Text

Realtime Text is the main body-text font used on the website. A font with a monospace quality was chosen to emphasise the technical qualities of the company, but the proportional version of it is used to make it easier on the eye on the website. The bold weight is used wherever empphasis is needed.

Realtime Text Regular
ready
<style>
  * {
    font-family: 'Realtime Text' !important;
    word-wrap: break-word;
    font-weight: normal;
  }
  p {
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 1rem;
    font-size: 18px !important;
    
  }
</style>

# ABCDEFGHIJKLMNOPQRSTUVWXYZ
# abcdefgijklmnopqrstuvwxyz
# 1234567890',.<>/?;':"[]{}-=_+!@#$%^&*()

Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.
Realtime Text Bold
ready
<style>
  * {
    font-family: 'Realtime Text' !important;
    word-wrap: break-word;
    font-weight: bold;
  }
  p {
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 1rem;
    font-size: 18px !important;
    
  }
</style>

# ABCDEFGHIJKLMNOPQRSTUVWXYZ
# abcdefgijklmnopqrstuvwxyz
# 1234567890',.<>/?;':"[]{}-=_+!@#$%^&*()

Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.

Fallback

A sans-serif fallback font is used incase @font-face is not supported in the target browser.


Copryright

Roboto and Roboto Slab are free software. For more details, please visit Google Fonts official website at https://fonts.google.com/