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