Light
Light Italic
Regular
Regular Italic
Semi-Bold
Semi-Bold Italic
Bold
Bold Italic
Extra Bold
Extra Bold Italic
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.
regular: 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.
xsmall: Every second he kept glancing at the clock.
regular
regular italic
medium
medium italic
semibold
semibold italic
bold
bold italic
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.
regular: 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.
xsmall: Every second he kept glancing at the clock.
This is a xxxlarge headline
This is a xlarge subheadline
This is a small headline
This is a xxxlarge headline
This is a xxlarge subheadline
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.
This is an eyebrow
This is a xlarge headline
Inline xxlarge subheadline & xxlarge headline
| CSS custom property | Value | |
|---|---|---|
| body | var(--bolt-type-font-family-body) | Open Sans |
| headline | var(--bolt-type-font-family-headline) | Open Sans |
| code | var(--bolt-type-font-family-code) | 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace |
| fallback | var(--bolt-type-font-family-fallback) | -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans','Helvetica Neue', sans-serif |
| CSS custom property | Value in rem | Value in px (at 1400px viewport)* | |
|---|---|---|---|
| largedisplay | var(--bolt-type-font-size-largedisplay) | 4.5rem |
|
| display | var(--bolt-type-font-size-display) | 3.75rem |
|
| xxxlarge | var(--bolt-type-font-size-xxxlarge) | 3rem |
|
| xxlarge | var(--bolt-type-font-size-xxlarge) | 2.35rem |
|
| xlarge | var(--bolt-type-font-size-xlarge) | 1.75rem |
|
| large | var(--bolt-type-font-size-large) | 1.4rem |
|
| medium | var(--bolt-type-font-size-medium) | 1.15rem |
|
| regular | var(--bolt-type-font-size-regular) | 1rem |
|
| small | var(--bolt-type-font-size-small) | 0.9rem |
|
| xsmall | var(--bolt-type-font-size-xsmall) | 0.8rem |
|
| tiny | var(--bolt-type-font-size-tiny) | 0.7rem |
|
| CSS custom property | Value | |
|---|---|---|
| light | var(--bolt-type-font-weight-light) | 300 |
| regular | var(--bolt-type-font-weight-regular) | 400 |
| semibold | var(--bolt-type-font-weight-semibold) | 600 |
| bold | var(--bolt-type-font-weight-bold) | 700 |
| extrabold | var(--bolt-type-font-weight-extrabold) | 800 |
| CSS custom property | Value | |
|---|---|---|
| largedisplay | var(--bolt-type-line-height-largedisplay) | 1.05 |
| display | var(--bolt-type-line-height-display) | 1.05 |
| xxxlarge | var(--bolt-type-line-height-xxxlarge) | 1.2 |
| xxlarge | var(--bolt-type-line-height-xxlarge) | 1.2 |
| xlarge | var(--bolt-type-line-height-xlarge) | 1.3 |
| large | var(--bolt-type-line-height-large) | 1.4 |
| medium | var(--bolt-type-line-height-medium) | 1.5 |
| regular | var(--bolt-type-line-height-regular) | 1.55 |
| small | var(--bolt-type-line-height-small) | 1.45 |
| xsmall | var(--bolt-type-line-height-xsmall) | 1.4 |
| tiny | var(--bolt-type-line-height-tiny) | 1.4 |
| CSS custom property | Value in rem | Value in px | |
|---|---|---|---|
| narrow | var(--bolt-type-font-weight-narrow) | -0.025rem |
|
| regular | var(--bolt-type-font-weight-regular) | 0 |
|
| wide | var(--bolt-type-font-weight-wide) | 0.05rem |
|
| CSS custom property | Value | |
|---|---|---|
| lora | var(--bolt-type-font-family-lora) | Lora |
| CSS custom property | Value in rem | Value in px (at 1400px viewport)* | |
|---|---|---|---|
| xlargedisplay | var(--bolt-type-font-size-xlargedisplay--lora) | 6rem |
|
| largedisplay | var(--bolt-type-font-size-largedisplay--lora) | 4.8rem |
|
| display | var(--bolt-type-font-size-display--lora) | 4rem |
|
| xxxlarge | var(--bolt-type-font-size-xxxlarge--lora) | 3.2rem |
|
| xxlarge | var(--bolt-type-font-size-xxlarge--lora) | 2.6rem |
|
| xlarge | var(--bolt-type-font-size-xlarge--lora) | 2rem |
|
| large | var(--bolt-type-font-size-large--lora) | 1.6rem |
|
| medium | var(--bolt-type-font-size-medium--lora) | 1.4rem |
|
| regular | var(--bolt-type-font-size-regular--lora) | 1.15rem |
|
| small | var(--bolt-type-font-size-small--lora) | 1.13rem |
|
| xsmall | var(--bolt-type-font-size-xsmall--lora) | 1rem |
|
| tiny | var(--bolt-type-font-size-tiny--lora) | 0.9rem |
|
| CSS custom property | Value | |
|---|---|---|
| regular | var(--bolt-type-font-weight-regular--lora) | 400 |
| medium | var(--bolt-type-font-weight-medium--lora) | 500 |
| semibold | var(--bolt-type-font-weight-semibold--lora) | 600 |
| bold | var(--bolt-type-font-weight-bold--lora) | 700 |
| CSS custom property | Value | |
|---|---|---|
| xlargedisplay | var(--bolt-type-line-height-xlargedisplay) | 1.05 |
| largedisplay | var(--bolt-type-line-height-largedisplay) | 1.05 |
| display | var(--bolt-type-line-height-display) | 1.05 |
| xxxlarge | var(--bolt-type-line-height-xxxlarge) | 1.2 |
| xxlarge | var(--bolt-type-line-height-xxlarge) | 1.2 |
| xlarge | var(--bolt-type-line-height-xlarge) | 1.3 |
| large | var(--bolt-type-line-height-large) | 1.4 |
| medium | var(--bolt-type-line-height-medium) | 1.5 |
| regular | var(--bolt-type-line-height-regular) | 1.55 |
| small | var(--bolt-type-line-height-small) | 1.45 |
| xsmall | var(--bolt-type-line-height-xsmall) | 1.4 |
| tiny | var(--bolt-type-line-height-tiny) | 1.4 |
| CSS custom property | Value in rem | Value in px | |
|---|---|---|---|
| narrow | var(--bolt-type-font-weight-narrow) | -0.025rem |
|
| regular | var(--bolt-type-font-weight-regular) | 0 |
|
| wide | var(--bolt-type-font-weight-wide) | 0.05rem |
|