TYPOGRAPHY
Typography is a main component of our design system. We use big fat all-caps bold lettering with soft corners for our Headines and important messages. For any other type we use the sans-serif, but yet classic and not too modern looking Lato.
Brandon Grotesque
A font, that fits the brand: bold lettering, typed in uppercase. A well readable font, used for headlines and specific, important short messages.
Lato
A very well designed easy-to-read font with the perfect balance between classic and modern style. Perfect for body copy.
Rules on how big or small fonts can be and how different sizes can fit together
Headline with bold Lato Subheadline
Headline with regular Lato Subheadline
Bold Lato preheadline with Headline
Guidance on how not to use our font stack
Don’t use Brandon in non-uppercase letters
Don’t recreate the Headline/Subheadline pair using only Lato
Don’t switch the hierarchy
Line height
Line Height rules are pretty straight forward: Always add 8 pt. to your Font size.
Line height = Font size + 8 pt.
Font size 36pt. = Line height 44pt.
Font size 22pt. = Line height 30pt.
Font size 18pt. = Line height 26pt.
Font size 12pt. = Take a guess now!*
These guidelines are mainly built for graphical applications. There are additions and exeptions in our User Interfaces. For more info check our UI Guidelines.
*If you can guess the guess the Line height correctly you have the chance to win a glass of water, served by someone from the Marketing team. Good luck!
Depending on the use case, different rules can apply to typography which is placed on images
White text won’t be very legible here.
Use a darker brand color like Dark Blue or Dark Grey here.
Don’t write across people.
Arrange your image according to the best text placement.
Don’t use subheadlines or even body copy in images.
Find another solution or leave it out. Images are reserved for headlines.
Ground Rules
01. Work with the image, to find the best layout
02. Don’t be afraid to reframe: Legible text over centered people
03. White text is superiour to other colors - Blue and Grey are superiour to red
Summary
01
Headlines are always in all caps
02
Don’t use Lato for Headlines
03
Text on Images is a good thing, but don’t overdo it