Typography

Font Stack

The KMG Design System uses the Argon Dashboard default font stack:

font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

Heading Sizes

Element Size Weight Line Height
h1 1.75rem (28px) 700 (Bold) 1.2
h2 1.4rem (22.4px) 600 (Semi-bold) 1.3
h3 1.15rem (18.4px) 600 (Semi-bold) 1.4
h4 1rem (16px) 600 (Semi-bold) 1.5
h5 0.875rem (14px) 600 (Semi-bold) 1.5
h6 0.75rem (12px) 700 (Bold) 1.5

Body Text

  • Default size: 0.95rem (15.2px)
  • Line height: 1.7
  • Color: #344767 (Dark)
  • Secondary text: #67748e

Text Utilities

Bold text · Bolder text · Normal text · Light text

Extra small (0.75rem) · Small (0.875rem) · Large (1.125rem) · Extra large (1.25rem)

Uppercase text · LOWERCASE TEXT · capitalized text

<!-- Font weight -->
<span class="font-weight-bold">Bold text</span>
<span class="font-weight-bolder">Bolder text</span>
<span class="font-weight-normal">Normal text</span>
<span class="font-weight-light">Light text</span>

<!-- Font size -->
<span class="text-xs">Extra small (0.75rem)</span>
<span class="text-sm">Small (0.875rem)</span>
<span class="text-lg">Large (1.125rem)</span>
<span class="text-xl">Extra large (1.25rem)</span>

<!-- Text transform -->
<span class="text-uppercase">Uppercase text</span>
<span class="text-lowercase">Lowercase text</span>
<span class="text-capitalize">Capitalized text</span>

Best Practices

  • Use h1 once per page for the main title
  • Use heading hierarchy sequentially (don't skip from h2 to h4)
  • Keep body text at the default size for readability
  • Use text-muted class for supporting text
  • Labels and categories should use text-uppercase text-xs font-weight-bolder opacity-6
On this page