typography system

Typography System The typographic foundation of Bolt. Fonts Body: Open Sans Characters
ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&<-+÷×=>®©$€£¥¢:;,.* Styles
Regular Regular Italic Semi-Bold Semi-Bold Italic Bold Bold Italic Headline: Open Sans Characters
ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&<-+÷×=>®©$€£¥¢:;,.* Styles
Regular Regular Italic Semi-Bold Semi-Bold Italic Bold Bold Italic Code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace* Characters
ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&<-+÷×=>®©$€£¥¢:;,.* Styles
Regular Regular Italic *Bolt prefers the system default for code text’s font-family which maximizes the readability across all platforms and browsers.
Size Scales Body Scale Text
medium: 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. Heading Scale Headline
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. small: Every second he kept glancing at the clock. xsmall: Every second he kept glancing at the clock. Subheadline
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. Eyebrow
xsmall (only option): Every second he kept glancing at the clock. *xxxlarge size should only be used for display text (hero headline).
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
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)*
xxxlarge var(--bolt-type-font-size-xxxlarge) 2.35rem 36px scales from 33px to 38px
xxlarge var(--bolt-type-font-size-xxlarge) 1.75rem 27px scales from 25px to 28px
xlarge var(--bolt-type-font-size-xlarge) 1.4rem 21px scales from 20px to 23px
large var(--bolt-type-font-size-large) 1.15rem 18px scales from 17px to 19px
medium var(--bolt-type-font-size-medium) 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
xxsmall var(--bolt-type-font-size-xxsmall) 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) 800
Line-height
CSS custom property Value
xxxlarge var(--bolt-type-font-weight-xxxlarge) 1.25
xxlarge var(--bolt-type-font-weight-xxlarge) 1.35
xlarge var(--bolt-type-font-weight-xlarge) 1.4
large var(--bolt-type-font-weight-large) 1.5
medium var(--bolt-type-font-weight-medium) 1.55
small var(--bolt-type-font-weight-small) 1.45
xsmall var(--bolt-type-font-weight-xsmall) 1.4
xxsmall var(--bolt-type-font-weight-xxsmall) 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