Foundations

Typography

17 responsive styles, Funnel Sans + Inter.

17 styles, all responsive: the Desktop value applies from 768px up, Mobile below — in the token, not the component. Use the shorthand: font: var(--text-<style>).

The quick brown fox
--text-heading-xlFunnel Sans 600 · D 30px/36px · M 28px/36px
The quick brown fox
--text-heading-lFunnel Sans 500 · D 24px/32px · M 22px/28px
The quick brown fox
--text-heading-mFunnel Sans 500 · D 20px/28px · M 18px/24px
The quick brown fox
--text-heading-sFunnel Sans 500 · D 18px/24px · M 16px/20px
The quick brown fox
--text-heading-xsFunnel Sans 500 · D 16px/22px · M 14px/18px
The quick brown fox
--text-body-lInter 400 · D 16px/24px · M 16px/24px
The quick brown fox
--text-body-mInter 400 · D 14px/20px · M 14px/20px
The quick brown fox
--text-body-sInter 400 · D 12px/18px · M 12px/18px
The quick brown fox
--text-body-xsInter 400 · D 10px/16px · M 10px/16px
The quick brown fox
--text-label-lInter 500 · D 16px/20px · M 14px/20px
The quick brown fox
--text-label-mInter 500 · D 14px/18px · M 12px/18px
The quick brown fox
--text-label-sInter 500 · D 12px/16px · M 10px/16px
The quick brown fox
--text-captionInter 400 · D 12px/16px · M 12px/16px
The quick brown fox
--text-button-lFunnel Sans 500 · D 16px/24px · M 16px/24px
The quick brown fox
--text-button-mFunnel Sans 500 · D 14px/20px · M 14px/20px
The quick brown fox
--text-button-sFunnel Sans 500 · D 12px/18px · M 12px/18px
The quick brown fox
--text-linkInter 500 · D 14px/20px · M 14px/20px