Typography System
Typography guidelines ensure that legibility is maximised through consistent application of fonts, font size, colours, etc. These guidelines will also help maintain clean content flow across the website by assigning specific functional roles to the different typography styles listed here.
Typefaces
Keeping personality, performance and legibility in mind, a Google font has been selected for English (Roboto) and currently, the most used font for Arabic (Droid Arabic Kufi). Selecting these typefaces allows the websites to load faster as the servers will automatically send the smallest possible file to every user based on the technologies that their browser supports.
Personality
Universal,
Minimal,
Balance.
English
Roboto
5 weights
Ee
Aa
Arabic
Droid Arabic Kufi
2 weights
الف
عین
Copy to Code
< html class='font-latin'>
< html class='font-arabic'>
Font Stack
If primary typefaces fail to load, the following operating system typefaces get triggered by the server. In order to maintain consistency, ensure to communicate the following fallback fonts that the server should generate.
Ae
SF Pro Display
Apple DevicesAe
Arial
Windows DevicesAe
Ubuntu
Linux MachinesApple devices will display San Francisco Devices running Windows will display Arial Machines running Linux will display the default sans-serif font for any running distribution
Font Sizes
Once you receive your content, start creating a clear hierarchy with the help of different sizes. If you need to emphasize something further, then work with the font-weight and text colour.
Heading
We strive to be a leading organization
Hero Display
font-size: 80px
line-height: 96px
font-weight: 700-900
We strive to be a leading organization
Display Large
font-size: 56px
line-height: 64px
font-weight: 700-900
We strive to be a leading organization
Display Medium
font-size: 40px
line-height: 48px
font-weight: 500-700
We strive to be a leading organization
Display Small
font-size: 30px
line-height: 36px
font-weight: 700-900
نحن نسعى جاهدين لنكون مؤسسة رائدة
Hero Display
font-size: 80px
line-height: 96px
font-weight: 700-900
نحن نسعى جاهدين لنكون مؤسسة رائدة
Display Large
font-size: 56px
line-height: 64px
font-weight: 700-900
نحن نسعى جاهدين لنكون مؤسسة رائدة
Display Medium
font-size: 40px
line-height: 48px
font-weight: 500-700
نحن نسعى جاهدين لنكون مؤسسة رائدة
Display Small
font-size: 30px
line-height: 36px
font-weight: 700-900
Body
Ensure the provision of telecommunications services throughout the country to meet the needs of those who wish to make use of such services
Body Large
font-size: 24px
line-height: 36px
font-weight: 400-500-600
Ensure the provision of telecommunications services throughout the country to meet the needs of those who wish to make use of such services
Body Medium
font-size: 20px
line-height: 30px
font-weight: 400-500
Ensure the provision of telecommunications services throughout the country to meet the needs of those who wish to make use of such services
Body Small
font-size: 18px
line-height: 28px
font-weight: 400
Ensure the provision of telecommunications services throughout the country to meet the needs of those who wish to make use of such services
Display Small
font-size: 30px
line-height: 36px
font-weight: 700-900
ضمان توفير خدمات الاتصالات السلكية واللاسلكية في جميع أنحاء الدولة لتلبية احتياجات أولئك الذين يرغبون في الاستفادة من هذه الخدمات
Body Large
font-size: 24px
line-height: 36px
font-weight: 400-500-600
ضمان توفير خدمات الاتصالات السلكية واللاسلكية في جميع أنحاء الدولة لتلبية احتياجات أولئك الذين يرغبون في الاستفادة من هذه الخدمات
Body Medium
font-size: 20px
line-height: 30px
font-weight: 400-500
ضمان توفير خدمات الاتصالات السلكية واللاسلكية في جميع أنحاء الدولة لتلبية احتياجات أولئك الذين يرغبون في الاستفادة من هذه الخدمات
Body Small
font-size: 18px
line-height: 28px
font-weight: 400
ضمان توفير خدمات الاتصالات السلكية واللاسلكية في جميع أنحاء الدولة لتلبية احتياجات أولئك الذين يرغبون في الاستفادة من هذه الخدمات
Display Small
font-size: 30px
line-height: 36px
font-weight: 700-900
Implementation
By default, UAE Design System provides 10 font-size utilities and you change, add, or remove these by editing the theme.fontSize section of your UAE DS config.
// UAE-DesignSystem.config.js
module.exports = {
theme: {
fontSize: {
'xs': '.75rem',
'sm': '.875rem',
'tiny': '.875rem',
'base': '1rem',
'lg': '1.125rem',
'xl': '1.25rem',
'2xl': '1.5rem',
'3xl': '1.875rem',
'4xl': '2.25rem',
'5xl': '3rem',
'6xl': '4rem',
'7xl': '5rem',
}
}
}
Font Weights
Font Weights allows you to add emphasis and differentiate specific pieces of text. For optimal performance, it’s recommended to limit the variations to 4-5. For clean consistency, it’s essential to make sure the weights visually match from Arabic to English.
| Roboto | Droid Arabic Kufi | Weight | |
|---|---|---|---|
Leading Organization |
- | 300 |
Light |
Leading Organization |
المنظمة الرائدة |
400 |
Regular |
Leading Organization |
- | 500 |
Medium |
Leading Organization |
المنظمة الرائدة |
700 | Bold |
Leading Organization |
- | 900 | Black |
Implementation
By default, UAE Design System provides 7 (5 for English and 2 for Arabic) font-weight utilities.
// UAE-DesignSystem.config.js
module.exports = {
theme: {
fontWeight: {
hairline: 100,
'extra-light': 100,
thin: 200,
light: 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800,
'extra-bold': 800,
black: 900,
}
}
}
How to use Weights
The Font Size table states to use heavy weights (bold and black) for heading and titles as these weights grab attention. Use neutral weights (light and regular) for body and long texts to help users read easily.
Do
Use heavy weights for heading and short-important titles
Bold
Corporate Values
Quality Standards
Making The United Arab Emirates a global leading country in ICT
Do
Use light weights for body and helper titles
Medium
Regular
Corporate Values
Quality Standards
In line with the UAEʼs Telecommunication Law and its executive regulations, the objectives of the TDRA include ensuring adequate provision of telecommunication services throughout the country, developing service quality and variety and adhering to license terms whilst making sure service quality is maintained.
Typographic
Hierarchy
This is when it all comes together. Using size, weight, colour and alignment, typographic hierarchy establishes a priority order that allows the user to navigate seamlessly through the content.
Display Large
font-size: 56px
line-height: 64px
font-weight: 600
Sustainability as a work culture
Body Large
font-size: 24px
line-height: 32px
font-weight: 400
Sustainability is a part of our ethics and corporate culture as we work tirelessly to ensure our work environment supports growth and happiness.
Body Small
font-size: 16px
line-height: 22px
font-weight: 400
In line with the UAEʼs Telecommunication Law and its executive regulations, the objectives of the TDRA include ensuring adequate provision of telecommunication services throughout the country, developing service quality and variety and adhering to license terms whilst making sure service quality is maintained.
Application
How to use the Type System
Learn about each scale size and its application.
Hero Display
Use for Headers, Important Section Titles Important Section Titles
Display Large & Medium
Use for Section titles, Card titles
Display Small
Use for Card titles, Tables, Data Visualization. Low priority and small titles.
Body Large & Medium
Use for high priority, medium length paragraphs.
Body Small
Use for long paragraphs, Card descriptions. Low priority content.
Basic
Principles
Do
Create Hierarchy
A good structure helps us to present important information clearly and users to find relevant information easily.
Corporate Values
Quality Standards
Making The United Arab Emirates a global leading country in ICT
Don't
Use different fonts
Sticking to a single font is ideal for overall consistency in tone of voice, and legibility.
OUR VISION
Making The United Arab Emirates a global leading country in Information and Communications Technology
Don't
Pair high contrast text sizes
Keep the pairing sizes logical and avoid using a very large hero display text next to a very small body text.
OUR VISION
Making The United Arab Emirates a global leading country in Information and Communications Technology
Text Formatting
Text formatting can be used to visually add clarity and adjust voice or meaning.
Do
Left Align
Exceptions include Arabic and centered text
Quality Standards
Making The United Arab Emirates a global leading country in Information and Communications Technology
Don't
Donʼt use bold format when editing your content
Use the correct assigned font weight from the font size table instead.
Develop the level of service
Provided by the telecommunications sector in order to achieve the interests of subscribers
Don't
Justify text
Never justify texts (nor left aligned neither center aligned) in both English and Arabic language as it slows down the reading speed by users.
Regulating the telecommunications
This vital role is derived from the UAE Telecommunication law and its Executive Regulation. The objectives of TDRA in this context include: ensuring adequate provision of telecommunications services throughout the UAE; developing services in terms of quality of services by adherence to terms of licensees.
Don't
Use underline for text
Underline text is reserved for hyperlinks and text buttons.
Don't
Use Indentation
Paragraphs indented with word spaces or tabs are hard to keep consistent.Use spacing to separate paragraphs.
OUR VISION
Making The United Arab Emirates a global leading country in Information and Communications Technology
Application Guidance
Cutting-edgeTechnology
Don't add drop shadow
Enabling government entities
Don't use low contrast ratio (<1:5)
Beyond the Planet
Don’t use low contrast text colours on images
Line Length
Readability is an important factor to consider when writing content. While line lengths are subjective and differ depending on context, we recommend keeping line length between 60 and 100 characters with acceptable spacing. Setting this precedent will help writers outline the content in a simple manner that will make the end-user experience more positive.
Readers may also have control over the layout width; meaning that a line length cannot always be specified. So it’s good practice to design for an ideal line length, and use responsive design techniques to anticipate different contexts.
Too Narrow
This vital role is derived from the UAE Telecommunication law and its Executive Regulation. The objectives of the TDRA in this context include: ensuring adequate provision of telecommunications services throughout the UAE; developing services in terms of quality and variety
Optimal Range
This vital role is derived from the UAE Telecommunication law and its Executive Regulation. The objectives of the TDRA in this context include: ensuring adequate provision of telecommunications services throughout the UAE; developing services in terms of quality and variety
Optimal Range
This vital role is derived from the UAE Telecommunication law and its Executive Regulation. The objectives of the TDRA in this context include: ensuring adequate provision of telecommunications services throughout the UAE; developing services in terms of quality and variety
Optimal Range
This vital role is derived from the UAE Telecommunication law and its Executive Regulation. The objectives of the TDRA in this context include: ensuring adequate provision of telecommunications services throughout the UAE; developing services in terms of quality and variety
Too wide
This vital role is derived from the UAE Telecommunication law and its Executive Regulation. The objectives of the TDRA in this context include: ensuring adequate provision of telecommunications services throughout the UAE; developing services in terms of quality and variety
In body small size (16px) you can consider the maximum allowed width as a 768px container (Be careful, other sizes can't use this guideline).
This vital role is derived from the UAE Telecommunication law and its Executive Regulation. The objectives of the TDRA in this context include: ensuring adequate provision of telecommunications services throughout the UAE; developing services in terms of quality and variety
768 px
Text Colours
The minimum contrast ratio between text and the background is 4:1, avoid going for lower contrast and always work with higher contrast for better accessibility.
White on Black
#FFFFFF
#000000
Contrast ratio:
21:1
Black text on white background contrast is 21:1 (highest contrast ratio). Use high contrast ratio (higher than 15 for most of the text in your layout.
See more information colours application in Colour System.
Black on White
#000000
#FFFFFF
Contrast ratio:
21:1
White on black has the same contrast ratio (21:1), but it's better to avoid it when working on dark theme as it creates eye strain. Choose slightly lighter background and darker text colour to prevent this.
Learn more about dark mode in Templaes.
Larger texts (like Hero Display) can use lower contrast (at least 4:1 while smaller texts (like captions) require higher ratio (at least 7:1) to stay accessible.
UAE Gold 50 on White
#B68A35
#FFFFFF
Contrast ratio:
3.14:1
White on UAE Gold 60
#FFFFFF
#99742D
Contrast ratio:
4.29:1
UAE Black 100 on 10
#1B1D21
#ECECEC
Contrast ratio:
14.8:1
UAE Gold 70 on White
#7C5E24
#FFFFFF
Contrast ratio:
6.02:1
Only large text pass
Based on the contrast ratio, this colour can't be used for small text.
Only large text pass
All Pass
All pass except very small text
Do
Use colour for helper text or cards
You can use color for small-helper text and titles in the cards as long as the number of elements are limited (less than 5).
Our Vision
Quality Standards
And to the terms and conditions stipulated in the licenses granted to them
Use with Caution
Minimize the colour usage for titles
Quality Standards
We strive to improve our customers happiness through our commitment to the continuous improvement and development of the quality of our services
Don't
Use colour for body text
OUR VISION
Making The United Arab Emirates a global leading country in Information and Communications Technology
Capitalization
Use capitalized words in places where user attention is important:
Use for
Most Important Messages
You can use capitalized words for the most important message on the layout
Quality Standards
And to the terms and conditions stipulated in the licenses granted to them
Use for
Short Titles
You can use uppercase words for short titles
INTERNET & E-COMMERCE
INFORMATION SECURITY
Don't
Use uppercase for lines longer than 3 words and paragraphs
It makes reading difficult by impacting the space between the letters
OUR VISION IS CUSTOMER HAPPINESS
MAKING THE UNITED ARAB EMIRATES A GLOBAL LEADING COUNTRY IN INFORMATION AND COMMUNICATIONS TECHNOLOGY
See more information in Tone of voice.
Spacing
Line Spacing
Use for
Optimal Line Height
Use values from the type table for each font size
Body Small
font-size: 16px
line-height: 22px
font-weight: 400
Quality Standards
And to the terms and conditions stipulated in the licenses granted to them
Want to play with the line height to match your overall design? You can add or reduce the line height by a maximum of 20% to stay in the digestible range but keep this in mind; that it can only used for rare occasions.
Use with Caution
Playing with line spacing
Stay below 20% of tolerance from the optimal values
Body Small
font-size: 16px
line-height: 22px
font-weight: 400
We strive to improve our customers
Don't
Make the line spacing too tight or too loose
Stay below 20% of tolerance from the optimal values
Body Small
font-size: 16px
line-height: 22px
font-weight: 400
We strive to improve our customers
happiness through our commitment to the
continuous improvement and development of the quality of our services
Block Spacing
Text breathes too! Create enough white space between text blocks for better aesthetics and more digestible content.
Corporate Values
Customer happiness
We strive to improve our customers
We strive to improve our customers
Corporate Values
Customer happiness
We strive to improve our customers
We strive to improve our customers
Do
Add space between text blocks
Don't
Use small block spacing for the text blocks
Summary
Stick to the font size, weight tables
Create hierarchy based on the content priority
Use proper spacing