Typography

Typography guidelines ensure that legibility is maximised through consistent application of typeface, size, weight, etc. They help maintain a clean flow across the website by assigning specific functional roles to the different typography styles listed here.

Typefaces

Keeping personality, performance, and legibility in mind, the use of a font that is powered by Google Fonts has been chosen for the design system. The use of these typefaces allows a website to load faster, as the servers will automatically send the smallest possible file to every user based on the technologies that their browser supports.

body {
	font-family: "Roboto", -apple-system, BlinkMacSystemFont, 
				'Segoe UI', 'Ubuntu', 'Fira Sans', 
				'Helvetica Neue', sans-serif;
}

body {
	font-family: "Noto Kufi Arabic", sans-serif;
}

Font size

When it comes to communication, type and text provide essential cues that should never be overlooked. As one of the core elements in presenting information, typography has an immense impact on how messages are interpreted.

The type scale is a combination of 12 sizes that are supported by the Design System.

Content

The typography system has 7 text sizes for maximum readability and accessibility. We recommend a minimum of 16px, unless the context necessitates less. Refer to responsive typography for more details.

Responsive typography

The typography system is built on the concept of using a responsive typography size, which improves readability and adapts the font size to the screen size on smaller or large devices.

On smaller screens, headings are resized dynamically based on the viewport size. The easiest way to do this is to follow the One-step decrease rule. Use the following scheme to apply font changes for headings, using the example of the ` <h1>` tag:

To highlight this, we used the same code used to generate the content in the font size example above.

<h1 class="text-h3 lg:text-h2 xl:text-h1 leading-tight">
Visit the UAE's unified digital platform
</h1>
<!-- the use of the leading-tight (line height) 
for headings is open based on your design needs -->

You can make changes to the font size as long as it doesn't go below 1 rem as a base font size, unless necessary. Hence, it is important to consider increasing the size of your base font when designing and developing websites for larger screens.

Always aim to create accessibility towards reading conditions. A visitor viewing the website on a mobile device is holding a device in their hand and is most likely reading or interacting with the digital asset, away from their workspace.

Similarly, test the digital asset on a standard screen, which is typically below 1536 px in size, and also on a large screen, where the screen size can range from 1536 px and above, all the way to 2500 px. Refer to the grid system for more on this.

The font weight

A font weight allows you to add emphasis and differentiate specific pieces of text. On a general level, and for optimal performance, the digital asset has to follow only 3 weights as a pattern.

However, creative design and certain elements may need to introduce 2 more weights. It is therefore recommended to limit the total font weights in a given web page to 5. It is also recommended not to load a font weight into a website when it is not required.

The font-size table states to use heavy weights (bold and black) for headings and titles, as these weights grab attention. Use neutral weights (regular and medium) for body and long texts to help users read easily.

Headings

All heading tags are pre-configured to use ` font-extrabold `, which is why it is advised not to use different font weights in headings except based on the design pattern. It is also recommended to use ` font-extralight ` for the H1 Display heading.

Content

Use the regular and neutral font weights as the default for your website content. Hence, ` font-normal `, which relates to the weight of 400 is considered as regular on all font types.

To provide emphasis on certain parts of the content, you may need to use bold, which is also considered acceptable. You may also choose to apply a ` font-semibold ` to content that uses a larger font size.

Text spacing

Line height should be an important factor to consider while designing content. The font family and size you use will ideally determine the line height.

Body content spacing

For the design system, the body font is Roboto for English with a base size of 16 px. This means using a minimum value of 1.5 for line-height for the main paragraph content. This will help people experiencing low vision conditions, as well as people with cognitive concerns such as Dyslexia.

Understanding Success Criterion 1.4.12 states that the line height must indeed be 1.5x and the margin after the paragraph must be 2x, word spacing to be at least 0.16 times, and letter spacing should be 0.12 of the font size.

The Roboto and Noto Kufi Arabic typefaces is compatible with the letter and word spacing by default. You must, however, make sure that line height and margin after a paragraph is followed. The design system pre-configures line height for content text, but expects paragraph margin to be added manually.

An accurate representation of line height and margin after a paragraph to be used within the content on your website is as follows:

Heading spacing

Headlines or Headings (those that are identified by the HTML <h1> ... <h6> tags) use a different typeface and line height for these are determined by the designed element.

The <h1> to <h4> follows a font size that is much larger in size and bold. For this purpose, you may use a line height that is less than the 1.5x rule. Using a tighter line height is acceptable.

In fact, use a line height in a reducing manner. The larger the font size, the lesser you may apply a line height value, but never less than 1rem.

Block spacing

Block spacing refers to the spacing between text blocks on your website. Leaving enough white space between text blocks, through adjusting the margins and padding, helps provide a better aesthetic look and, of course, more digestible content.

It is also important to manage your margins and padding responsively and reducing them on different breakpoints when required. This provides more flexibility to the layout across your website's sections. You can read about this in detail in Approach on Responsive Web Design.

Line length

Readability is an important factor to consider when writing content. While line lengths are subjective and differ depending on the context, we recommend keeping line lengths 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 NOT 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.

Hence, if your body font size is ` BASE (16 px) ` and you would like to add content as a set of 4 paragraphs, your ideal content container width should be ` 745 px ` if your website container is ` 1240 px ` - essentialy, your content must be within 60% of the container width. This will place each line in the range of 60 to 100 characters.

Hierarchy

This section is very important, and this is where the content style comes together with typography. Using size, weight, colour, and alignment, typographic hierarchy establishes a priority order that allows the user to navigate seamlessly through content.