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 |
|
CSS custom property | Value | |
---|---|---|
chakrapetch | var(--bolt-type-font-family-chakrapetch) | Chakra Petch |
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 |
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 |
|