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.275rem max: 3.083rem min: 37px 320px viewport: 32px 400px viewport: 35px 1400px viewport: 37px 1920px viewport: 41px max: 50px 320px viewport: 44px 400px viewport: 47px 1400px viewport: 50px 1920px viewport: 56px
xxlarge @include bolt-font-size(xxlarge) 1.781rem 29px 320px viewport: 25px 400px viewport: 27px 1400px viewport: 29px 1920px viewport: 33px
xlarge @include bolt-font-size(xlarge) 1.417rem 23px 320px viewport: 20px 400px viewport: 22px 1400px viewport: 23px 1920px viewport: 26px
large @include bolt-font-size(large) 1.111rem 18px 320px viewport: 16px 400px viewport: 17px 1400px viewport: 18px 1920px viewport: 20px
medium @include bolt-font-size(medium) 1rem 16px 320px viewport: 14px 400px viewport: 15px 1400px viewport: 16px 1920px viewport: 18px
small @include bolt-font-size(small) 0.9rem 15px 320px viewport: 13px 400px viewport: 14px 1400px viewport: 15px 1920px viewport: 17px
xsmall @include bolt-font-size(xsmall) 0.8rem 13px 320px viewport: 12px 400px viewport: 12px 1400px viewport: 13px 1920px viewport: 15px
xxsmall @include bolt-font-size(xxsmall) 0.7rem 12px 320px viewport: 10px 400px viewport: 11px 1400px viewport: 12px 1920px viewport: 13px
*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
Debug Panel