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-default
16

Font sizes

TokenCSS VariableValue (rem)Value (px)
font-size-3xl
--font-size-3xl
2.1875rem
35px
font-size-2xl
--font-size-2xl
1.75rem
28px
font-size-xl
--font-size-xl
1.3125rem
21px
font-size-l
--font-size-l
1rem
16px
font-size-m
--font-size-m
0.875rem
14px
font-size-s
--font-size-s
0.75rem
12px

Font weights

TokenCSS VariableValue
font-weight-normal
--font-weight-normal
400
font-weight-medium
--font-weight-medium
600
font-weight-demi-bold
--font-weight-demi-bold
700

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-default
1.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-condensed
1.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
-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
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
SFMono-Regular, Consolas, Liberation Mono, Menlo,monospace

Letter-spacing

TokenExampleCSS VariableValue
letter-spacing-wide
Contentful
--letter-spacing-wide
0.1rem