Typography

The Typography section provides comprehensive guidelines on the fonts and text styles used across the design system. Typography plays a crucial role in ensuring readability, visual hierarchy, and maintaining a consistent look and feel in the design.

Fonts Used

These colors are responsible for managing the appearance and transitions between light and dark modes.

Font Definitions

SCSS definitions for Arabic and English fonts, ensuring consistent styling across all text elements.

                  
 _typography.scss
                    Copy
                  
@font-face {
    font-family: "HacenMaghreb";
   src: url("../font/ar/HacenMaghreb.eot");
        src: url("../font/ar/HacenMaghreb.eot?#iefix") format("embedded-opentype"),
        url("../font/ar/HacenMaghreb.woff2") format("woff2"),
        url("../font/ar/HacenMaghreb.woff") format("woff"),
        url("../font/ar/HacenMaghreb.svg#HacenMaghreb") format("svg");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "HacenMaghreb";
    src: url("font/ar/HacenMaghrebBd.eot");
    src: url("../font/ar/HacenMaghrebBd.eot");
    src: url("../font/ar/HacenMaghrebBd.eot?#iefix") format("embedded-opentype"),
        url("../font/ar/HacenMaghrebBd.woff2") format("woff2"),
        url("../font/ar/HacenMaghrebBd.woff") format("woff"),
        url("../font/ar/HacenMaghrebBd.svg#HacenMaghrebBd") format("svg");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "HacenMaghreb";
    src: url("../font/ar/HacenMaghrebLt.eot");
    src: url("../font/ar/HacenMaghrebLt.eot?#iefix") format("embedded-opentype"),
        url("../font/ar/HacenMaghrebLt.woff2") format("woff2"),
        url("../font/ar/HacenMaghrebLt.woff") format("woff"),
        url("../font/ar/HacenMaghrebLt.svg#HacenMaghrebLt") format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

DM Sans

Imported from Google Fonts to handle English content with a modern sans-serif style.

                  
 CSS
                    Copy
                  
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

Font Configuration

SCSS definitions for Arabic and English fonts, ensuring consistent styling across all text elements.

                  
 CSS
                    Copy
                  
:root {
    --tt-heading-font: 'HacenMaghreb'; /* Arabic Heading Font */
    --tt-text-font: var(--tt-heading-font); /* Arabic Text Font */
    --tt-en-heading-font: 'DM Sans'; /* English Heading Font */
    --tt-en-text-font: var(--tt-en-heading-font); /* English Text Font */
    --tt-fw-regular: 400; /* Regular Font Weight */
    --tt-fw-medium: 500; /* Medium Font Weight */
    --tt-fw-bold: 700; /* Bold Font Weight */
}

Display Text Sizes

The %text-display- placeholders define consistent styles for large-scale text elements, such as banners and headings. Each variation, such as %text-display- lg, md, sm, xs, xxs adjusts only the font size and line height while maintaining consistent font family and weight.

The %text-en-display- styles mirror the Arabic display styles, with the only difference being line-height: normal for English.

Heading Text Styles

The %text-heading- placeholders define consistent styles for headings used in titles and subtitles. Each variation, such as %text-heading- lg, md, sm, xs adjusts only the font size and line height while maintaining consistent font family and weight.

The %text-en-heading- styles mirror the Arabic heading styles, with the only difference being line-height: normal for English.

Label Text Styles

The %text-label- placeholders define consistent styles for labels used in forms or supporting text. Each variation, such as %text-label- lg, md, sm, xs, xxs, xxxs adjusts only the font size and line height while maintaining consistent font family and weight.

The %text-en-label- styles mirror the Arabic label styles, with the only difference being line-height: normal for English.

Body Text Styles

The %text-body- placeholders define consistent styles for paragraphs and general text elements. Each variation, such as %text-body- lg, md, sm, xs, xxs adjusts only the font size and line height while maintaining consistent font family and weight.

The %text-en-body-styles mirror the Arabic body styles, with the only difference being line-height: normal for English.

Multilingual Text Styling

The .text-english and .text-arabic classes are essential for creating a seamless multilingual experience in the design system. These classes ensure the appropriate fonts are applied to English and Arabic content, maintaining readability and visual consistency.

                  
 CSS
                    Copy
                  
.text-english {
  font-family: var(--tt-en-text-font), sans-serif;
}

.text-arabic {
  font-family: var(--tt-text-font), sans-serif;
}

Last updated 3 months ago

• Colour System