Typography
Last updated
Last updated
To present a unified we recommend using the Dubai font for both the Arabic and English languages.
Type Scales create a structured and effective visual hierarchy, guiding users through content with clarity and purpose. Each style serves a unique role in presenting information.
We recommend the Minor Third (1.2) type scale.
Font should switch from Default to Large at >=1024px
Default typescale
The default typecale should be used for screen sizes >1024px
Display
57px (3.563 rem)
120%
0
Regular
H1
48px (3 rem)
120%
0
Regular
H2
40px (2.5 rem
120%
0
Regular
H3
33px (2.063 rem)
120%
0
Regular
H4
28px (1.75 rem)
120%
0
Regular
H5
23px (1.438 rem)
120%
0
Regular
H6
19px (1.188 rem)
120%
0
Medium
Body
16px (1 rem)
120%
0
Regular
Caption
13px (0.812 rem)
120%
0
Regular
Label
11px (0.688 rem)
120%
0
Regular
Designers should emphasize clarity and readability by using a balanced type scale to establish a clear visual hierarchy. Instead of relying on color for emphasis, type size and weight should guide users through the content.
Use distinct headline levels (e.g., H1, H2, H3) with progressively smaller sizes as levels deepen. Consistent spacing between text elements reinforces this hierarchy; for example, ensure that headline-to-body spacing is larger than body-to-caption spacing. For optimal readability, apply bold weights to titles and headlines, while keeping body text and labels lighter for balanced visuals.
Ensure that headings follow a proper hierarchical order: H1 first, then H2, followed by H3, etc. This structure enhances accessibility by assisting screen readers and search engines in understanding the content layout, making navigation logical and efficient. Refer to WCAG recommendation.
For optimal readability and visual consistency, avoid altering line height to maintain proper vertical spacing and alignment. Limit line length to 80 characters or fewer, enhancing readability while allowing for occasional exceptions. Use left alignment or centering as standard practice, reserving right alignment for Arabic text. Adjust font weights strategically to create emphasis and establish a clear content hierarchy. Ensure letter spacing remains consistent across products, with body text spacing and minor increases applied to larger headlines to improve clarity without overcrowding. Refer to WCAG.
Contrast Ratios: Text should have a minimum contrast ratio of 4.5:1 against its background for regular text and 3:1 for large text (over 24px or bold text above 19px).
Accessible Color Choices: Ensure text on colored backgrounds meets appropriate contrast ratios, verified through a contrast checker.
Interactive Elements: Buttons, links, and other interactive elements should meet contrast standards and provide visual feedback on focus and hover states.
The W3C's Web Content Accessibility Guidelines (WCAG) 2.1 include Success Criterion 1.4.12, which focuses on text spacing to enhance readability for users with visual or cognitive disabilities. This criterion ensures that content remains functional and readable when users adjust text spacing. The key requirements are:
Line Height (Line Spacing): At least 1.5 times the font size.
Spacing After Paragraphs: At least 2 times the font size.
Letter Spacing (Tracking): At least 0.12 times the font size.
Word Spacing: At least 0.16 times the font size.
Authors are not required to set these exact spacings but must ensure that their content can adapt to these settings without loss of content or functionality. This adaptability allows users to modify text spacing according to their needs, improving their reading experience.
Responsive Typography: To ensure scalability across different screen sizes, use relative units like rem or em rather than fixed px units for a seamless, adaptive experience.
Mobile Scaling: For smaller screens, use appropriately scaled-down versions of display or headline fonts while maintaining legibility. Avoid reducing body text below 14px for secondary content to ensure readability on mobile devices.
The recommended typeface may be substituted with an alternative that better aligns with the reader's established brand identity, if deemed necessary. This adjustment should be made with careful consideration to maintain consistency with the intended tone and legibility standards outlined in these guidelines and the Web Content Accessibility Guidelines.
