Typography
Typography plays a crucial role in communicating our brand. By maintaining consistent typographic elements, we enhance readibility and strengthen brand recognition across different platforms, ensuring a cohesive and consistent brand experience for our audience.
Typeface
Helvetica Neue LT Pro
‘Helvetica Neue LT Pro' serves as BASF's corporate typeface. As the corporate typeface, it is used for a wide range of applications. The condensed fonts are excluded.
Principles
Hierarchy
To build a bridge between the visual and semantic structure, we use a clear font hierarchy. This enables people to understand the order of importance of the information we're sharing. Communication of hierarchy can be achieved by adjusting size, weight and color.
Type color
Depending on the background, headlines as well as interactive elements can be set in the brands' primary colors: white, copytext gray as well as light green. The body text is always set in copytext gray. More information about the usage of colors:
Letter spacing
Letter spacing describes the space between the letters. In the GROW design system, each defined textstyle comes with an already defined letter spacing. It may vary depending on use case. The defined spacing must not be changed.
Spacing information can be found on the assets below in the sections "Headlines" and "Paragraphs".
Line height
The distance between individual lines of text is described as line height. As already mentioned in ‘Letter spacing’, the same applies to line height: For each text style there is a defined line height, that must not be changed.
The line height information can be found on the assets below in the sections "Headlines" and "Paragraphs".
Alignment
Alignment defines the positioning of text and paragraphs. Within the GROW design system a left-centered approach is chosen, aiming for optimized readability.
Contrast
Sufficient contrast values of typography and background form the basis for good visibility and usability. Therefore, texts may only be placed on a background that contrasts well with the text's own color.
Low contrast
Low contrast
High contrast
High contrast
Styles
Headlines
Within the GROW design system, the following headline styles are defined. They are seperated in three sizing groups: desktop, tablet and mobile.
Paragraphs
Within the GROW design system, the following paragraph styles are defined. They are seperated in three sizing groups: desktop, tablet and mobile.
Incorrect usage
The following gallery shows typographical errors that are not aligned with the principles of the GROW design system.