Skip to main content

Typography

Typography base tokens serve as the foundation for creating consistent and scalable typography mixins. These tokens encapsulate the essential attributes that define text styles, ensuring harmony and flexibility across the design system.

By standardizing these attributes, typography base tokens enable the creation of reusable and adaptable text styles that align with the system's design principles.

Unit Usage​

Typography tokens use em instead of rem. This approach allows us to apply a size multiplier factor depending on the typography used and its base design.

  • em ensures that the size multiplier only affects text by being relative to the body font size.
  • rem, on the other hand, is relative to the html root size, meaning any global font scaling would also affect element dimensions (such as spacing, width, and height).

Using a size multiplier factor in body combined with em ensures that only typography scales dynamically, while other rem-based properties remain consistent.

Best Practices​

  • Always use typography mixins whenever possible to ensure consistency and apply design tokens correctly.
  • Use em for font-size to allow flexible text scaling per typography.
  • Use rem for spacing, width, and height to maintain a stable layout structure.

By following this approach, typography remains fluid while preserving predictable spacing and component behavior.

Font Size​

Determines the size of the text.

$cdsbt-font-size-12: 0.75em;
$cdsbt-font-size-14: 0.875em;
$cdsbt-font-size-16: 1em;
$cdsbt-font-size-20: 1.25em;
$cdsbt-font-size-24: 1.5em;
$cdsbt-font-size-32: 2em;
$cdsbt-font-size-40: 2.5em;
$cdsbt-font-size-48: 3em;
$cdsbt-font-size-64: 4em;
$cdsbt-font-size-96: 6em;
$cdsbt-font-size-128: 8em;

Font Weight​

Specifies the thickness of the font, from light to bold.

$cdsbt-font-weight-400: 400;
$cdsbt-font-weight-700: 700;

Letter Spacing​

Controls the spacing between characters for optimal readability.

$cdsbt-letter-spacing-w250: 0.250rem;
$cdsbt-letter-spacing-w125: 0.125rem;
$cdsbt-letter-spacing-0: 0;
$cdsbt-letter-spacing-n125: -0.125rem;
$cdsbt-letter-spacing-n250: -0.250rem;

Line Height​

Defines the vertical spacing between lines of text, ensuring visual clarity.

$cdsbt-line-height-08: 0.8;
$cdsbt-line-height-10: 1;
$cdsbt-line-height-12: 1.2;
$cdsbt-line-height-16: 1.6;