Skip to content

Typography

Font utilities for the DGA design system. Default font: IBM Plex Sans Arabic.

Source: src/styles/utilities/typography.scss


Display sizes

For headings and hero text. Responsive sizes apply below 768px and 375px.

ClassDesktop sizeLine height
dga-display-2xl72px90px
dga-display-xl60px72px
dga-display-lg48px60px
dga-display-md36px44px
dga-display-sm30px38px
dga-display-xs24px32px
html
<h1 class="dga-display-md dga-fw-bold">Page title</h1>

Text sizes

ClassSizeLine height
dga-text-xl20px30px
dga-text-lg18px28px
dga-text-md16px24px
dga-text-sm14px20px
dga-text-xs12px18px
dga-text-2xs10px14px
html
<p class="dga-text-md">Body text</p>
<p class="dga-text-sm dga-text-gray-600">Secondary text</p>

Font weight

ClassWeight
dga-fw-regular400
dga-fw-medium500
dga-fw-semibold600
dga-fw-bold700
html
<h2 class="dga-text-xl dga-fw-bold">Subheading</h2>

Text alignment

ClassEffect
dga-text-startLogical start (right in RTL)
dga-text-endLogical end (left in RTL)
dga-text-centerCenter
dga-text-leftPhysical left
dga-text-rightPhysical right

Responsive: dga-text-md-center, dga-text-sm-start, etc.

Prefer start / end for RTL. See RTL & Arabic.


Text colors

Combine with color utilities:

html
<p class="dga-text-primary-500">Brand-colored text</p>
<p class="dga-text-gray-700">Neutral text</p>

See Colors.


Common patterns

html
<!-- Page title -->
<h1 class="dga-display-md dga-fw-bold dga-text-gray-950">Dashboard</h1>

<!-- Section heading -->
<h2 class="dga-text-xl dga-fw-semibold">Settings</h2>

<!-- Body -->
<p class="dga-text-md dga-text-gray-700">Section description goes here.</p>

<!-- Caption -->
<span class="dga-text-xs dga-text-gray-500">Last updated: today</span>

MIT Licensed — Wael Alghamdi