Skip to content
Platform Codeالعربية

Typography

IBM Plex Sans Arabic, the DGA type scale and its responsive modes.

Version 0.2.0 ·

DGA uses IBM Plex Sans Arabic for Arabic and Latin text, in four weights. dga-style loads it with next/font (Arabic and Latin subsets) and exposes it as font-sans.

Type scale
Direction
Theme
Viewport

Switch the viewport: display sizes follow the Figma Desktop, Tablet and Mobile modes.

Scale

Utility:text-display-2xlFigma style:Display 2xlDesktop:72px / 90pxTablet:56px / 72pxMobile:48px / 64pxLetter spacing:-2%
Utility:text-display-xlFigma style:Display xlDesktop:60px / 72pxTablet:48px / 64pxMobile:40px / 56pxLetter spacing:-2%
Utility:text-display-lgFigma style:Display lgDesktop:48px / 60pxTablet:36px / 48pxMobile:32px / 40pxLetter spacing:-2%
Utility:text-display-mdFigma style:Display mdDesktop:36px / 44pxTablet:30px / 40pxMobile:24px / 32pxLetter spacing:-2%
Utility:text-display-smFigma style:Display smDesktop:30px / 38pxTablet:24px / 32pxMobile:20px / 28pxLetter spacing:0%
Utility:text-display-xsFigma style:Display xsDesktop:24px / 32pxTablet:20px / 28pxMobile:18px / 24pxLetter spacing:0%
Utility:text-xlFigma style:Text xlDesktop:20px / 30pxTablet:20px / 30pxMobile:20px / 30pxLetter spacing:0%
Utility:text-lgFigma style:Text lgDesktop:18px / 28pxTablet:18px / 28pxMobile:18px / 28pxLetter spacing:0%
Utility:text-mdFigma style:Text mdDesktop:16px / 24pxTablet:16px / 24pxMobile:16px / 24pxLetter spacing:0%
Utility:text-smFigma style:Text smDesktop:14px / 20pxTablet:14px / 20pxMobile:14px / 20pxLetter spacing:0%
Utility:text-xsFigma style:Text xsDesktop:12px / 18pxTablet:12px / 18pxMobile:12px / 18pxLetter spacing:0%
Utility:text-2xsFigma style:Text 2xsDesktop:10px / 14pxTablet:10px / 14pxMobile:10px / 14pxLetter spacing:0%

Body sizes (text-xl to text-2xs) keep their desktop values on every viewport. Figma's Mobile mode shrinks text-md to 12px and text-xs to 8px, which is too small to read; see Deviations. Display sizes md and larger use -2% letter spacing, as in Figma.

Weights

Weights
Direction
Theme
Viewport
Token:--font-weight-boldValue:BoldUtility:font-bold
Token:--font-weight-semiboldValue:SemiboldUtility:font-semibold
Token:--font-weight-mediumValue:MediumUtility:font-medium
Token:--font-weight-regularValue:RegularUtility:font-regular (font-normal)

Figma also lists italic styles. IBM Plex Sans Arabic has no italic, so those tokens are not emitted.

Usage

page.tsx
tsx
<h1 className="text-display-lg font-bold text-display">…</h1>
<p className="text-md text-primary-paragraph">…</p>
<span className="text-sm text-secondary-paragraph">…</span>

Each text-* size sets its line height too. For Arabic text, raise it as described under Arabic text, and never use leading-none.

Responsive modes

The type tokens change at these widths (mobile-first):

ModeApplies from
Mobile0px
Tablet768px (md)
Desktop1024px (lg)

Arabic text

Arabic needs four settings that Latin text does not. The docs site applies all four on every Arabic page; copy them into your own project.

globals.css
css
:lang(ar) { line-height: 1.8; }
:lang(ar) :where(h1, h2, h3, h4) { line-height: 1.5; }
:lang(ar), :lang(ar) * { letter-spacing: 0; }
  • Font. IBM Plex Sans Arabic for Arabic and Latin, so a line that mixes both keeps one voice.
  • Line height. 1.8 for body text and 1.35 to 1.5 for headings. The marks above and below Arabic letters need more room than the token line heights (1.4 to 1.6) give, which is why leading-none is never used on Arabic text.
  • No letter spacing. Negative tracking, including the -2% on display sizes, breaks the joins between letters. Set it to 0 in Arabic, and for any tracking-* utility.
  • Numerals. Western digits (0 to 9) in prose and in every technical value (versions, ratios, sizes, counts, dates). Arabic-Indic digits (٠ to ٩) only in sample content that imitates a citizen-facing service, such as the national address card on the home page. Never mix the two systems inside one view. This is a Platform Code convention, not a DGA rule.