Skip to content
DGA UI

Typography

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

On this page

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
typography-direction
typography-theme
typography-viewport
Mobile · 375px

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
weights-direction
weights-theme
weights-viewport
Mobile · 375px
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
<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. Arabic diacritics need those line heights, so avoid leading-none on Arabic text.

Responsive modes

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

ModeApplies from
Mobile0px
Tablet768px (md)
Desktop1024px (lg)
Edit this page on GitHub (opens in a new tab)