Typography is a critical element in user interface design, directly influencing readability, accessibility, and the overall aesthetic of an application. In the SAP Fiori design system, typography follows carefully defined guidelines to maintain consistency and clarity across enterprise applications. However, some businesses may need to implement custom typography to reflect brand identity or meet specific visual standards. This article explores how to implement custom typography in SAP Fiori while aligning with SAP Fiori Design Guidelines.
Typography in SAP Fiori is not just about choosing a font — it’s about creating a harmonious visual hierarchy that supports efficient task completion and user comfort. The default font used in SAP Fiori applications is "72", SAP’s proprietary typeface designed for optimal readability on screens and consistency across platforms.
sapUiFontHeader1, sapUiFontStandard).Organizations may choose to customize typography in SAP Fiori for the following reasons:
There are several approaches to introducing custom typography into SAP Fiori applications, depending on the technology stack in use.
SAP Theme Designer is the most accessible way to customize typography in a controlled and upgrade-safe manner.
@sapFontFamily).Tip: Ensure that font licenses allow embedding in enterprise systems.
For standalone SAPUI5 applications, typography can be customized directly via custom CSS.
.sapUiBody {
font-family: 'YourCustomFont', Arial, sans-serif;
}
.sapMText, .sapMLabel {
font-size: 16px;
}
Steps:
@font-face in your CSS.To apply custom typography globally across SAP Fiori apps:
sapFontFamily, rather than targeting specific controls.Custom typography in SAP Fiori allows organizations to bring their brand identity into the enterprise UI while still maintaining the usability, consistency, and design integrity championed by SAP. By using tools like SAP Theme Designer and adhering to design best practices, developers and designers can safely implement custom fonts and styles without disrupting the SAP Fiori experience. When done right, typography enhances not only visual appeal but also the overall efficiency and accessibility of enterprise applications.