Some modules have different headline styling options. It’s important that editors observe the intended color balance, page theming, and accessibility to ensures that the design is kept consistent across the digital experience.
A key part of the Henkel Adhesive Technologies brand is the Henkel GT flexa font and its expressive stylings. Using Henkel GT flexa correctly on digital requires attention and care.
Expressive style
The expressive font styles make for interesting compositions and strong brand presence, but implementing it takes manual effort. The pitfall of the expressive styles are their varying widths and space consuming attributes. The expressive style is often used on modules that need visual prominence.
Reduced style
Reduced stylings is the fallback style of all headlines. If you cannot fit your message in the expressive styling you can always go reduced. The reduced styling is the general headline styling
Expressive VS Reduced styling
The reduced typeface is usually present on the pages that have informative function, eg. Product listing page, Search results, Account pages, Articles, Case studies, Cart etc. The expressive styling should be used for campaigns (expressive, persuasive function) and pages that are higher in site hierarchy, e.g. Home page, Application L1 pages, Industry L1 pages etc.
Being smart with the content
Implementing expressive style fonts take manual effort to implement because you have to ensure that the width of the header fits onto all viewport sizes. This often results in a process of trial and error when using expressive fonts.
Our recommendations are:
- Keep headlines short and to the point.
- Use expressive font sparingly (to minimise complexity and ensure maximum effect of expressive font when it is used).
- If you don’t know which font to use, we suggest using the reduced.
- When using expressive font, test it out on mobile to ensure that it fits on the smaller viewport.
DO: Use a mix of narrow and bold styling.
DO: Use reduced styling for long headlines with many words (the text should fit in 3 lines)
DO: Be careful when using long words.
DO: Use bold styling of the expressive typeface when the header is only one word.
DON’T: Break words up into two lines. Try using condensed styling for longer words and bold styling for shorter words.
DON’T: Use condensed styling of the expressive typeface when the header is only one word. Use bold instead.
DON’T: Use only one style of expressive typeface for the entire header when it includes more than one word.