Fundação

Tipografia

17 estilos responsivos, Funnel Sans + Inter.

17 estilos, todos responsivos: o valor Desktop vale de 768px pra cima, o Mobile abaixo — no token, não no componente. Use o shorthand: font: var(--text-<estilo>).

O rápido raposo marrom
--text-heading-xlFunnel Sans 600 · D 30px/36px · M 28px/36px
O rápido raposo marrom
--text-heading-lFunnel Sans 500 · D 24px/32px · M 22px/28px
O rápido raposo marrom
--text-heading-mFunnel Sans 500 · D 20px/28px · M 18px/24px
O rápido raposo marrom
--text-heading-sFunnel Sans 500 · D 18px/24px · M 16px/20px
O rápido raposo marrom
--text-heading-xsFunnel Sans 500 · D 16px/22px · M 14px/18px
O rápido raposo marrom
--text-body-lInter 400 · D 16px/24px · M 16px/24px
O rápido raposo marrom
--text-body-mInter 400 · D 14px/20px · M 14px/20px
O rápido raposo marrom
--text-body-sInter 400 · D 12px/18px · M 12px/18px
O rápido raposo marrom
--text-body-xsInter 400 · D 10px/16px · M 10px/16px
O rápido raposo marrom
--text-label-lInter 500 · D 16px/20px · M 14px/20px
O rápido raposo marrom
--text-label-mInter 500 · D 14px/18px · M 12px/18px
O rápido raposo marrom
--text-label-sInter 500 · D 12px/16px · M 10px/16px
O rápido raposo marrom
--text-captionInter 400 · D 12px/16px · M 12px/16px
O rápido raposo marrom
--text-button-lFunnel Sans 500 · D 16px/24px · M 16px/24px
O rápido raposo marrom
--text-button-mFunnel Sans 500 · D 14px/20px · M 14px/20px
O rápido raposo marrom
--text-button-sFunnel Sans 500 · D 12px/18px · M 12px/18px
O rápido raposo marrom
--text-linkInter 500 · D 14px/20px · M 14px/20px