Updated: July 26, 2018

Typography

Intro

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.

72, a bespoke typeface created for SAP
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. 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.

Example of improved accessibility features
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, 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.
28 px
1.75 rem
Header 1
22 px
1.375 rem
Header 2
20 px
1.25 rem
Header 3
18 px
1.125 rem
Header 4
16 px
1 rem
Header 5
14 px
0.875 rem
Header 6
Headline sizes
16 px
1 rem
Large Text
14 px
0.875 rem
Medium Text
12 px
0.75 rem
Small Text
General font sizes

Resources

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

72 SHOWCASE

Overview of “72“, SAP’s proprietary typeface.

DESIGN STENCILS

72 is now part of the SAP Fiori Design Stencils.