Bolt Design System

typography

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