Text-heavy documents, such as end-user licensing agreements (EULA), privacy policies, or terms and conditions are displayed in apps using HTML or other forms of view. To ensure that the content of these rich text documents looks consistent across SAP iOS applications and can be understood by everyone, follow the style and accessibility guidelines below.
Use the following styling elements for end user license agreements (EULA), privacy policies, and terms and conditions.
- A – Heading 1: Document title
- B – Heading 2: Subtitle
- C – Heading 3: Section headlines
- D – Heading 4: Document introduction
- E – Heading 5: Supplementary information
- F – Paragraph / List: Body text
The styling pattern uses multiple heading levels to convey the document structure. People often skim content by scanning the headings, and users of assistive technologies rely heavily on headings to navigate complex content.
Heading elements are used for the title, subtitle, and section headlines, but also for the document introduction and any supplementary information.
- You can use the introduction to explain the purpose of the document and emphasize the importance of the user’s consent.
- Supplementary information is key information you want to make easily accessible, such as the effective date of an agreement.
To style rich text documents consistently, apply the SAP Fiori for iOS typography and color system.
- Font style – SF Pro Display and SF Pro Text
- Font color – Primary Label and Tertiary Label
Style headings and body text as follows:
|Level||Use||Font||Font Color||Font Weight|
|Heading 1||Title||Title 1
SF Pro Display 28pt
|Heading 2||Subtitle||Title 3
SF Pro Display 20pt
|Heading 3||Headline||SF Pro Text 15pt||Primary Label||Bold|
|Heading 4||Introduction||SF Pro Text 14pt||Primary Label||Regular / Bold1)|
|Heading 5||Supplement||SF Pro Text 14pt||Tertiary Label||Regular|
|Paragraph||Body text||SF Pro Text 15pt||Primary Label||Regular|
|List||Body text||SF Pro Text 15pt||Primary Label||Regular|
1) Use bold font if you need to emphasize the content or the importance of the user’s consent.
Style numbered and bulleted lists as follows:
- Numbered list (ordered list): Mark the list items with numbers (1, 2, 3 or 1, 1.1, 1.2) or letters (A, a, Ⅰ, or i).
- Bullet list (unordered list): Mark the list items with bullets. If you need a nested list, use the following bullet formats:
- Level 1: Disc
- Level 2: Circle
- Level 3 and any lower levels: Square
In nested lists, align numbers or bullets with the indented text of the level above.
Use a unique and descriptive text link
Ensure that the text for each hyperlink is unique and clearly describes what is triggered by the link. Users of assistive technologies may not perceive the context of a link.
Add alternative text for images
If the document includes images, add a concise and informative alternative text (alt text). Alt text describes an image for users who are unable to see them, and is also beneficial to sighted users if an image fails to load.