Typography is a fundamental aspect of any user interface design, shaping how information is presented, perceived, and understood by users. In SAP Fiori, typography plays a crucial role in creating clear, readable, and visually appealing applications that enhance the overall user experience. This article introduces the basics of SAP Fiori typography within the context of SAP Fiori Design Guidelines.
SAP Fiori applications are designed to be intuitive, efficient, and user-friendly. Typography contributes directly to these goals by:
Correct use of typography reduces cognitive load, helping users quickly find and process information essential to their roles.
SAP Fiori’s typography guidelines are aligned with modern design standards and tailored to SAP’s enterprise context. The main principles include:
SAP Fiori uses the 72 typeface, a custom SAP font designed to provide high legibility and a clean, modern look across devices and screen resolutions. The font supports multiple weights and styles to create clear distinctions between headings, body text, and UI elements.
Typography in SAP Fiori follows a hierarchical structure, helping users understand the importance of different content elements at a glance. This hierarchy is created through varying:
SAP Fiori guidelines specify standardized font sizes and weights for various UI elements such as:
Consistent application of these specifications ensures a uniform look and feel across all Fiori apps, fostering familiarity and reducing user confusion.
Since SAP Fiori apps are responsive, typography must maintain readability on both large desktop screens and small mobile devices. This requires adaptive font sizing and line spacing to ensure text remains legible without overwhelming the interface.
Typography must support accessibility standards by:
SAP Fiori typography guidelines emphasize accessibility to make apps usable for a broad range of users.
| UI Element | Font Size (px) | Font Weight | Description |
|---|---|---|---|
| Page Title | 32 | Bold | Main screen heading |
| Section Heading | 20 | Semibold | Subsections and grouping |
| Labels | 14 | Semibold | Field names and UI labels |
| Body Text | 14 | Regular | General content and descriptions |
| Captions | 12 | Regular | Secondary or helper text |
(Note: Exact values may vary slightly depending on SAP Fiori theme and updates.)
Typography is more than just choosing fonts; it’s about structuring and presenting text in a way that enhances user understanding and interaction. SAP Fiori’s typography guidelines provide clear standards to ensure that enterprise applications are not only functional but also visually clear and accessible.
Mastering the basics of SAP Fiori typography is essential for designers, developers, and UX professionals aiming to create effective SAP Fiori apps that delight users and improve productivity.