Typography Tokens Design tokens for Bolt’s typography system, available as CSS custom properties. Font-family
CSS custom property Value
body var(--bolt-type-font-family-body) Open Sans
headline var(--bolt-type-font-family-headline) Open Sans
lora var(--bolt-type-font-family-lora) Lora
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.27
display var(--bolt-type-line-height-display) 1.25
xxxlarge var(--bolt-type-line-height-xxxlarge) 1.25
xxlarge var(--bolt-type-line-height-xxlarge) 1.25
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