Typography

Typeface

To present a unified we recommend using the Dubai font for both the Arabic and English languages.

Dubai Font

Get Font

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.

Type Scale Specification

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.

Class names used in DDS Components

Typography variables

:root {
  /* Font Weights */
  --font-weight-light
  --font-weight-regular
  --font-weight-medium
  --font-weight-bold

  /* Font Sizes */
  --font-display
  --font-h1
  --font-h2
  --font-h3
  --font-h4
  --font-h5
  --font-h6
  --font-body
  --font-caption
  --font-small
  
  --line-height-display
  --line-height-h1
  --line-height-h2
  --line-height-h3
  --line-height-h4
  --line-height-h5
  --line-height-h6
  --line-height-body
  --line-height-caption
  --line-height-small
}

Typography Token System Figma Setup Guide

1. Download and Install a New Font or Select from System Fonts.

2. Go to Local Variables and select the tokens you want to modify.

3. Click the chevron to expand the list of collections in Local Variables.

4. From the expanded list, select the “Typeface” collection.

5. Modify the font name in the token system for Arabic and English. You can select a different font for each language if desired. Verify that the font names are correct by checking them against the system font list.

Best Practices

Hierarchy

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.

Readability

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

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.

Tools to Check Contrast

1. WCAG Checker: Contrast

2. Figma Plugin: Contrast

Key Principles

Typography System Design

To ensure a cohesive, readable, and accessible typographic experience, the following foundational choices were made:

Relative Units

Typography is built using relative units like rem and em instead of fixed px values. This ensures seamless scalability and adaptability across devices.

4px Baseline Grid

All line-heights are set as multiples of 4px, reinforcing a consistent vertical rhythm, predictable spacing, and clean alignment across all text elements.

This approach simplifies layout scaling and enhances visual harmony across breakpoints.

Example:

This image demonstrates how our typographic scale and 4px baseline grid system work together to ensure clarity, hierarchy, and alignment:

Display Text: Font size = 68px Aligned to the baseline grid for strong visual impact and hierarchy.

H6: Font size = 24px A moderate header, scaled using the Minor Third ratio for structured progression.

Body Text: Font size = 16px Designed for optimal readability, especially on smaller screens, while maintaining alignment to the 4px baseline.

Each text style is vertically spaced to land cleanly on the grid, avoiding fractional line-heights or irregular spacing. This ensures visual harmony, predictable layouts, and accessible reading flow across all devices.

Minor Third Scale (1.2× Ratio)

We use a Minor Third scale (approximately a 1.2× multiplier) to define the progression between font sizes. This scale provides a balanced typographic rhythm—more nuanced than a Golden Ratio jump, yet more structured than linear scaling.

All sizes are rounded to whole pixels to ensure crisp rendering and maintain visual consistency across devices and display resolutions.

Mobile Scaling On smaller screens:

Headings and display fonts are proportionally scaled down while maintaining their visual hierarchy.

Body text is never reduced below 14px, even for secondary content, to preserve legibility.

Responsive Font Scaling by Breakpoint

To ensure optimal readability across all devices, our system dynamically adjusts the base font size based on screen width breakpoints. This method enhances legibility while preserving a consistent typographic scale using relative units (rem).

Example Use Case

A heading defined as 2rem will appear as:

28px on Mobile (2rem × 14px)

32px on Tablet/Desktop (2rem × 16px)

36px on Large Desktop (2rem × 18px)

By tying typography to rem units and adjusting the root size per breakpoint, we maintain a fluid and accessible type scale that responds to both layout needs and user readability.