Forma 36 Logo

Typography

Font base

Our font base is used in combination with the REM font sizes below

TokenCSS VariableValue
font-base-default--font-base-default16

Font sizes

TokenCSS VariableValue (rem)Value (px)
font-size-3xl--font-size-3xl2.1875rem35px
font-size-2xl--font-size-2xl1.75rem28px
font-size-xl--font-size-xl1.3125rem21px
font-size-l--font-size-l1rem16px
font-size-m--font-size-m0.875rem14px
font-size-s--font-size-s0.75rem12px

Font weights

TokenCSS VariableValue
font-weight-normal--font-weight-normal500
font-weight-medium--font-weight-medium600
font-weight-demi-bold--font-weight-demi-bold700

Line heights

TokenExampleCSS VariableValue
line-height-default
Manage content better with infrastructure. It’s the cure for the common CMS. Update once and publish everywhere, so teams build digital products faster.
--line-height-default1.5
line-height-condensed
Manage content better with infrastructure. It’s the cure for the common CMS. Update once and publish everywhere, so teams build digital products faster.
--line-height-condensed1.25

Font stacks

TokenExampleCSS VariableValue
font-stack-primary
Manage content better with infrastructure. It’s the cure for the common CMS. Update once and publish everywhere, so teams build digital products faster.
--font-stack-primary'Avenir Next W01', -apple-system, BlinkMacSystemTypography, 'Segoe UI', Cantarell, Helvetica, Arial, sans-serif
font-stack-monospace
Manage content better with infrastructure. It’s the cure for the common CMS. Update once and publish everywhere, so teams build digital products faster.
--font-stack-monospace'Menlo', 'Andale mono', monospace

Letter-spacing

TokenExampleCSS VariableValue
letter-spacing-wide
Contentful
--letter-spacing-wide0.1rem