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.

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.

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.

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.

Basic

Principles

Do

Create hierarchy

A good structure helps us to present important information clearly and users to find relevant information easily.

Don't

Use different fonts

Sticking to a single font is ideal for overall consistency in tone of voice, and legibility.

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.

Text formatting

Text formatting can be used to visually add clarity and adjust voice or meaning.

Do

Left align

Exceptions include Arabic.

Don't

Don’t use bold format when editing your content

Use the correct assigned font weight from the font size table instead.

Don't

Justify text

Never justify text in either English or Arabic language as it slows down the reading speed by users.

Don't

Use underline for text

Underlined text is reserved for links and buttons.

Don't

Use indentation

Paragraphs indented with word spaces or tabs are hard to keep consistent. Use spacing to separate paragraphs.

Application guidelines

Don't add drop shadows

Don't use low contrast ratio (<1:5)

Don't use low contrast text colour 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.

With a font size of 16px you can consider the maximum allowed width as a 768px container (Be careful, other sizes can't use this guideline).

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.

Capitalisation

Spacing

Spacing on the web does not work the same as spacing on print.

The content is placed centrally within the line, reserving additional space around the edges.

Line heights

Use with caution

Line heights may need adapting.

Line heights will need adapting between font size, quantity of text and print/web.

Do

Optimise line height

Make sure the line height is legible for each screen size and font size.

Don't

Make the line spacing too tight or too loose

Stay below 20% of tolerance from the optimal values.

Block spacing

Text breathes too! Create enough white space between text blocks for better aesthetics and more digestible content - Remember the line height of the text reserves additional pixels!