Typography

Type scale and styles for consistent text hierarchy.

Font Family

System font stack for optimal performance across all devices. Natively.

--sw-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

Type Scale

Heading XL28px / text-5xl

Heading L24px / text-4xl

Heading M20px / text-3xl

Heading S18px / text-2xl

Large Text16px / text-xl

Body Large15px / text-lg

Body Default14px / text-md

Body Small13px / text-base

Caption12px / text-sm

Label11px / text-xs

Font Weights

Regular weight400 / normal

Medium weight500 / medium

Semibold weight600 / semibold

Bold weight700 / bold

Usage

.heading {
  font-size: var(--sw-text-4xl);
  font-weight: var(--sw-font-semibold);
  line-height: var(--sw-leading-tight);
}

.body {
  font-size: var(--sw-text-md);
  line-height: var(--sw-leading-relaxed);
}