typography overview

Typography 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 Heading: Open Sans Characters
ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&<-+÷×=>®©$€£¥¢:;,.* Styles
Semi-Bold Semi-Bold Italic Bold Bold Italic Code: 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. Scales Body Text
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 Heading Headline
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. small Every second he kept glancing at the clock. xsmall Subheadline
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 Eyebrow
Every second he kept glancing at the clock. xsmall (only size) *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 Tokens Font-family Tokens
SCSS mixin Font-family
body @include bolt-font-family(body) Open Sans
heading @include bolt-font-family(heading) Open Sans
code @include bolt-font-family(code) monospace
Font-size Tokens
SCSS mixin Font scale Font-size (at 1400px viewport)*
xxxlarge** @include bolt-font-size(xxxlarge) min: 2.35rem max: 2.5rem min: 38px 320px viewport: 33px 400px viewport: 36px 1400px viewport: 38px max: 40px 320px viewport: 35px 400px viewport: 38px 1400px viewport: 40px
xxlarge @include bolt-font-size(xxlarge) 1.75rem 28px 320px viewport: 25px 400px viewport: 27px 1400px viewport: 28px
xlarge @include bolt-font-size(xlarge) 1.4rem 23px 320px viewport: 20px 400px viewport: 21px 1400px viewport: 23px
large @include bolt-font-size(large) 1.15rem 19px 320px viewport: 17px 400px viewport: 18px 1400px viewport: 19px
medium @include bolt-font-size(medium) 1rem 16px 320px viewport: 14px 400px viewport: 15px 1400px viewport: 16px
small @include bolt-font-size(small) 0.9rem 15px 320px viewport: 13px 400px viewport: 14px 1400px viewport: 15px
xsmall @include bolt-font-size(xsmall) 0.8rem 13px 320px viewport: 12px 400px viewport: 12px 1400px viewport: 13px
xxsmall @include bolt-font-size(xxsmall) 0.7rem 12px 320px viewport: 10px 400px viewport: 11px 1400px viewport: 12px
*Font-sizes in Bolt are responsive from 320px viewport to 1920px viewport. View Breakpoint System **xxxlarge size has an additional scaling effect because it's intended to be used as display text (hero headline). Font-weight Tokens
SCSS mixin Font-weight
regular @include bolt-font-weight(regular) 400
semibold @include bolt-font-weight(semibold) 600
bold @include bolt-font-weight(bold) 800