Skip to main content

Typography

Typography is one of the main ways you surface content in products. We care about good defaults to provide you a clear hierarchy and contrasting styles in your typography scale.
The Token can be found in typo.json.

Core Token

Font Families

TokenPreview
--ks-font-family-display
Almost before we knew it, we had left the ground.
--ks-font-family-copy
Almost before we knew it, we had left the ground.
--ks-font-family-ui
Almost before we knew it, we had left the ground.
--ks-font-family-mono
Almost before we knew it, we had left the ground.
token.css
Copy

_5
:root {
_5
--ks-font-family-copy: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
_5
Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
_5
'Segoe UI Symbol';
_5
}

Font Size

TokenPreview
--ks-font-size-copy-xxs
Almost before we knew it, we had left the ground.
--ks-font-size-copy-xs
Almost before we knew it, we had left the ground.
--ks-font-size-copy-s
Almost before we knew it, we had left the ground.
--ks-font-size-copy-m
Almost before we knew it, we had left the ground.
--ks-font-size-copy-l
Almost before we knew it, we had left the ground.
--ks-font-size-copy-xl
Almost before we knew it, we had left the ground.
--ks-font-size-copy-xxl
Almost before we knew it, we had left the ground.
token.css
Copy

_5
:root {
_5
--ks-font-size-copy-m: calc(
_5
var(--ks-font-size-copy-m-base) * var(--ks-font-size-copy-bp-factor, 1)
_5
);
_5
}

Line Height

TokenPreview
--ks-font-line-height-copy-xxs
Almost before we knew it, we had left the ground.
dolor sit amet
--ks-font-line-height-copy-xs
Almost before we knew it, we had left the ground.
dolor sit amet
--ks-font-line-height-copy-s
Almost before we knew it, we had left the ground.
dolor sit amet
--ks-font-line-height-copy-m
Almost before we knew it, we had left the ground.
dolor sit amet
--ks-font-line-height-copy-l
Almost before we knew it, we had left the ground.
dolor sit amet
--ks-font-line-height-copy-xl
Almost before we knew it, we had left the ground.
dolor sit amet
--ks-font-line-height-copy-xxl
Almost before we knew it, we had left the ground.
dolor sit amet
token.css
Copy

_3
:root {
_3
--ks-line-height-copy-m: 1.5;
_3
}

Semantic Token

Font package

A combination of font-size, font-family and line-height.

TokenApplicationPreview
--ks-font-display-mHeadlines
Almost before we knew it, we had left the ground.
--ks-font-copy-mCopy Text
Almost before we knew it, we had left the ground.
--ks-font-ui-mUser interface
Almost before we knew it, we had left the ground.
--ks-font-mono-mCode Snippets
Almost before we knew it, we had left the ground.
token.css
Copy

_5
:root {
_5
--ks-font-copy-m: var(--ks-font-size-copy-m) / var(--ks-line-height-copy-m) var(
_5
--ks-font-family-copy
_5
);
_5
}

Font Weight

TokenPreview
--ks-font-weight-light
Almost before we knew it, we had left the ground.
--ks-font-weight-regular
Almost before we knew it, we had left the ground.
--ks-font-weight-semi-bold
Almost before we knew it, we had left the ground.
--ks-font-weight-bold
Almost before we knew it, we had left the ground.
token.css
Copy

_3
:root {
_3
--ks-font-weight-regular: 400;
_3
}

Figma

See the following Page in our Figma tokens file for a visual representation: