typography system

Typography System The typographic foundation of Bolt. Fonts Body: Open Sans Characters
ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&<-+÷×=>®©$€£¥¢:;,.* Headline: Open Sans Characters
ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&<-+÷×=>®©$€£¥¢:;,.* Lora: Lora Characters
ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&<-+÷×=>®©$€£¥¢:;,.* Code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace* Characters
ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&<-+÷×=>®©$€£¥¢:;,.*
*Bolt prefers the system default for code text’s font-family which maximizes the readability across all platforms and browsers.

Styles


  • Light

  • Light Italic

  • Regular

  • Regular Italic

  • Semi-Bold

  • Semi-Bold Italic

  • Bold

  • Bold Italic

  • Extra Bold

  • Extra Bold Italic

Size Scales

Headline


  • largedisplay: Every second he kept glancing at the clock.*

  • display: Every second he kept glancing at the clock.*

  • xxxlarge: Every second he kept glancing at the clock.*

  • xxlarge: Every second he kept glancing at the clock.*

  • xlarge: Every second he kept glancing at the clock.

  • large: Every second he kept glancing at the clock.

  • medium: Every second he kept glancing at the clock.

  • regular: Every second he kept glancing at the clock.

  • small: Every second he kept glancing at the clock.

  • xsmall: Every second he kept glancing at the clock.

  • tiny: Every second he kept glancing at the clock.

*largedisplay, display, xxxlarge, and xxlarge sizes should only be used for display text (hero headline).

Subheadline


  • xlarge: Every second he kept glancing at the clock.

  • large: Every second he kept glancing at the clock.

  • medium: Every second he kept glancing at the clock.

Body


  • regular: Every second he kept glancing at the clock.

  • small: Every second he kept glancing at the clock.

  • xsmall: Every second he kept glancing at the clock.

Eyebrow


  • xsmall: Every second he kept glancing at the clock.

Pairings Common Pairings Article Title
This is a xxxlarge headline This is a xlarge subheadline Page Title
This is a small headline This is a xxxlarge headline This is a xxlarge subheadline Teaser
This is an eyebrow This is a xxxlarge headline This is a xxlarge subheadline This is regular text, and some lorem ipsum. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante. Etiam at risus et justo dignissim congue. Donec congue lacinia. Mini Teaser
This is an eyebrow This is a xlarge headline Inline Mix
Inline xxlarge subheadline & xxlarge headline

typography tokens

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