Typography Tokens Design tokens for Bolt’s typography system, available as CSS custom properties. Open Sans

Important Notes:

Open Sans is a default font family for the bolt design system. It's used for body text and headlines accross bolt elements and components. Bolt prefers the system default for code text’s font-family which maximizes the readability across all platforms and browsers.
Font-family
CSS custom property Value
body var(--bolt-type-font-family-body) Open Sans
headline var(--bolt-type-font-family-headline) Open Sans
code var(--bolt-type-font-family-code) 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace
fallback var(--bolt-type-font-family-fallback) -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans','Helvetica Neue', sans-serif
Font-size
CSS custom property Value in rem Value in px (at 1400px viewport)*
largedisplay var(--bolt-type-font-size-largedisplay) 4.5rem 68px scales from 63px to 72px
display var(--bolt-type-font-size-display) 3.75rem 57px scales from 53px to 60px
xxxlarge var(--bolt-type-font-size-xxxlarge) 3rem 45px scales from 42px to 48px
xxlarge var(--bolt-type-font-size-xxlarge) 2.35rem 36px scales from 33px to 38px
xlarge var(--bolt-type-font-size-xlarge) 1.75rem 27px scales from 25px to 28px
large var(--bolt-type-font-size-large) 1.4rem 21px scales from 20px to 23px
medium var(--bolt-type-font-size-medium) 1.15rem 18px scales from 17px to 19px
regular var(--bolt-type-font-size-regular) 1rem 15px scales from 14px to 16px
small var(--bolt-type-font-size-small) 0.9rem 14px scales from 13px to 15px
xsmall var(--bolt-type-font-size-xsmall) 0.8rem 12px scales from 12px to 13px
tiny var(--bolt-type-font-size-tiny) 0.7rem 11px scales from 10px to 12px
*Font-sizes in Bolt are responsive from 320px viewport to 1920px viewport. View Breakpoint System
Font-weight
CSS custom property Value
light var(--bolt-type-font-weight-light) 300
regular var(--bolt-type-font-weight-regular) 400
semibold var(--bolt-type-font-weight-semibold) 600
bold var(--bolt-type-font-weight-bold) 700
extrabold var(--bolt-type-font-weight-extrabold) 800
Line-height
CSS custom property Value
largedisplay var(--bolt-type-line-height-largedisplay) 1.05
display var(--bolt-type-line-height-display) 1.05
xxxlarge var(--bolt-type-line-height-xxxlarge) 1.2
xxlarge var(--bolt-type-line-height-xxlarge) 1.2
xlarge var(--bolt-type-line-height-xlarge) 1.3
large var(--bolt-type-line-height-large) 1.4
medium var(--bolt-type-line-height-medium) 1.5
regular var(--bolt-type-line-height-regular) 1.55
small var(--bolt-type-line-height-small) 1.45
xsmall var(--bolt-type-line-height-xsmall) 1.4
tiny var(--bolt-type-line-height-tiny) 1.4
Letter-spacing
CSS custom property Value in rem Value in px
narrow var(--bolt-type-font-weight-narrow) -0.025rem -0.375px scales from -0.35px to -0.4px
regular var(--bolt-type-font-weight-regular) 0 0px scales from 0px to 0px
wide var(--bolt-type-font-weight-wide) 0.05rem 0.75px scales from 0.7001px to 0.8px
Lora

Important Notes:

Lora is an alternative for the Open Sans, below are all tokens which should be used with font Lora. See tha way of usage Lora with Type Element. Note that Lora has one additional font-size - xlargedisplay. It also differs with font-weight comparing to Open Sans.
Font-family
CSS custom property Value
Font-size
CSS custom property Value in rem Value in px (at 1400px viewport)*
*Font-sizes in Bolt are responsive from 320px viewport to 1920px viewport. View Breakpoint System
Font-weight
CSS custom property Value
Line-height
CSS custom property Value
xlargedisplay var(--bolt-type-line-height-xlargedisplay) 1.05
largedisplay var(--bolt-type-line-height-largedisplay) 1.05
display var(--bolt-type-line-height-display) 1.05
xxxlarge var(--bolt-type-line-height-xxxlarge) 1.2
xxlarge var(--bolt-type-line-height-xxlarge) 1.2
xlarge var(--bolt-type-line-height-xlarge) 1.3
large var(--bolt-type-line-height-large) 1.4
medium var(--bolt-type-line-height-medium) 1.5
regular var(--bolt-type-line-height-regular) 1.55
small var(--bolt-type-line-height-small) 1.45
xsmall var(--bolt-type-line-height-xsmall) 1.4
tiny var(--bolt-type-line-height-tiny) 1.4
Letter-spacing
CSS custom property Value in rem Value in px
narrow var(--bolt-type-font-weight-narrow) -0.025rem -0.375px scales from -0.35px to -0.4px
regular var(--bolt-type-font-weight-regular) 0 0px scales from 0px to 0px
wide var(--bolt-type-font-weight-wide) 0.05rem 0.75px scales from 0.7001px to 0.8px
Chakra Petch

Important Notes:

Approval is required to use Charka Petch. This is to ensure alignment with Pega's design strategy.

Font-family
CSS custom property Value
Font-size
CSS custom property Value in rem Value in px (at 1400px viewport)*
largedisplay var(--bolt-type-font-size-largedisplay) 4.5rem 68px scales from 63px to 72px
display var(--bolt-type-font-size-display) 3.75rem 57px scales from 53px to 60px
xxxlarge var(--bolt-type-font-size-xxxlarge) 3rem 45px scales from 42px to 48px
xxlarge var(--bolt-type-font-size-xxlarge) 2.35rem 36px scales from 33px to 38px
xlarge var(--bolt-type-font-size-xlarge) 1.75rem 27px scales from 25px to 28px
large var(--bolt-type-font-size-large) 1.4rem 21px scales from 20px to 23px
medium var(--bolt-type-font-size-medium) 1.15rem 18px scales from 17px to 19px
regular var(--bolt-type-font-size-regular) 1rem 15px scales from 14px to 16px
small var(--bolt-type-font-size-small) 0.9rem 14px scales from 13px to 15px
xsmall var(--bolt-type-font-size-xsmall) 0.8rem 12px scales from 12px to 13px
tiny var(--bolt-type-font-size-tiny) 0.7rem 11px scales from 10px to 12px
*Font-sizes in Bolt are responsive from 320px viewport to 1920px viewport. View Breakpoint System
Font-weight
CSS custom property Value
light var(--bolt-type-font-weight-light) 300
regular var(--bolt-type-font-weight-regular) 400
semibold var(--bolt-type-font-weight-semibold) 600
bold var(--bolt-type-font-weight-bold) 700
Line-height
CSS custom property Value
largedisplay var(--bolt-type-line-height-largedisplay) 1.05
display var(--bolt-type-line-height-display) 1.05
xxxlarge var(--bolt-type-line-height-xxxlarge) 1.2
xxlarge var(--bolt-type-line-height-xxlarge) 1.2
xlarge var(--bolt-type-line-height-xlarge) 1.3
large var(--bolt-type-line-height-large) 1.4
medium var(--bolt-type-line-height-medium) 1.5
regular var(--bolt-type-line-height-regular) 1.55
small var(--bolt-type-line-height-small) 1.45
xsmall var(--bolt-type-line-height-xsmall) 1.4
tiny var(--bolt-type-line-height-tiny) 1.4
Letter-spacing
CSS custom property Value in rem Value in px
narrow var(--bolt-type-font-weight-narrow) -0.025rem -0.375px scales from -0.35px to -0.4px
regular var(--bolt-type-font-weight-regular) 0 0px scales from 0px to 0px
wide var(--bolt-type-font-weight-wide) 0.05rem 0.75px scales from 0.7001px to 0.8px