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
xxlarge var(--bolt-type-font-size-xxlarge) 1.75rem
xlarge var(--bolt-type-font-size-xlarge) 1.4rem
large var(--bolt-type-font-size-large) 1.15rem
medium var(--bolt-type-font-size-medium) 1rem
small var(--bolt-type-font-size-small) 0.9rem
xsmall var(--bolt-type-font-size-xsmall) 0.8rem
xxsmall var(--bolt-type-font-size-xxsmall) 0.7rem
*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
regular var(--bolt-type-font-weight-regular) 0
wide var(--bolt-type-font-weight-wide) 0.05rem