Skip to main content
Version: Current

Design System Tokens - Typography

You can adjust any of the defaults in the src/_config/values folder of your design system.

Body font

This the base typeface for most of the components. You can modify the default as needed.

export const bodyFontValue = '"Segoe UI", Arial, Helvetica, sans-serif';

Usage in your code

font-family: var(--body-font);

Font sizes and line heights

This is a group of variables describing the font size and line-height hierarchy.

export const typeRampBaseFontSizeValue = '14px';
export const typeRampBaseLineHeightValue = '20px';
// ... remaining variables

Usage in your code

font-size: var(--type-ramp-minus-1-font-size);
line-height: var(--type-ramp-minus-1-line-height);