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
Regular Regular Italic Semi-Bold Semi-Bold Italic Bold Bold Italic Code: monospace* Characters
ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&<-+÷×=>®©$€£¥¢:;,.* Styles
Regular Regular Italic Bold Bold 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 headlines. 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
heading @include bolt-font-family(heading) Open Sans
body @include bolt-font-family(body) 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) 3.083rem (below 60 characters) 49px scales from 43px to 55px
2.275rem (above 60 characters) 36px scales from 32px to 41px
xxlarge @include bolt-font-size(xxlarge) 1.781rem 28px scales from 25px to 32px
xlarge @include bolt-font-size(xlarge) 1.417rem 23px scales from 20px to 25px
large @include bolt-font-size(large) 1.111rem 18px scales from 16px to 20px
medium (base) @include bolt-font-size(medium) 1rem 16px scales from 14px to 18px
small @include bolt-font-size(small) 0.9rem 14px scales from 13px to 16px
xsmall @include bolt-font-size(xsmall) 0.8rem 13px scales from 11px to 14px
*xxxlarge headline text has an additional scaling effect depending on the length of the text. **Font-sizes in Bolt are responsive from 320px viewport to 1920px viewport. View Breakpoint System 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