Designing 72 from the ground up made it possible to meet SAP Fiori’s typographic requirements, including:

• Legibility enhancements: Optimize for screen use.
• Font styles: Support a robust typographic hierarchy.
• Brand voice: Be credible and humane.
• Character set: Accommodate complex content.
• Language support: Support Windows Glyph List.
• Accessibility: Improve character recognition.

Typography with 72

“72,” SAP’s proprietary typeface, replaces the default system fonts to improve the typographic system for SAP Fiori applications. The design has been meticulously crafted to portray a look and feel that is more trustworthy, friendly and modern, communicating the visual language of SAP Fiori. The metrics of the system fonts have been kept, to ensure compatibility within all controls. Improvements of the individual characters have been made, which also means that less screen width is required, resulting in reduced truncation issues. With all these enhancements, along with the humanist influences within the fine details, 72 greatly improves the legibility of SAP Fiori applications.

Language Support and Fallback to System Font

Language coverage is one of the most important requirements of a typeface depending on the number of countries in which your applications need to be available. Beyond the languages the font supports, fallback solutions need to be considered. In case the defined fonts cannot be displayed when an application initially loads, a fallback font is defined in the style sheet. Defining a fallback to a sans-serif system font that is readily available on every user’s device is a simple solution to load applications in any language. The font stack that is used within the CSS includes 72 with a fallback to system fonts such as Arial and Helvetica in combination, or Roboto for Android.

The fallback system fonts also bring the advantage of zero loading time, ensuring that there is always a consistent font available that works with the fresh, clean, and minimalistic style that is SAP Fiori. The font stack used comes with a full Unicode solution when special characters are needed. For all the languages that SAP Fiori will need to support, system fonts are available. 72 is integrated into the control set, making customization easy. The font stack can also be modified to achieve an individual result.

Accessibility

Optimized for screen consumption, 72’s design enhancements increase legibility, readability and ultimately, accessibility. A wider apex and open counters helps with character recognition at smaller sizes. Differentiation of character details, such as the number “1” and the lower case “l” versus the capital “I”, make the characters easier to distinguish and improve the overall reading experience.

Headlines and Font Styles for UI Controls

• Headlines 1 to 6: titles are defined in several sizes and styles that help to visually identify the context of application pages or grouped content within the user interface. Example of headlines include, page title, object header title, list, form, table, chart, timeline and feed titles.
• Small text: used for controls such as time stamps, unit of measurement, small bylines (e.g. feed).
• Medium text: the default text size used in controls, such as buttons, inputs, tables, tree.
• Large text: stand out text controls, such as feed author name, upload collection file name.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.