Typography

The Sharjah Design System provides consistent typographic standards to create accessible, balanced, and engaging interfaces.

Typography in the Sharjah Design System ensures that text is clear, readable, and visually consistent across all digital services. By defining specific typefaces, sizes, weights, and spacing rules, we help teams create content that is easy to scan and understand, supports user goals, and strengthens overall brand consistency.

Principles

Typeface Selection

Carefully selected typefaces ensure readability, performance, and seamless support for both Arabic and English across all devices.

Font Scale & Hierarchy

A clear typographic scale defines hierarchy for headings and body text, helping users scan and understand content easily.

Responsive Typography

Font sizes and spacing adapt across screen sizes to maintain clarity and balance on all devices.

Text Spacing & Readability

Consistent line height and spacing improve readability and reduce visual clutter in longer content.

Typefaces

Arabic

Noto Kufi Arabic

9 font weights, 15 font sizes

Primary Arabic font

Alexandria

9 font weights, 15 font sizes

Secondary Arabic font

English

Inter

9 font weights, 15 font sizes

Primary English font

Roboto

9 font weights, 15 font sizes

Secondary English font

Font Sizes

Text type Weight Font size Line height Global design token
H1 Bold 60px 56px text-6xl
H2 Semi-Bold 48px 56px text-5xl
H3 Medium 36px 56px text-4xl
H4 Regular 30px 36px text-3xl
H5 Regular 24px 32px text-2xl
H6 Regular 18px 28px text-lg
Body 3XL Regular 30px 56px text-3xl
Body 2XL Regular 24px 32px text-2xl
Body XL Regular 20px 28px text-xl
Body LG Regular 18px 26px text-lg
Body Base Regular 16px 24px text-base
Body SM Regular 14px 20px text-sm
Body XS Regular 12px 18px text-xs
Body XXS Regular 8px 16px text-xxs