Typography

Intro

SAP Fiori uses SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.

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” 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.

72, a bespoke typeface created for SAP

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. If 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.

Here is an example of how theme parameters are used to specify a font stack. Notice that there are two versions of the 72 font; the first is a smaller subset to help improve performance and the second is the full version:

sapFontFamily: “72”, “72full”, Arial, Helvetica, sans-serif;

The fallback system fonts also have the advantage of zero loading time, ensuring that there is always a consistent font available that works with the fresh, clean, and minimalist SAP Fiori style. 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 help with character recognition at smaller sizes. Differentiation of character details, such as the number “1” and the lower case “l” versus the capital “I”, makes the characters easier to distinguish and improves the overall reading experience.

Example of improved accessibility features

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 the 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, and small bylines (for example, a feed).
• Medium text: Default text size used in controls, such as buttons, inputs, tables, or a tree.
• Large text: Stand-out text controls, such as the author name in a feed, or the file name for a collection of uploaded files.

Resources

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